#lives-text-div {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
#lives-text-div.fade-in-up {
opacity: 1;
transform: translateY(0);
}
document.addEventListener("DOMContentLoaded", function () {
const textDiv = document.getElementById('lives-text-div');
const trigger = document.getElementById('animation-trigger-lives-improve');
const impactDiv = document.getElementById('impact-div');
let cameFromImpact = false;
// Setup awal: sembunyikan dan beri transition
if (textDiv) {
textDiv.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
textDiv.style.opacity = '0';
textDiv.style.transform = 'translateY(30px)';
}
// Observer untuk #animation-trigger-lives-improve
const showObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && cameFromImpact) {
if (textDiv) {
textDiv.style.opacity = '1';
textDiv.style.transform = 'translateY(0)';
}
}
});
}, {
threshold: 0.5
});
// Observer untuk #impact-div
const resetObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
cameFromImpact = true;
if (textDiv) {
textDiv.style.opacity = '0';
textDiv.style.transform = 'translateY(30px)';
}
}
});
}, {
threshold: 0.5
});
if (trigger) showObserver.observe(trigger);
if (impactDiv) resetObserver.observe(impactDiv);
});
HELP US CLEAN UP OUR OCEANS
HELP US CLEAN UP OUR OCEANS
When you buy a product, you fund the work that cleans 15 kg of plastic waste from the environment. But that's not all. You're also supporting full-time and formal jobs and local communities. Put it on, pass it on, and power impact.