Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Juraj

Intersection find class and run observer only for this particular timeline

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 post
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 post
Share on other sites

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 ;)

  • Like 1
Link to post
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.

×