DrawScript To GSAP Bezier Converter

DrawScript To GSAP Converter

Quite often I want to animate something along a curve or path and I always turn to GSAP (Greensock Animation Platform) – specifically the BezierPlugin which allows you animate along a custom path. The problem with that is that it can take quite a long time of trial and error to get the curve/path just right because you have to code it with no visual feedback other than:

Add in X and Y position – test in browser

Add X and Y position – test in browser

Add X and Y pos…. you get the drift.

If you have Illustrator CC you can use a free utility by Tom Krcha called DrawScript which is an extension for Illustrator CC (a slightly older version is better – the latest 2014 version doesn’t appear to support it yet).

Here’s how it works:

  1. Download and install DrawScript.
  2. Open Illustrator CC, create a new document and draw your path with the pen tool.
  3. Select the path, open the DrawScript panel, select Anchor Points Array and generate it.
  4. Now copy the string of numbers and paste it into DrawScript to GSAP converter.
  5. It will generate GSAP/TweenMax code that you can paste into your project.

You will end up with something like this:

TweenMax.to(YOUR_ELEMENT, 5, {bezier:{curviness:2, type:"thru", values:[{x:257, y:50},{x:404, y:292},{x:187, y:397},{x:93, y:242},{x:232, y:175},{x:292, y:274},{x:203, y:317},{x:164, y:253},{x:221, y:226},{x:246, y:266},{x:210, y:284},{x:194, y:258},{x:217, y:247},{x:227, y:263},{x:212, y:271},{x:206, y:260},{x:215, y:255},{x:219, y:262},{x:213, y:265},{x:211, y:261},{x:215, y:259},{x:216, y:262},{x:214, y:263},{x:213, y:261},{x:214, y:260},{x:215, y:261},{x:214, y:262}]}, ease:Linear.easeNone});

Now just change the YOUR_ELEMENT to your actual element reference (like document.getElementById('ball')) and give it a whirl. And don’t forget DrawScript, TweenMax and the Bezier Plugin are all FREE!

Whilst this is pretty basic right now it does take some of the pain out of creating custom Bezier paths for animation and gives you more control over your animated projects.

Check out DrawScript To GSAP Converter

3 thoughts on “DrawScript To GSAP Bezier Converter

  1. Heh, I was just thinking of this yesterday and how much of a pain Bezier Plugin is. Going through your site and SVG stuff, then stumbled across this. Bingo. Problem solved. Thank you very much 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s