Creating a repeated loop animation that doesn't directly reverse

[SarahVDB]

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.

See the Pen NWRKmzO by SarahVDB (@SarahVDB) on CodePen

[akapowl]

 

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:

 

See the Pen 3f638dde7e8d8e677cb2dfea5dc0a8f7 by akapowl (@akapowl) on CodePen

[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! 😊

[PointC]

Hi @SarahVDB 

 

Welcome to the forum.

 

Nothing wrong with the timeline - just another approach here. You could put the repeat in the stagger object and then adjust the 'each' amount to your liking. My two cents only. YMMV.

 

See the Pen RwGbzXR by PointC (@PointC) on CodePen

 

Happy tweening.

 

[akapowl]

 

Ah man, that's the second time, you come in with that handy solution, when I suggest a timeline instead @PointC.

 

I've really gotta keep that one in mind - so neat!  

[SarahVDB]

8 hours ago, PointC said:

Hi @SarahVDB 

 

Welcome to the forum.

 

Nothing wrong with the timeline - just another approach here. You could put the repeat in the stagger object and then adjust the 'each' amount to your liking. My two cents only. YMMV.

 

 

 

 

Happy tweening.

 

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! 😊