Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTrigger as a React component

Recommended Posts

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

Link to comment
Share on other sites

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,
}, []);


  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.