Jump to content
Search Community

Issue with drawing and following a path (syncing the two together using MorphSVGPlugin and DrawSVGPlugin)

majorkusanagi 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

I'm trying to make an element appear as if it's drawing a path as you scroll down the page.

 

I have it mostly working fine, but the the object doing the following slowly drafts away from the intended path the further into the animation it gets. Unsure why this is. There's an additional problem where it completely misses the path data for the last "hump" too, you'll see what I mean towards the very end of the line (maybe this is related?)

 

To draw the path I'm revealing the line by animating a duplicate path with a white stroke above it. The pathDataToBezier function is fed the original path data though.

 

Open to alternative ways of doing it if I can't find a solution.

 

You may have to maximise the preview window to see it draw properly.

 

Thank you

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

Link to comment
Share on other sites

How are you generating your SVGs? The viewBox is messing with the dimensions, so your spot and path aren't proportional.

See the Pen qNyrRb?editors=0010 by osublake (@osublake) on CodePen

 

Just default Illustrator SVG export with styles inlined.

 

Maybe I'll try exporting the spot and line as part of the same SVG so the viewbox will effect both the same.

 

Appreciate a point in the right direction. Thanks for the example too.

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...