Intersection find class and run observer only for this particular timeline

[Juraj 4 Likes (Newbie)]

Hey guys. I am trying to make a morph shape with gsap plugin. The result I want to achieve is:

 

THE GOAL IS:

Find svg's with class "morph" and runs timeline animation only for the one's that is in the viewport.

THE ISSUE I HAVE:
I did some work in the codepen, but the issue is, that every time my window detects the svg class "morph" it start to animate all the shapes/timelines on the website - and not only the ones visible in the viewport.

Any ideas how to adjust my codepen?

Thank you in advance

See the Pen xxGrmmv by jurajmolnar (@jurajmolnar) on CodePen

[ZachSaucier 7,132 Likes (Superhero)]

Hey Juraj. It's invalid to have multiple elements with the same ID. In your case, you have multiple #first, #second, and #third elements. It's not clear what your end goal is.

 

One alternative would be to use classes with a scoped selector instead: 

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

 

Alternatively, if you actually have the same paths in each SVG, you could declare the #second and #third paths only in one SVG and use classes (or unique IDs) for the first path in each SVG and animate to the #second and #third paths (they don't have to be in the same SVG - this way you'd save load time and a little bit of processing).

 

You could also drop IDs and classes entirely and just morph from one path to the next by selecting all the paths in the SVG.

[Juraj 4 Likes (Newbie)]

The plan is to have different shapes for each svg - sorry this codepen html was just copy/paste to just show you the concept. Thank you @ZachSaucier you solved my 1h headache