[Repeat events, forward and reverse with delays]

Thanks for your quick response and solution, works perfectly!

 

 

[Repeat events, forward and reverse with delays]

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.

 

Thanks.