Jump to content
Search Community

Proper way to stop, jump and start a timeline

cmm 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

I have a stop/start button as well as slide indicators which you can click on(stop slide show and jumps to appropriate label).  When jumping around using the indicators and then starting the slide show it sometime jumps to the middle label.  You can see here (www.pradev.com - this is a sandbox site so excuse the mess.)  Is this the correct way to stop/start/jump? It happens most of the time when jumping from end to beginning and then hitting the start button.  
So this is a real skinny version of my timeline/control.:
// Stop selected

// indicator selected
// Where "label" is the appropriate slide marker from timeline.

// Start selected

// Time line code sniplet
tl.to([currentSlideLeft, currentSlideMiddle, currentSlideRight], .9, {width: '0px', height: height, marginLeft: halfMargin, opacity: '0.1'}, "+=10");

tl.to([currentSlideLeft1, currentSlideMiddle1, currentSlideRight1], .9, {width: '0px', height: height, marginLeft: halfMargin, opacity: '0.1'}, "+=10");

tl.to([currentSlideLeft2, currentSlideMiddle2, currentSlideRight2], .9, {width: '0px', height: height, marginLeft: halfMargin, opacity: '0.1'}, "+=10");


Thanks for a great product and your help

Link to comment
Share on other sites



Well a good way would be use pause (just like you're already using it) and play(), something like this:

tl.pause();//pauses the timeline
tl.play('labelName');//plays the timeline starting at that label

Another way could be to play the timeline starting at a specific label and going to the next one, keeping the timeline paused, using the tweenFromTo() method:

tl.tweenFromTo('labelName1', 'labelName2');

For what I can see in your site the last one seems to be the best choice, since when the user selects the slide the timeline stops. I'll set up a codepen in order to illustrate this methods.


Also you can declare the repeat and delays in the timeline declaration, like this:

var tl = new TimelineMax({repeat:-1, repeatDelay:1});


Hope this helps,



  • Like 1
Link to comment
Share on other sites

Thanks Rodrigo, I was looking for an answer as to why the timeline jumps to the wrong place on the tl.resume('label'); Here is the sequence of methods called:

tl.pause() called.
tl.seek(end) called.
tl.pause() called.
tl.seek(beginning) called.
tl.pause() called.
tl.resume() called.

Note: the extra tl.pause() called on the selection of the first slide after the selection of the last. Is this the problem? Does the t1.resume() not know where the timeline is when called?

Basically just need the proper way to stop, jump around, and then resume from the last jump point. Console log is showing the calls at: www.pradev.com

Link to comment
Share on other sites

I wasn't clear enough in my first post, sorry about that :mrgreen:


The seek() and resume() functions might not be needed, because you can achieve the same with just play("label") and pause(). If you have a timeline that lasts 10 seconds with labels at 3, 6 and 9 seconds and you play that timeline during 5 seconds, then you click a button to send the timeline to the 3 seconds label and stay paused, then you click the button to go to the 9 seconds label and stay paused and finally you click a button that executes the play() function, the timeline will play from 9 seconds and forward. That is why the behavior happening in your code is odd and could be because of the seek, pause and resume functions in it, my idea was something more simpler in order to see if that is the problem or something else.


Also I noticed that you created some sort of plugin for the slider, maybe something inside that could be causing the trouble.


As for the tweenFromTo method I forgot to mention that you can use the same label in both the from and to parameters and also can add a callback, so is a very powerful and handy method, something like this:

var tl = new timelineMax({repeat:-1, repeatDelay:1});

//in the rest of the code you add the labels and particular tweens

tl.tweenFromTo('label1', 'label1', {callbacks, easing});

So like that you just jump to that point on the timeline.


You can see it working here:

See the Pen Bgjzw by rhernando (@rhernando) on CodePen


In a personal opinion my first choice for a image/content slider wouldn't be a timeline, maybe a setTimeout or setInterval function calling a TweenMax on an element based on a class name (active and inactive) and with a callback that triggers the function over and over, also user events to pause or suspend the timeout or interval, because if you get too many elements inside the slider the labels thing could get a little troubling.


Hope this helps and sorry for not answering and getting the pen ready before,



  • Like 2
Link to comment
Share on other sites

Thanks Rodrigo for all the time you spend on this. I put my code here:

See the Pen sKIue by cmmize (@cmmize) on CodePen


The issue/bug still shows up in code view. I have tried several ways of starting and stopping the timeline as you suggested, but it's always the same result. You can easily duplicate the error by clicking the first indicator and then the last and then the first and then the Start. As you will see it jumps to the second TL tween. I wish I could use rotate like you did... but I have to support ie7.


This project was originally a setTimeout with nothing but JQ. But the need to jump around made me go to GS. I also have a lot more to add which really leaves out using setTimeout.

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...