Animate product info when clicked on more info

[kulderzipke]

Hi,

 

How can I use the same timeline for every element with the same class?
When clicking on item 1, animate info 1
When clicking on item 2, animate info 2
Should the timeline get a reset?

Thanks!

 

See the Pen jObXrYq?editors=1111 by kulderzipke (@kulderzipke) on CodePen

[ZachSaucier]

Hey kulderzipke and welcome to the GreenSock forums!

 

The proper way to do this would be to go through each item and give it its own timeline/animation. Then in the click event for that item you can toggle the play state for the appropriate timeline. Here's how I'd set it up:

See the Pen rNOoLgp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I talk more extensively about this approach and other helpful tips to animate efficiently in my article on the subject.

[kulderzipke]

Thanks for answering!
Makes sense to create a new timeline for each item.
 

The article  explains it well, thanks for that!