SarahVDB
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by SarahVDB
-
-
2 minutes ago, akapowl said:
Hey @SarahVDB - welcome to the forums.
You could use a timeline for that - with one staggered tween that moves the circles down, and another one moving them back up again - and the timeline itself repeating infinitely. Note, that I set the initial position of the circles in your CSS via transform in the demo below.
Is this what you had in mind:
Yes this is what I had in mind! Haven't used timeline before so didn't think of that, thank you for your help! 😊
- 2
-
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.
Creating a repeated loop animation that doesn't directly reverse
in GSAP
Posted
Ah this looks great as well! I'm not familiar with all the GSAP terms yet, so always open for another approach to learn from. Thank you! 😊