Jump to content


Parameter complementing onStart & onInit: beforeStart?

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.



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

After thinking more about it:


in case the delay isn't applied when the tween is just replayed via play(), i guess beforeStart would be pointless and onInit does what i want.

I'm not quite sure

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:



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

Yeah, that's the wrong link to older ActionScript v11 docs. Easy mistake to make.


The latest docs are accessible through the links in the navigation on the left.

Here are the latest JS v12 docs: http://api.greensock.com/js/

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




TweenMax - JS

TweenLite - JS

TimelineMax - JS

TimelineLite - JS


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







  • Like 1
Link to comment
Share on other sites

Yup got it, thanks. In my defence: On the AS v11 docs, "Actionscript" isn't mentoined once in there :-P so I couldn't tell as i got a direct link from Google.

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.