Jump to content

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

Replay Timeline from current position

Recommended Posts

If you click on the square in my codepen, it flips. However, if you click on it again, the timeline does not run again. I have tried many different things using repeatRefresh and invalidate but I could not figure out the magic sauce. Thanks in advance for the assistance. 


See the Pen bGpZqEO by joeworkman (@joeworkman) on CodePen

Link to post
Share on other sites

I noticed a few problems: 

  1. You only created one timeline initially, and then you called play() on it each time a user clicked, but I think maybe you meant restart()? Remember, play() just makes the playhead go forward but after it plays all the way through, the playhead is at the END and it can't go forward past the end so play() won't really do anything. 
  2. I assume you're planning to have multiple cards at some point, right? If so, you'll of course need a separate animation for each one, so you should really put your animation-creation inside your forEach() loop so that it's scoped to each card. 
  3. Your animation is using a relative +=180 value which is fine but BE CAREFUL because what happens if someone clicks multiple times really fast? If it's just going 180 more than it is when the click occurs, it could end up at a funky spot. I find it much cleaner to create a variable that I add to on each click so that it can handle fast clicks without a problem (shown below). Also, you'd need to invalidate() your timeline each time if you want it to keep adding 180 on each run because the first time it renders, it locks in the starting/ending values. That's a good thing - it allows for very fast interpolation. 

Here's a fork: 

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


Does that work the way you wanted? 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

I hate when I feel like an idiot! I guess that is what I get for working late. Thank you Jack! 


Thanks for the advice on the multiple clicks. I actually discovered this by playing with it. I may add some classes with onStart and onComplete to protect me from that. 

Link to post
Share on other sites

Actually restart() is not what I was wanting. This is because it restarts the flip from side 1 every time. What you did in your codepen is what I was hoping to do with timelines. I thought about doing it the way that you have it but thought timelines were the better way to go. I guess I will stop using timelines then. 


Thanks again. 

Link to post
Share on other sites

Timelines are totally fine for that. I just always opt for the simplest approach when possible. If you need to control multiple animations as a whole, timelines are absolutely the way to go. Or if you're trying to choreograph various animations. But you just had two simple tweens that were starting at the same time anyway, so that seemed simplest. Nothing wrong with using a timeline if you prefer. 


And don't feel like an idiot! Your question will probably help several people in the future. I'm glad you asked it. Too many of us hide in the shadows because we're afraid to look "dumb", but I think it's far better to just put the questions out there because I guarantee you're not the only one wondering about it and it is most definitely NOT a dumb question. 


As for restart(), I know what you mean, and since you were using a relative tween you could do tl.invalidate().restart() but then you'd still be in danger of the "fast click" logic issue I mentioned. 


Happy tweening!

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