Jump to content

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

setTimeout for TweenMax

Recommended Posts

Is there a way to delay the start of a TweenMax, similar to a setTimeout ?



      setTimeout( function () {

TweenMax.staggerFromTo( $box, 0.3, { y: 0}, { y: -100}, 0.10);
}, 400 );

See the Pen EaRPOo by anon (@anon) on CodePen

Link to comment
Share on other sites

Hello kap, and Welcome to the GreenSock Forum!


Here are GSAP methods that is equivalent and better than setTimeout():


delayedCall() : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/delayedCall/

  • Provides a simple way to call a function after a set amount of time (or frames).
//calls myFunction after 1 second and passes 2 parameters: 
TweenLite.delayedCall(1, myFunction, ["param1", 2]); 

function myFunction(param1, param2) { 
    //do stuff


killDelayedCallsTo() : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/killDelayedCallsTo/

  • Immediately kills all of the delayedCalls to a particular function.


Your code could look like the following:

TweenLite.delayedCall(0.4, myFunction);

function myFunction() {
     TweenMax.staggerFromTo( $box, 0.3, { y: 0}, { y: -100}, 0.10);


I forked your codepen example from above.. your codepen example could look like this:


See the Pen XJYXOe by jonathan (@jonathan) on CodePen


TweenLite.delayedCall(0.6, myFunction);

function myFunction() {
     TweenMax.staggerFromTo(".box", 1, {
            opacity: 0.6,
          	   y: -20
        }, {
            opacity: 0.2,
          y: 0
        }, 0.2);


I hope this helps :)

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