Jump to content
GreenSock

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

View bezier for a motion path

Recommended Posts

I'm plotting a bezier path for a car to drive around using scrollmagic, I'm finding it difficult to visualize the path i need to do for the bezier animation - is there a way to visually show the path during development so i can debug it?

  • Like 1
Link to comment
Share on other sites

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.

×