Jump to content

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

Pause between tween 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 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.




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}));
Link to comment
Share on other sites

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! :)




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


Thx Jamie :D

  • Like 1
Link to comment
Share on other sites

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" );
  • 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.