Jump to content
GreenSock

mintervals

Bezier Plugin Question

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

Hi,

 

I was curious if there is a way to render out the bezier path with the plugin? This would be helpful in setting up points.

 

I see you have a path created in the example, but there's no source so I'm not sure how to go about it.

http://www.greensock.com/gsap-js/

 

I think I have a good example, but not quite sure about the 'curviness' settings etc.

 

He's driving a little drunk-

 

Thanks!

 

(This is working in Chrome, I just threw this together out of my main project, so the positioning is funky. You have to scroll down as the taxi animates from the bottom)

 

See the Pen wAbIx by sju (@sju) on CodePen

Link to comment
Share on other sites

Sorry, BezierPlugin doesn't have any code that handles rendering the actual path. In the demo you saw, the path is just  an image. 

 

It is totally possible to use the same points that BezierPlugin uses for drawing the path with a canvas element or maybe even Raphael.js has something that would work. 

 

This is s very basic demo using KineticJS (which is a canvas library) with BezierPlugin that shows how you can move control points on a bezier path to modify an animation:

http://jsfiddle.net/geekambassador/7aQvP/

 

Here is a codepen example that uses BezierPlugin data to postion a series of dots on a Bezier path, just to give you an idea of some other capabilities: 

See the Pen 297827d7dd99d0eb44f96b6b75328338 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Ok cool, good to know-

 

So your process in the example was to lay the "bezier path" image and then overlay the animation on top to make it line up?

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