Jump to content
Search Community

GSAP + REACT ScrollTrigger animation

EA10 test
Moderator Tag

Recommended Posts

Howdy, @EA10. Welcome to the forums.


I looked at the CodeSandbox and I think you may have forgotten to save your changes because it literally has no GSAP code in it at all. Can you provide a minimal demo that shows the issue in context? We'd love to help with any GSAP-related stuff. 


Please don't include your whole project. Just some colored <div> elements and the GSAP code is best.


Here's a React Starter Template that you can fork.


Also, I'd highly recommend reading this article - it'll show you exactly how to use GSAP in React. Remember, gsap.context() is your best friend in React. It makes cleanup super easy, plus selection scoping. 


Have fun!

Link to comment
Share on other sites



A few things about your example:

  1. You have two end points in your ScrollTrigger configuration:
    scrollTrigger: {
      trigger: parentContainer.current,
      start: "top top",
      end: "bottom bottom",
      pin: true,
      scrub: 1,
      snap: 1 / (sections.length - 1),
      // Duplicated end position
      end: () => "+=" + parentContainer.current.offsetWidth,
      invalidateOnRefresh: true,

    Just use one of course.

  2. You are using both the native match media object and ScrollTrigger's match media inside the native one. I've never seen anything like that but most likely that would cause some troubles. You should use just GSAP MatchMedia since it's a wrapper for GSAP Context which makes using it in React super easy and offers the same goodies Context does plus responsive code.

I forked your example using just GSAP MatchMedia and it seems to work as expected:



Here you can read more about GSAP MatchMedia:



Hopefully this helps.

Happy Tweening!

  • Like 1
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.
  • Create New...