Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bunnie

Pause is not working in Timeline

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 want to slide each element in my div one after the other having some pause after each item slides. Below is my code attached.

 

$(function () {

$('.tick').each(function () {

 

var $self = $(this);

var t1 = new TimelineLite();

t1.to($self, .5, { x: 100, ease: Cubic.easeInOut });

t1.pause();

t1.resume();

});

 

 

what it does is: It slides all the items at a time. Why isn't it pausing after each item slides... What is the issue in the code?

 

Thanks & Regards,

Bunnie

Link to post
Share on other sites

Hi,

 

First this is the ActionScript part of the forums.

 

The first issue is that you're pausing the timeline and resuming it at the same time; second you're creating a timeline on every pass of the each loop.

 

What you have to do is create the timeline outside the loop scope, add the particular tween to the timeline and give it a time between that tween and the next one, like this:

//Create the timeline just once
var t1 = new TimelineLite();

$('.tick').each(function () {
 
var $self = $(this);

t1.to($self, .5, { x: 100, ease: Cubic.easeInOut}, '+=time');
});

The final parameter ('+=time') is up to you and what it does is tell the engine that this particular tween goes that amount of time after the timeline ends, like that your tween will have a separation, but beware that this will cause an initial pause because the first tween won't be at zero seconds. A solution is change the loop code a bit:

//Create the timeline just once
var t1 = new TimelineLite();

$.each(('.tick'), function (index) {
 
var $self = $(this);

t1.to($self, .5, { x: 100, ease: Cubic.easeInOut}, ((0.5 * index) + (time * index)) );
});

You'll note that this time there are no quote marks nor +=, that is for setting a relative time, now we're using an absolute time because like this the first tween will be at zero, the second will be 0.5 seconds, plus the pause times the index, for example If you want the pause to be 0.5 seconds the first tween will be at zero, then:

  • index = 1 => ( (0.5 * 1) + (0.5 * 1) ) = 1
  • index = 2 => ( (0.5 * 2) + (0.5 * 2) ) = 2
  • index = 3 => ( (0.5 * 3) + (0.5 * 3) ) = 3

And so on.

 

Finally another approach is using the staggerTo method, is less code and you can avoid the math part, it'll be like this:

var ticks = $(".tick");

TweenMax.staggerTo(ticks, 0.5, {x:100, ease:Cubic.easeInOut}, time);

In this one the time indicates how apart each tween will start, so in this case it has to be greater than 0.5 otherwise the next tween will start before the previous ends.

 

Take a look at the API reference in order to learn more about all of this, look at the samples in this link:

http://www.greensock.com/get-started-js/

 

Look at the jump start, is very well explained and you have all the code there so you can see how the code behaves:

http://www.greensock.com/jump-start-js/

 

And last but not least look at the training codepens:

http://codepen.io/collection/giIvf

 

Hope this helps,

Cheers,

Rodrigo.

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

×