Jump to content
Search Community

View bezier for a motion path

madebyreformat 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

The BezierPlugin doesn't natively have any functionality for rendering the path.

The best option is probably to draw your path using and SVG, add that SVG to the DOM, use MorphSVGPlugin.pathDataToBezier() to convert the path you drew into a format that can be fed to BezierPlugin

 

https://greensock.com/docs/Plugins/MorphSVGPlugin/static.pathDataToBezier()

 

When you don't want to see the path anymore, just set the SVG's display to none or visibility to hidden.

 

--

 

The other option is to loop through your bezierTween at various progress intervals and attach some DOM node's that look like circles or squares along the path like: 

 

See the Pen WZXZKY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Along those lines, there's an unofficial (and unsupported/undocumented) tool I whipped together that may help and I don't mind if you use it on codepen. It's called PathEditor and it basically makes any SVG <path> editable in the browser, so you could interactively drag stuff around. You'd still need to set up an SVG to fit the area you're building to, and ultimately take that path data and feed it into MorphSVGPlugin.pathDataToBezier() (or build your own parser which wouldn't be terribly difficult since the PathEditor defines everything as cubic bezier data). It's not something I have time to build for you, but again, I don't mind if you use PathEditor, only on codepen (it has some logic in it to check the domain). Here's a quick demo:

 

 

And again, this is unsupported/undocumented, so we're not in a position to troubleshoot things. I just wanted to share it with you [somewhat] privately in case it's helpful in this situation. Use at your own risk ;) The script you'd load into your codepen is https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PathEditor.min.js It may eventually become an official tool, but I'm not sure yet. We'll see what kind of demand there is for it. 

 

Happy tweening!

 

 

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