Jump to content
Search Community

How to pause timeline in between animation

Jeff Pang test
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

I am unable to figure out how to immediately pause,stop or reset a timeline when the it is a playing. I have tried several variations which does not seem to work.

- tl.pause()
- tl.pause(0,false)
- tl.pause(0,true)
- tl.seek(0)
- tl.seek(0,false)
- tl.seek(0,true)
- tl.kill()
- tl.invalidate().pause()

See the Pen ORexex by jeffpang (@jeffpang) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Jeff Pang :)

 

Welcome to the GreenSock forums.

 

Your pause() isn't working because you're not playing the tl timeline. When you use the tweenFromTo() method, you're creating a new tween that scrubs the timeline. You have a couple options to get the correct behavior. Since you're playing the timeline from start to finish anyway, the easiest would be to change line 13 in your pen to simply play() the tl timeline:

//switch this:
tl.tweenFromTo("start","end");

//to this:
tl.play();

If you want to use the tweenFromTo() method so you can play from label to label, you'll need to create a reference to the new tween so you can control it. In your start button function you can create a reference to the new tween like this:

yourReference = tl.tweenFromTo("start","end");

Then change your pause button function to this:

yourReference.pause();

Here's a fork of your pen with the second option:

 

See the Pen 738a5b1a5ab18f00238350de686ff925 by PointC (@PointC) on CodePen

 

More reading about the tweenFromTo() method.

 

http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/tweenFromTo/

 

Hopefully that helps and makes sense.

 

Happy tweening.

:)

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