Jump to content
Search Community

Flicker on updating duration on repeating animation

donny test
Moderator Tag

Recommended Posts

Ah, thanks for pointing that out. It's a very uncommon thing to change the duration on-the-fly like that, but I've made an update in the next release that'll cause that to be smooth (well, unless the parent timeline has smoothChildTiming: false). You can preview that at https://assets.codepen.io/16327/gsap-latest-beta.min.js


Altering the duration would of course change where the parent timeline's playhead lines up on the animation, thus the startTime must be adjusted in order for that to be smooth. 


In the mean time, you can easily fix it in your demo by forcing the playhead back to 0 like this in your onRepeat: 


Does that help? 

  • Like 1
Link to comment
Share on other sites

Thanks very much Jack, both the beta and .time(0) resolves the issue. At least in Google Chrome, I first viewed in Brave and the issue seems to persist.. 


I'm wondering if there's a different approach to what I'm aiming to achieve as you mentioned it's very uncommon. As well as applying random x and y, I also wish to apply a random duration on each repeat. Is there another approach to changing in onRepeat? As I would have thought updating the duration if an animation is repeating wouldn't have been too unusual? 

Link to comment
Share on other sites

Wait...I'm confused, @donny - are you saying that the beta does NOT work properly for you in Brave? If so, I suspect it's just a caching issue on your end. 


As for the best way to do this, I'd probably do something like:

const box = document.getElementById('box');
function float() {
  gsap.to(box, {
    x: gsap.getProperty(box, "left") + gsap.utils.random(-60, 60),
    y: gsap.getProperty(box, "top") + gsap.utils.random(-60, 60),
    ease: "power1.inOut",
    duration: gsap.utils.random(1, 3), 
    onComplete: float

It's just a function that gets called again in the onComplete, so it infinitely loops like that. 


Also, in your demo you were doing:

// BAD:
x: 'random(' + (box.style.left - 60) + ', + ' + (box.style.left + 60) +')'

Luckily in your demo box.style.left (and top) was "" so it worked, but normally that inline style would have some kind of unit, so your math would fail because it's trying to do something like "20px" - 60 which would be NaN. See what I mean? So in my demo, I'm tapping into GSAP's built-in method to grab the numeric value. 


Does that clear things up? 

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