hi guys I'm trying to animate some cards in my project, the cards are within a scrollable element, in a few fords I want the card that is in the center of the viewport to fade out and the rest to remain at their current state, but whenever I scroll they fade out all at once, any help?
I'll leave the code here
function isVisible (ele) {
const { top, bottom } = ele.getBoundingClientRect();
const vHeight = (window.innerHeight || document.documentElement.clientHeight);
return (
(top > 0 || bottom > 0) &&
top < vHeight
);
}
projectWrapper.addEventListener('scroll', () => {
[...projectCards].forEach((card, i) => {
if (isVisible(card)){
gsap.to(`.project:nth-child(${i})`,{opacity: 0, duration: 2})
}
})
})