Jump to content


Timeline play not working with ScrollTrigger in React

Moderator Tag
Go to solution Solved by OSUblake,

Recommended Posts

The Timeline play() method with ScrollTrigger is not working after the pin starts. 



There are 3 sections(red, blue, yellow). The blue section is pinned with ScrollTrigger. In the blue section there is a cyan box animated with the help of TimeLine(initially the animation is paused). There is button below the cyan box to play the animation/timeline. 


Steps to check: 

1. Scroll to a point so that the blue section is not pinned yet and you can see the cyan box and the "ANIMATE" button.

2. Press the "ANIMATE" button and it should animate as many times as you press the button.

3. Now scroll more into into the blue section so that the blue section gets pinned.

4. Now try to click the "ANIMATE" button and you will see the TimeLine is not playing.


The "ANIMATE" button will not work once the pinning starts so reload the page and follow steps 1 and 2 to see that the animation did indeed work befoer the pinning.


This maybe a trivial mistake on my part. Thanks for your help.

See the Pen oNGRmLJ by thunder80 (@thunder80) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums @thunder80


You should always create your animations inside a hook as closures do not work in React. If you need to reference an animation outside of hook, you should use useRef. 


See the Pen VwMJLgw by GreenSock (@GreenSock) on CodePen



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.