Jump to content
odesey

Repeat events, forward and reverse with delays

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.

 

Thanks.

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks for your quick response and solution, works perfectly!

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.