Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Repeating animation with random repeatDelay (Solved)

Go to solution Solved by GreenSock,

Recommended Posts

I have an animation that's using registerEffect, to animate some items, and then another registerEffect to animate the timeScale with some keyframes, so I know I'm diving a bit deep here, but am seeing some weird inconsistencies with durations, as well as it randomly pausing for a moment. The pattern should be default speed, fast, stopped, then back to default, however sometimes the fast speed is on a shorter duration than set, and also sometimes it goes from default speed to paused, back to default.

Also, the repeatDelay is randomized on repeat. I tried to keep this as simple as possible, and hopefully am just missing something simple.


See the Pen rNmWvdJ?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

Link to comment
Share on other sites

1 hour ago, elegantseagulls said:

I tried to keep this as simple as possible


No, you've absolutely confused me. 😉


What's the problem? It's so hard to tell from your demo what you're referring to.


  • Like 1
Link to comment
Share on other sites

Let me see if I can simplify the demo more. 😅

Link to comment
Share on other sites

Ok, @OSUblake, I updated the pen slightly so only the red square's timescale is being tweened.... The issue is that the duration of tweens setup in my keyframes animation don't seem to be consistent (like sometimes the timeScale: 10 doesn't last a full second) and it also seems to randomly pause (or possibly drop to timeScale: 0?)—It should only do this after going to timeScale: 10. I'm noticing this across browsers. ... Does that help?

See the Pen rNmWvdJ by elegantseagulls (@elegantseagulls) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

I suspect the issue is that you're changing the repeatDelay on every repeat. I would definitely NOT do that. 


Remember that changing the repeatDelay doesn't alter that animation's startTime, thus it'll change where the parent timeline's playhead lines up (and of course the parent's playhead controls where that animation's playhead is too). 


Here's an image that shows what happens if after the first repeat you change the repeatDelay (red) to 25% of what it was: 


Notice that as soon as you make that change, the playhead jumps to part-way through the 3rd iteration. Does that explain the behavior you're seeing? 


If your goal is to just fire the same animation over and over, but with a different amount of time inbetween, it'd be better to just use an onComplete and do the repeating manually, like:

gsap.to(... {
  onComplete() {
    gsap.delayedCall(gsap.utils.random(0.5, 5, 0.1), () => this.restart());

There are other ways you could do the repeat as well, of course, but hopefully this gets you moving in the right direction and explains the behavior. 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

@OSUblake -- Turns out I was waaaaay over complicating. Technical-issue Tuesdays, I guess.


This makes perfect sense! Thank you!



  • Like 2
  • Haha 3
Link to comment
Share on other sites

  • elegantseagulls changed the title to Repeating animation with random repeatDelay (Solved)

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.