Jump to content
Search Community

Killing a timeline that is infinitely repeating?

blumaa@gmail.com test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hey I am having trouble figuring out how to stop an infinitely repeating timeline. Here is my demo: https://codesandbox.io/s/night-day-kill-infinite-repeat-wv62sn?file=/src/styles.scss:36-37

As you can see, when it is night time, the stars flicker. This is expected. But when you click the button and it switches to day, after a few seconds, the stars come back and start flickering again. How do I kill the timeline permanently when the mode is day?

 

Thanks for the help!

Link to comment
Share on other sites

  • Solution

It looks like you weren't doing proper cleanup. You created an infinitely looping timeline initially, and then when you click the button, you created another one...and when it was "day", you'd immediately kill it (which seemed odd/wasteful). But you never killed that original infinitely-repeating timeline. And every time you toggled it back to night again, you created another one, so they'd stack up over time. 

 

This is one of the reasons that the new gsap.context() is your new best friend in React - it makes cleanup super easy. Just wrap your code in a gsap.context() function and call revert() on it in the cleanup function and it'll automatically revert and kill all the animations that were created inside that context. 

 

I assume this is more like what you wanted?: 

https://codesandbox.io/s/night-day-kill-infinite-repeat-forked-s6jg7x

 

I'd strongly recommend reading this article: 

 

 

Enjoy! 👍

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...