Jump to content
Search Community

Timeline only runs once on click

Chris Heuberger test
Moderator Tag

Recommended Posts

I have four timelines, all paused, using MorsphSVG, and I have four buttons that play their respective timelines on click. The problem is that each timeline animation will only play once. Even though each button is properly registering clicks (see console log), clicking a button a second time (after clicking another button to reset the animation) doesn't re-run the animation.

See the Pen dyPBqPd by ChrisBup (@ChrisBup) on CodePen

Link to comment
Share on other sites

Hey Chris. Welcome to the forums and thanks for being a Club GreenSock member! 

 

This is the intended behavior. If you want to restart the animation, you could use .play(0) or .restart().

 

I noticed that you can save a lot of code by using GSAP's defaults. You're already using some GSAP 3 features - you should use more! That also means using the shorter string form of eases and moving the duration to inside of the vars parameter:

See the Pen MWYMZWa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side note: You don't need MorphSVG if you're just scaling things and moving them around. You could use an array of values instead and it'd actually perform even better and be a smaller file size. But this is also a valid use of MorphSVG :) 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hello,

 

I am not sure this is  what Chris wanted. You see, with a simple restart, you just jump at the beginning of the animation. So if you are in the middle of one animation and go for another, it doesn't transition smoothly. From what I see, I think that the actual intention is to build a "state machine" with smooth transitions between states, regardless of the current situation.

 

To do that, the trick is to basically re-define the animation whenever you want to trigger it. Maybe GSAP could have a property for the .from and .to animations to recalculate the animation every time the animation plays, idk. Anyway, here is the pen:

 

See the Pen XWggVNg by christosnc (@christosnc) on CodePen

 

Try to quickly change animations to see how it now smoothly transitions from one to another.

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