Jump to content
Search Community

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

maxbaum test
Moderator Tag

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

Link to comment
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
Link to comment
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 :)

Link to comment
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
Link to comment
Share on other sites

  • Carl changed the title to How to clear a Timeline exactly at the end of current Animation

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.
×
×
  • Create New...