animate snap-scrolling items

[Mando]

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})
        }
    })
})

 

See the Pen dyeMaWW by STR4NG3R (@STR4NG3R) on CodePen

[Cassie]

Hi there!

 

If you're looking to do scroll based animations - ScrollTrigger is the direction to go in! 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

I also recommend giving our React articles a look through

Hope this helps a little!

[GreenSock]

Yeah, the way you're doing that is extremely inefficient (performance-wise) because you're calling getBoundingClientRect() on every element on every scroll event. It's far more efficient (and simpler) to use ScrollTrigger. Plus your code was looking only at the vertical values but you're scrolling horizontally. 

 

Here's a quick fork that shows using ScrollTrigger: 

See the Pen YzLqbjY?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Good luck! 👍