Convert CSS animation to GSAP

[codru]

First try at GSAP.  Trying to convert this CSS animation to GSAP and not sure on the best method. Will appreciate some help/direction.

 

Css (as guide):

See the Pen VwVyojd by tekdru (@tekdru) on CodePen

 

GSAP progress so far:

 

See the Pen ZEmvgBB by tekdru (@tekdru) on CodePen

[mvaneijgen]

Hi @codru welcome to the forum!

 

I've tweaked your pen a bit how I would build the animation. The yoyo: true could work, but I frist like to have a working animation before I optimise the code, because what is there to optimise if there isn't working code?

 

I have four tweens for each button. First two tweens press the button and the second two release it.

 

What I could think of now, is that you build a function that creates an animation based on the button class you want to click and then you add the functions to a master timeline in the order that you want. 

 

Check out these awesome resources showing how what possibilities there are with GSAP . Hope it helps and happy tweening! 

 

See the Pen xxQYGLB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

Edit: Couldn't stop thinking about it 😅 

Quote

What I could think of now, is that you build a function that creates an animation based on the button class you want to click and then you add the functions to a master timeline in the order that you want. 

See the Pen eYQVNrP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[codru]

Thanks @mvaneijgen!   Greatly appreciated. The function is a great solution. Glad you could stop thinking about it 😀.  I will go over the getting started videos to get more familiar with it.

 

Thanks again!

[Carl]

Great job, @mvaneijgen Very nice application of the "functions that return animations" concept!