Hi! I'm rather new to GSAP, I'm trying to create a little loading animations with three circles. I want the dots to go up and down, but not at the same time, so I used stagger effect. As the circles ned to go up and down I also used yoyo, as well a repeater so the loading animations loops infinitely, however it doesn't seem quite what I thought it would be.
Basically the circles go down from left to right, and then I want it to go back up from left to right. However when the circles go back up, it goes up from right to left instead, basically reversing the animation. But I don't want it completely reversed like that, I just want them to go back to their original position (animated) and repeat. Any idea how to change this?
This is the code I used:
gsap.fromTo( "circle", 1.5,
{ y: -30 },
{ y: 0, yoyo: true, repeat: -1, stagger: 0.3 }
);
I also put the it on Codepen, in order to see what I mean.