Apply Timeline only to selected element, where there are multiple duplicate elements on the same page

[Robhern135]

Hi,

 

I'm trying to have the same timeline apply to multiple elements of the same classes on a page, but only when they're clicked. 

 

In time I'll integrate ScrollMagic and have this happen only when they're in the viewport, but for now I'm just working on when they're clicked for clarity.

 

I've got this far so far as in the Codepen () but there's some strange things going on, any help would be much appreciated.

 

I've condensed my example down somewhere in the timeline changes for simplicity, hope that helps.

See the Pen WNegMMJ by Robhern135 (@Robhern135) on CodePen

[Shaun Gorneau]

Hi @Robhern135

 

To have a timeline only affect the clicked element, that timeline needs to have only that element as a selector within it. If you move the timelines and the click event to within the scope of .each(), you should get what you're looking for.

 

See the Pen NWKLyQO?editors=0010 by sgorneau (@sgorneau) on CodePen

[Robhern135]

Fantastic! Thanks so much @Shaun Gorneau! New to the forum here, am I okay to post further in this thread if I find issues with my further development, or should I start a new thread?

 

Thanks!

[Shaun Gorneau]

You're welcome!

 

As for ongoing questions ... if they're pretty much related to the title of this post, then following up here is just fine.  

 

If it's a new topic altogether, it would be best to create new post with a title relevant to the question at hand. That keeps threads shorter and entirely relevant.

 

That said, feel free to ask as many questions as you like! Someone is sure to jump in and offer help or advice. As far as ScrollMagic .. you may get some pointers, but that is not a GSAP product, so you may not get an answer specific to your issue (if you have one).

 

Happy tweening!

[Robhern135]

Thanks for your great help so far, I've made great strides today!

 

I understand that ScrollMagic isn't a GSAP product, but I figured asking on here would be a great bet as the products are used so closely together so commonly.

 

I'm looking to achieve the same as above, the elements timelines triggering separately from the same TL, but instead of on click now using Scrollmagic trigger points and scenes.

 

I've got this far 

See the Pen wvwEXbX by Robhern135 (@Robhern135) on CodePen

 but it looks like I've not understood the foreach-ness of the scenes/controllers as the indicators are all stacked on top of each other and triggering all at once.

 

Thanks! 

[PointC]

You can check out my article about using GSAP and ScrollMagic together. It may be helpful.

Happy tweening.