Jump to content
Search Community

Parameter complementing onStart & onInit: beforeStart?

Sumit test
Moderator Tag

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

Hi there,

 

as far as i know, onInit runs once on initialization of the tween while onStart runs every time the tween starts playing.

Is there a parameter like beforeStart? I basically want my code to run everytime the tween is played, but before the delay.

 

E.g.:


TweenMax.to(el, 2, {
    left: -307,
    delay: 4, 
    onInit: function() {
        // code runs ONCE at 0 seconds
    }, onStart: function() {
        // code runs after 4 seconds delay
    }, onComplete: function() {
        // code runs after 6 seconds delay+duration
    }, beforeStart: function() {
        // code runs EVERY TIME (just like onStart) at 0 seconds
    }
});

Of course if there is no delay, onInit, beforeStart and onStart would run at the same time.

 

Is there a parameter like this allready that i don't find?

 

Thanks in advance for any help.

 

PS.: i can work around this issue by running my code outside of the tween - it's just a preference of order for me 

Link to comment
Share on other sites

Thanks for the question. 

 

A few things:

 

  1. Yes, delay only offsets the start of the tween the first time it plays. The delay or "dead time" is not built into the tween. restarting the tween will make the tween play immediately --- no delay at all. play(0) and restart() will both offer the same result.
  2. There is no longer an onInit callback

If you want to have an animation that maintains some sort of delay or dead time before it starts playing I suggest using a TimelinelineLite. By using the onStart of the timeline, the onStart of of child tweens, and your own custom call() methods I'm confident you can achieve the results you desire.

 

Take a look at this codepen:

http://codepen.io/GreenSock/pen/1bdb9e072ceb37585e652b9ffca38e88

 

It contains a simple timeline with a single tween. The nav buttons allow you to replay the animation including the delay or without. There are callbacks that fire when the play head begins to pass through the "delay" and when the animation actually starts. 

  • Like 2
Link to comment
Share on other sites

Hello.. That looks like a the link to the AS/AS3 GSAP Docs.

 

Here is the link to the JS API Docs:

 

http://api.greensock.com/js/

 

TweenMax - JS

TweenLite - JS

TimelineMax - JS

TimelineLite - JS

 

Unless you meant to post your question in the AS/AS3 Forum:

 

http://forums.greensock.com/forum/3-animation-tweening-as/

 

http://api.greensock.com/as/

 

:)

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