Jump to content
Search Community

setTimeout for TweenMax

kap test
Moderator Tag

Go to solution Solved by Jonathan,

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

  • Solution

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.
TweenLite.killDelayedCallsTo(myFunction);

:

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.
×
×
  • Create New...