How to change keyframe of repeating timeline?

[Rick May]

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:

https://codesandbox.io/s/changekeyframe-fkenh

 

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?

 

Thanks,

Rick

 

 

[GreenSock]

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. 

 

https://codesandbox.io/s/changekeyframe-uh6gm

 

Does that help? 

[Rick May]

Perfect!  Thanks Jack!