Jump to content
Search Community

Intersection find class and run observer only for this particular timeline

Juraj test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...