Jump to content

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

How to change keyframe of repeating timeline?

Recommended Posts

If you have a very simple timeline that is repeating over and over again, is there a way to adjust a keyframe of that timeline without starting/stopping it? 


My codesandbox example:



This isn't working, of course, but my intent is to give an example of what I'm trying to accomplish.  I'd like to have the ball going back and forth and the ability to adjust the tl.to keyframe (x position) while it is running and  without stopping the timeline.  What is the best way to go about this?






Link to post
Share on other sites

One thing to keep in mind is that GSAP is highly optimized for performance and it will record the starting/ending values internally the first time the tween renders, so you can't just update a variable somewhere else and expect it to get updated inside the tween. I know you weren't expecting that - I'm just making it clear for anyone else reading this...


You can force a tween/timeline to trash those recorded values and re-record them fresh on the next render by calling invalidate(). So here's a fork of your codesandbox that uses a function-based value in the tween and invalidates the timeline. We rewind it to 0 first to ensure that all the starting values are what they should be (otherwise if you were part-way into a tween when you call invalidate(), it'd of course lock in those as the starting values). Then invalidate and seek() to the current time so that it's as seamless as possible. 




Does that help? 

  • Like 3
  • Thanks 1
Link to post
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.