Jump to content
Search Community

Updating SVG Path Positions Via Wiggles... Again

SammyC123 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

A few weeks ago, Blake graciously instructed me in the use of .getItem() and it helped me make significant progress, but I was forced to abandon that structure of SVG in favor of something more controlled.

 

I'm closer to being where I want, but it's becoming clear that I'm failing to understand precisely how to update the path locations as the timeline is running. Line 214:

onUpdate: updatePath,

is simply not doing the trick like I thought it would. What am I missing? I think I need to feed the coordinates of the circles ('handles') to update the paths, but I'm not sure how to get that data in or out.

 

As a secondary issue, all the circles are 'floating' in the exact same direction at the same time. I want them to be diverse, but I think it's happening because I initiated all of them simultaneously by defining the 'handle' var as all 'circle' elements (Line 187).

 

Been scratching my head for a full day on this one. I feel like it should be a relatively easy fix, but I'm just not seeing it. Thanks for any potential assistance.

 

See the Pen PeXgRr by anon (@anon) on CodePen

Link to comment
Share on other sites

That's because you're using point objects to draw the paths, but you're animating actual elements. You're not reconciling the two sets of values. In other words, when the first element moves (by animation), you're not updating the corresponding point's x/y values. You could probably just use the element's _gsTransform object directly instead:

 

See the Pen 98008c198b25e8859fcce7f8ea87e7f2 by GreenSock (@GreenSock) on CodePen

 

It's probably best to have a single "source of truth" for the data rather than splitting it apart as point objects and elements.

 

I hope that helps. 

 

 

  • Like 4
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...