Moving Multiple Elements Repeatedly

[SAVIAN]

Hello,

 

I'm new to GSAP and also as a note, JS isn't my forte either. I've just started using GSAP recently and I'm trying to figure out how to get the top element to the very bottom and move the other two elements above a bit, and then repeat this animation whenever the top element is clicked. You can see my attempt in Codepen. 

 

I've tried looking at other Codepens from here: https://greensock.com/forums/topic/15460-timeline-click-to-trigger-animation/ and attempted to integrate it, but I haven't been able to figure it out..

 

Thank you for the help!

See the Pen vVwLgb?editors=1010 by csc94 (@csc94) on CodePen

[Sahil]

I re-wrote the demo. I would say avoid assigning class to keep track of active elements, it gets messy and confusing real quick.

 

See the Pen pxmrpR?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Sahil]

@Devon Bortscher I should have pointed out some problems with your demo before re-writing it.

 

1. As you already might know, you can use stagger tweens to add uniform delay when animating multiple elements.

2. You are using infinite: true, in GSAP if you want animation to repeat infinitely then you need to set repeat property to -1. But also for what you were doing you didn't need to set any repeat values.

 

I decided to make a video tutorial explaining how my demo works. It seems like you have already figured, but in case you want to know more you can watch the following video.

 

 

 

[GreenSock]

Nice work on the video, @Sahil!