Hi there, and first off thanks so much for all the support and work on GSAP, it is amazing!
We're working on a project where we'd like to have several (like 5-6) dots looking like they are floating a bit. GSAP makes this very easy and we created a simple looping animation that works well on a single element floating around like this:
const float = {
x: 'random(-20, 20, 5)',
y: 'random(-20, 10, 3)',
duration: 'random(1, 4, 2)',
ease: 'sine.inOut',
repeat: -1,
repeatRefresh: true,
}
const floatingThing = gsap.to('.floatMe', float)
The motion is just what we want... randomized within a range and nicely spaced out. Looks great!
The problem is, when we try to simply apply this effect to multiple elements (like more than 2 or 3), it starts to wig out on us intermittently. Sometimes everything floats, sometimes a couple dots don't tween at all, and other times we get a dot that jumps instead of tweens. I attached a minimal demo, you may need to reload it a couple times but you should see it. I've also attached a short screen capture of the problem (check the dot all the way to the left and you'll see it jump instead of tween). Is there something I'm missing here about repeats or random animations? I've tried lots of variations, including applying separate tweens to each element, using a setTimeout to start the animations at different times... all to no avail. Is this a bug with GSAP or is my approach wrong?
Any help appreciated! I could try and hand roll this but we're using GSAP heavily in this project and it's tantalizingly close! Thanks again. -Matt
Screencap:
floatingBugGsap.mp4