Flicker on updating duration on repeating animation

[donny]

Hi all, 

 

The animation flickers when updating the duration onRepeat. What am I missing here? 

See the Pen XWXrPyr by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

[GreenSock]

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: 

floating.duration(3).time(0);

Does that help? 

[donny]

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? 

[GreenSock]

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
  });
}
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? 

[donny]

Fantastic, thanks Jack. Yes that clears things up rather nicely