Pause doesn't work in Timeline Lite

Question

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. It doesn't pause after each item slides... What is the issue in the code?

Thanks & Regards,

Bunnie

score 0 · Answer 1 · answered Sep 09 '13 at 12:42

var delayTween = 0.1;   // your pause time in seconds
var tweenArr = [];

// I have put this line outside of each block because it will re insatiate t1 all the time, and we require to initialise it only once
var t1 = new TimelineLite();

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

    // var $self = $(this);     
    // there is no need to bind this to jquery object because tweenmax works well with "this" (html element)

    tweenArr.push(
        TweenMax.to(this,0.5,{x:100,ease:Cubic.easeInOut});
    );

});

t1.add(
    tweenArr,
    '+=0',
    "sequance",
    delayTween
);

score 0 · Answer 2 · answered Sep 04 '14 at 20:01

Whats happening is you are calling pause() and then your calling resume() right after it.

What you can do is just add another to() tween and just pass an empty target and vars object. And then set its duration to the pause time you want.

// pause timeline for 5 seconds 
t1.to({}, 5, {});

Also see: GreenSock Forum Topic - Inserting a pause delay wait into timeline

Hope this helps! :)

Pause doesn't work in Timeline Lite

2 Answers2