Pause between tween in timeline

[thethethe]

Hello,

 

I need a short pause between to tweens in my timeline. I've added a "+=0.75" like explained in the docs, but this doesnt work. Any hint for me.

 

Best

P.

tl.add( TweenLite.to("typo1", 1, {opacity:1}), 0.5 );
    tl.add( TweenLite.to("typo1", 2, {opacity:0}) );
    tl.add([TweenLite.to("top", 0.5, {opacity:1}), TweenLite.to("bottom", 0.5, {opacity:1})]);
    tl.add([TweenLite.to("mask", 1, {left:1000}), TweenLite.to("bg", 1, {opacity:0})] );
    tl.add([TweenLite.to("top", 1, {top:-100}), TweenLite.to("bottom", 1, {bottom:-60}), TweenLite.to("eyes", 1, {opacity:1})]);
    tl.add( TweenLite.to("logo-small-grey", 2, {opacity:1}), 6 );
    tl.add([TweenLite.to("eyes", 1, {opacity:0}),TweenLite.to("typo2", 1, {opacity:1})]);
    tl.add( TweenLite.to("product", 1, {opacity:1}));
    tl.add( TweenLite.to("stoerer", 1, {left:560},"+=2"));
    tl.add( TweenLite.to("stoerer", 2, {opacity:0}, "+=2.5"));
    tl.add( TweenLite.to("product", 1, {opacity:0}));
    tl.add( TweenLite.to("typo2", 1, {opacity:0}));
    tl.add( TweenLite.to("date", 1, {opacity:1}));

[Jonathan]

Hello and Welcome to the GreenSock Forums.

• I presume you are trying to pause the timeline for a brief time and then resume?

if so you can try this:

tl.add( TweenLite.to("typo1", 2, {}) );

this would add a 2 second pause.. basically its a regular tween except you are passing an empty object. Notice the empty squiggly brackets {} of the vars:Object.

• If you are looking to just pause the timeline?

Then you can try using the addPause() method, but that will add only a pause, and not resume after specific time.

 

I hope this helps!

 

UPDATE:

 

Just as Jamie advised below, you can leave the target as a empty object {}

 

Thx Jamie

[jamiejefferson]

It looks like it's just a syntax error (the offset is a parameter for tl.add, not Tweenlite.to) :

// good
tl.add( TweenLite.to("stoerer", 2, {opacity:0}), "+=2.5");

// bad
tl.add( TweenLite.to("stoerer", 2, {opacity:0}, "+=2.5"));

Also, TimelineLite has some convenience methods to make that code a little more succint e.g.

tl.to( "typo1", 1, {opacity:1}, 0.5 );
tl.to( "typo1", 2, {opacity:0} );
tl.add( [ TweenLite.to("top", 0.5, {opacity:1}), TweenLite.to("bottom", 0.5, {opacity:1}) ] );
tl.add( [ TweenLite.to("mask", 1, {left:1000}), TweenLite.to("bg", 1, {opacity:0}) ] );
tl.add( [ TweenLite.to("top", 1, {top:-100}), TweenLite.to("bottom", 1, {bottom:-60}), TweenLite.to("eyes", 1, {opacity:1}) ] );
tl.to( "logo-small-grey", 2, {opacity:1}, 6 );
tl.add( [ TweenLite.to("eyes", 1, {opacity:0}), TweenLite.to("typo2", 1, {opacity:1}) ] );
tl.to( "product", 1, {opacity:1} );
tl.to( "stoerer", 1, {left:560}, "+=2" );
tl.to( "stoerer", 2, {opacity:0}, "+=2.5" );
tl.to( "product", 1, {opacity:0} );
tl.to( "typo2", 1, {opacity:0} );
tl.to( "date", 1, {opacity:1} );

(an empty tween doesn't really need a selector either, it can be an empty object e.g.

tl.add( TweenLite.set({}, {}), "+=2" );