How to clear a Timeline exactly at the end of current Animation

[maxbaum 1 Likes (Newbie)]

Hi there, i have a timelineMax with many animations added.

when i click a button i want reset the timeline and add completly new animations to the timeline so i do:

timeline.clear()

timeline.to(myAnimation)

timeline.restart()

unfortunately some svgs are stuck in the middle of the former Animations, because the restart/clear doesnt wait till the end of those animation, but interrupts them.

How can i wait till the current animation has finished and then restart/clear?

Im not at the end of the timeline so timeline.progress() is not an option.

 

Thank you

[Carl 9,754 Likes (Superhero)]

I'm a little unclear about the last part

 

How can i wait till the current animation has finished and then restart/clear?

 

Are you saying that if the user clicks the button 5 seconds into a 20 second long animation they should watch the animation play for 15 more seconds before it restarts?

 

If yes, assigning an onComplete callback dynamically (on click) to the timeline might work.
 

timeline.eventCallback("onComplete", resetTimeline);

 

https://greensock.com/docs/TimelineLite/eventCallback

 

for complex scenarios like this its very helpful to provide a reduced demo that clearly illustrates the issue.

 

I'm sure with some clarification, we can help figure this out.

 

 

[maxbaum 1 Likes (Newbie)]

Hey Carl ,

 

1st thank you

2nd i found its actualy the clear() method that i have trouble with.

If the user clicks the button 5.4 seconds into a 20 second long animation they should watch the animation play till second 6 and then timeline shall clear

[Sahil 2,627 Likes (Superhero)]

You can do it like this.

 

See the Pen XVajpq?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[maxbaum 1 Likes (Newbie)]

Hey Sahil

i added two lines of code

 

document.getElementById('btn').addEventListener('click', function(){
  clear = Math.ceil(tl.time());
  tl.time(clear) //added

  tl.clear() //added
});

 

so now it finishes the frame first and then clears thank you

[maxbaum 1 Likes (Newbie)]

can you maybe change the title of this topic to how to "clear" instead of restart .... thanks