Jump to content


timeline working weird when tl.restart(); is applied

Moderator Tag
Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi coders!

I was hoping to get some help with this pen.

When the page is loaded the TimeLine runs smoothly but when you click on the svg to run tl.restart() the #wave the drop creates when touching the water has a weird delay. 

how to run the TimeLine always like the first time?

thx!  :geek:

See the Pen YwREdX by caemostajo (@caemostajo) on CodePen

Link to comment
Share on other sites

Hi caemostajo,


The issue you have here is what is commonly known as 'spaghetti' code.  :) 


Long story short, you have tweens overlapping each other and it seems that when you rewind they get all mixed up. Another thing was that you were using "fall" as a position label but did not actually add the "fall" label anywhere.


I removed the second round of animations for simplicity sake and then, removed what appeared to be unnecessary code from your pen. It seems to restart correctly now:


See the Pen ZQmZVg?editors=0010 by dipscom (@dipscom) on CodePen


You might want to read into building timelines with functions if you are going to have an animation that repeats itself but changes some of its parameters, it will help you avoid mistakes and will also help reduce the amount of 'spaghetti' on your code.

  • Like 3
Link to comment
Share on other sites

  • Solution

Hi caemostajo :),


Welcome to the forums. 


Dipscom is right - the overlap is causing some issues here. In particular, the code below shows an overlap of the opacity on the wave path animation. If you remove that overlap (in both wave sections) your pen runs correctly on restart().

.to("#wave", 0.4, {scale:3 ,opacity:1, transformOrigin: "50% 50%"}, "-=0.1")
.to("#wave", 0.2, {opacity:0, ease: Expo.easeOut}, "-=0.2")// remove "-=0.2" and it all works as expected

I'd also agree that since your second section is the same as your first animation, this is a perfect situation to create a timeline in a function so you can reuse it again.


Here are a few posts with some good reading about this process:







Also be sure to read the blog post and watch the video about the position parameter - it's great!



Hopefully this helps a bit.


Happy tweening and welcome aboard.


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