ScrollTrigger as a React component

[modulareverything 4 Likes (Newbie)]

I'm trying to get ScrollTrigger to work as a React component that I can wrap other elements in to have them animate when they appear.

 

So if I have a bunch of components named <Box /> and I want them to reveal themselves when as they are scrolled in to view, I want to be able to wrap them in a <Reveal /> component that will do this — rather than rewriting the same code.

 

Is there a simple way to do this? Currently in my live example (not in the CodePen... I'm not very good at writing these) the component animates in but it does all of the animations at the exact same time.

See the Pen RwrGYap by n0k5 (@n0k5) on CodePen

[ZachSaucier 7,046 Likes (Superhero)]

Hey ccld. This is likely because your trigger for all of them is the same: '.reveal' which GSAP will use .querySelector() on to get the first instance. You should pass in your reference instead I believe. Also, I'm not very skilled in React, but shouldn't your use effect have a [] as the last parameter so that it only runs after the initial render?

useEffect(() => {
  gsap.to(revealRef.current, {
    scrollTrigger: revealRef.current,
    x: 500,
  });
}, []);

 

[modulareverything 4 Likes (Newbie)]

That was it! I completely overlooked the trigger needing to be the same ref in this case (it animates itself in as it appears).

 

Thanks as always @ZachSaucier