maxbaum

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

Recommended Posts

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 :)

Share this post


Link to post
Share on other sites

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.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

You can do it like this.

 

 

  • Like 4

Share this post


Link to post
Share on other sites

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 :)

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


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.