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

[caemostajo]

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! 

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

[Dipscom]

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.

[PointC]

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:

http://greensock.com/forums/topic/12361-using-functions-to-build-a-timeline/

 

http://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/

 

http://greensock.com/forums/topic/13650-controlling-main-thread/

 

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

http://greensock.com/position-parameter

 

Hopefully this helps a bit.

 

Happy tweening and welcome aboard.