Using the same GSAP Timeline to control multiple elements

[lukestoked]

I want to have this timeline run and animate in the text coming up but I must be missing something obvious as I want each button to be controlled individually and not loop through all the buttons on screen when I hover on one of them.

 

Some pointers or guidance would be greatly appreciated.

See the Pen BavppeB by luke-stoked (@luke-stoked) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for the demo.

 

It looks like you are only creating 1 timeline with all the animations in it.

 

The approach I recommend is to create a timeline for each element and then that element can play and reverse its animation on enter/leave

 

here is a demo from a lesson in my Free GSAP Beginner's Course

 

See the Pen WNZLoNg by snorkltv (@snorkltv) on CodePen

 

Check out the course as it will get you up to speed with the latest syntax too.

 

TimelineLite still works but isn't recommended.

 

 

[lukestoked]

You're a star! Thanks you for your reply

 

After a revision to bring my code more inline with the demo you sent over I got it up and running.

 

 

 

[Carl]

Great job! Thx for posting the working demo. I'm sure it will inspire others too.