How to trigger animations on visibility and scroll
Hey everyone, it's a simple fade in animation but it's not triggering the elements with their own animation. Can someone explain to me how I may fix this? I've provided examples of my issue as well:
HTML
CSS
JS
<div class="project">
<div class="goals animate-on-scroll">
<div class="goals-contain">
<h1>Projected Goals</h1>
<div class="stats">
<div class="numbers">
<h3> <span class="million"></span> million</h3>
<p>in assets managed</p>
</div>
<div class="numbers">
<h3 class="managed"></h3>
<p>properties managed</p>
</div>
</div>
</div>
</div>
</div>
<div class="project">
<div class="goals animate-on-scroll">
<div class="goals-contain">
<h1>Projected Goals</h1>
<div class="stats">
<div class="numbers">
<h3> <span class="million"></span> million</h3>
<p>in assets managed</p>
</div>
<div class="numbers">
<h3 class="managed"></h3>
<p>properties managed</p>
</div>
</div>
</div>
</div>
</div>
.active {
animation: counter 3s forwards alternate ease;
counter-reset: num var(--num);
}
.active::after {
content: counter(num);
}
@keyframes counter {
from {
--num: 0;
}
to {
--num: 20;
}
}
.million {
animation: next 3s forwards alternate ease;
counter-reset: num var(--num);
}
.million::after {
content: counter(num);
}
@keyframes next {
from {
--num: 0;
}
to {
--num: 5;
}
}
.active {
animation: counter 3s forwards alternate ease;
counter-reset: num var(--num);
}
.active::after {
content: counter(num);
}
@keyframes counter {
from {
--num: 0;
}
to {
--num: 20;
}
}
.million {
animation: next 3s forwards alternate ease;
counter-reset: num var(--num);
}
.million::after {
content: counter(num);
}
@keyframes next {
from {
--num: 0;
}
to {
--num: 5;
}
}
const animateElement = document.querySelectorAll('.animate-on-scroll');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
} else {
entry.target.classList.remove('animate');
}
})
}, {
threshold: 0.5
});
for (let i = 0; i < animateElement.length; i++) {
const el = animateElement[i];
observer.observe(el);
}
const animateElement = document.querySelectorAll('.animate-on-scroll');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
} else {
entry.target.classList.remove('animate');
}
})
}, {
threshold: 0.5
});
for (let i = 0; i < animateElement.length; i++) {
const el = animateElement[i];
observer.observe(el);
}
0 Replies