Jump to content
GreenSock

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

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

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

  • Like 2
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.
×