Jump to content

Recommended Posts



i have a scenario, where i wish to animate elements from the last position to the new one depending on a large set of button options.


How do i make make code modular so not have the timeline in the click event function. Please see pen.

See the Pen owVVoo by Joostan-33 (@Joostan-33) on CodePen

Link to comment
Share on other sites

I'm curious - why don't you want to have the timeline(s) in the event function(s)? 


Remember that when a tween renders for the first time, it internally records the start/end values so that it can very quickly interpolate between them over the course of the tween. So if your goal is to have the animations re-orient themselves to whatever the current positions/values are, you'd need to essentially tell it to erase those values and re-record them as if it's running for the first time all over again. GSAP has an invalidate() method that does that, but it's not an ideal solution in your particular case because the way you've got it set up will create conflicting tweens that'd be running simultaneously, thus overwriting becomes an issue. 


For example, if you click between the buttons quickly, you'll be starting multiple timelines that contain tweens that are all fighting for control of the same property of the same object (telling it to go in completely different directions). By default, GSAP automatically handles overwriting by killing conflicting tweens when each tween renders for the first time. But in your case, doing so would make things look great the first time you click between things, but once a tween is killed due to an overwrite, it doesn't resurrect itself later, thus if you're trying to re-run a timeline that has a tween that was killed, it's not gonna run. Again, this is all by design and it's extremely helpful in most cases. But the way you've got your logic set up, it's probably not going to give you what you want *unless* you make sure to pause() the competing timelines as soon as you start running another one. 


Like to play ana03:



Or you can simply recreate your timelines inside your click() handlers. Either way is fine. 

  • Like 2
Link to comment
Share on other sites

Thanks taking the time to reply, and your great GSAP tool.


The pause, invalidate & restart works well. Pen updated.

I will experiment further with the pause invalidate().restart but it is good to hear that its fine to call it all from the click() handler.


I just find javascript so unruley!




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