Jump to content
Search Community

'delay' (Not 'repeatDelay') With 'yoyo' Timing Off

icg_cnunez 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



Using delay with yoyo causes a timing issue that is strange to me. In other words, I don't understand why I am experiencing unexpected results.


I will share a JSFIDDLE simplified example that replicates exactly the issue I am experiencing. This is what's happening: I have a delay of 1 and repeatDelay of 1 to continue same delay timing throughout the looping animation. Yoyo is set to true. I would expect there to be a consistent 1 second delay between each tween, but with yoyo in effect, after yoyo returns to the start of the animation, there is a 3 second delay, not a 1 second as repeatDelay defines.








Why is this happening and how can I achieve the desired behavior with timing, where each delay (delay or repeatDelay) results in only 1 second between tweens throughout the entire animation? Any help much appreciated.

Link to comment
Share on other sites

You used a delay of 1 for your tween so there's a 1-second gap between the beginning of the timeline and your tween's start. Visualize the playhead moving from 0 > 1 > tween end, then it goes backwards (since you set yoyo:true) so the playhead goes end > 1 > 0 and then starts again. Plus you have a 1 second repeatDelay. So you've got the initial gap of 1 second plus the 1 second repeatDelay, plus the initial gap again to get back to the beginning of the tween. 


The timeline is doing exactly what it's supposed to. 


To get the effect you want, you can simply remove the delay from your tween, and to get the initial delay from the very beginning, apply the delay to your timeline. In the most recent versions of GSAP, you can also [optionally] omit the css:{} wrapper and you can pass selector text as the target and it'll feed it to jQuery if it's loaded (or use any selector engine you want), just so you know. 



_tl.to($(".square"), 0.5, {
    css: {
        alpha: 0
}, 0);


_tl.to(".square", 0.5, {alpha: 0}, 0);

Does that help?

  • Like 1
Link to comment
Share on other sites

Yes, that is exactly what I needed. Thank you for clarifying how the timing with the delays work repeat and yoyo.  I initially understood a delay to just apply to the start of the animation one time, and not be included in the repeating. But i see that is not the case.  The delay is included in repeats.

Link to comment
Share on other sites

Yes, kinda - a delay isn't factored into the instance's own repeats. So, for example, if you put a delay on the timeline, it would just keep the timeline from beginning for that amount of time, but it wouldn't factor into its repeats. The delay basically affects where the tween/timeline is placed on its parent timeline. 


Same thing applies to TweenMax instances - if you set a delay, that won't apply to its own repeats either. This can be very useful. 

Link to comment
Share on other sites

Okay, I get it now. The delay was included in the repeat in my scenario, because I set the delay on the nested tween, and I had set the repeat on timeline it was nested in. So the timeline was repeating its nested tween, which included the tween's delay.

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