Jump to content


Repeat events, forward and reverse with delays

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 am new to GSAP and I am trying to figure out what is the best way to fire a callback function at the beginning and end or a repeating animation.


Here is the code i've tried so far:


  var tl = new TimelineMax({ delay: 3.0, repeat: -1, repeatDelay: 3.0, yoyo: true, onRepeat: function () {
    console.log("on repeat, called with delay...bad")
   onReverseComplete: function () {
    console.log("reverse complete, never called bacause of repeat forever")
  } })


A few things to keep in mind:


I would like the callback function to execute BEFORE the delay on the animation start (playing forward) and on the reverse (playing reverse).


So the timeline should execute like this:


Start -> callback -> delay -> play animation -> animation end - > callback -> delay -> reverse animation -> reverse end -> callback -> delay (repeat forever)


(Start and callback can be swapped, as long as the callback happens before the delay)


Any help would be greatly appreciated.





Link to comment
Share on other sites

I think it'll be easier to get the desired behavior by adding a call() to the beginning and end of the timeline rather than use onRepeat. Those will then fire before the repeatDelay.


The one thing that won't give you is the initial delay. You don't want to use a delay at the beginning of the timeline since you want that callback to fire immediately and then wait for the duration of the desired delay. I just added a quick check to see if it's the first play and pause the timeline if true. Maybe something like this:


See the Pen OGNWYp by PointC (@PointC) on CodePen


Someone else may have something more clever, but this was my first thought. Hopefully it helps. Happy tweening.

  • Like 2
Link to comment
Share on other sites

Thanks for your quick response and solution, works perfectly!



Link to comment
Share on other sites

Nice work, @PointC! Clever.


One other alternative to the conditional logic you used for the initial delay is to jump right over the first whole iteration using totalTime(). Here's a fork: 

See the Pen e95bed928d4410c807ae833d4a87f916?editors=0010 by GreenSock (@GreenSock) on CodePen


The pertinent code is: 

//skip the first 2 iterations (forward then yoyo phase, with repeatDelay inbetween) 
var jumpTime = tl.duration() * 2 + delay;

//put the playhead right before the spot while suppressing event callbacks so we don't trigger any, and then jump to the spot without suppressing event callbacks so the "start" is fired right away.
tl.totalTime(jumpTime - 0.001, true).totalTime(jumpTime);


It's not necessarily "better" - it's just a slightly different approach. 

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