Jump to content


BezierPlugin - Generate points based on graphic

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

How can I generate complex bezier curve points that follow a graphical path?  I have tested the BezierPlugin demo SWF and it will work great for my project but I'm stuck calculating the points that match the image provided by the designer.  I need to animate a div with an image background that tracks the graphical path.  Will Photoshop, Illustrator, or Flash calculate the points from a graphic that can be used?  Is there are third party tool?


Attached is a graphical example for reference.


Thanks in advance for your help.


Link to comment
Share on other sites

Hello and welcome to the GreenSock Forum!


You can open your image in Illustrator and then use the pen tool to create your path or trace over your image. Then export out as a SVG.


Examples of BezierPlugin usage:


See the Pen zLiux by GreenSock (@GreenSock) on CodePen

See the Pen LuIJj by GreenSock (@GreenSock) on CodePen

See the Pen HmGuE by jonathan (@jonathan) on CodePen

See the Pen cqvJe by jonathan (@jonathan) on CodePen

See the Pen axzBs by jamiejefferson (@jamiejefferson) on CodePen


BezierPlugin Docs: http://greensock.com/docs/#/HTML5/Plugins/BezierPlugin/


Forum Topic with more info and examples:





I hope this helps! :)

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.