Jump to content


SVG Path Animation or help convert Path to Bezier.

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


is there any way to animate along SVG paths already? If not, can you recommend any tool that helps me get the bezier data from SVG, illustrator (or other) paths, so I can use them with GSAP?

Thanks in advance

Link to comment
Share on other sites

There is nothing in the platform currently that supports parsing data directly from an SVG.


A tool that has caught my interest is an Adobe Illustrator extension called DrawScript.


What it does is provide a variety of output formats for Bezier curves from AI.


Below is a screenshot showing the curve as JSON data:

Screen Shot 2013-08-08 at 10.55.32 AM.png


The "JavaScript Canvas" output looks like this:


I haven't tried using this data myself yet, but my guess is that it would be entirely possible to parse that data to feed into a canvas drawing API and also pass it to a Bezier tween.






  • Like 3
Link to comment
Share on other sites

Hi again,

I tried it out, I even got close, but I cant quite find the right way. (JS is mostly for string conversion). I tried "quadratic", as this seemed to be the right one for the export values from drawscript, but with "soft" I came closest. Any help?

<DOCTYPE html>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
	<script src="pathAni.js"></script>
	<!--<script src="bezierStringProcessor.js"></script>-->


<body style="margin:0px">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M10,10c30.968,30.323,59.354,120,121.29,73.548

<div id="main" style="float:left; position:relative; width:20px; height:20px; background-color:red;"></div>

var e;
var animate;

var bezierString        = "bezierCurveTo(60,30,89,120,151,73);bezierCurveTo(213,27,257,53,268,91);bezierCurveTo(280,129,393,86,420,83);bezierCurveTo(447,80,568,132,490,186);bezierCurveTo(413,240,236,320,217,251);bezierCurveTo(199,183,219,136,148,167);bezierCurveTo(76,197,100,382,43,278);";
var mainSubstring       = bezierString.split("bezierCurveTo");
var pointAmount 	= mainSubstring.length-1;
var valueSubstring      = [];
var valueSetArray       = [];
var finalTweenMaxObject = [];

for(var i = 0; i < mainSubstring.length; i++){	
	valueSubstring[i] = ( mainSubstring[i].split( "(" ))[1];

for(var j = 1; j < valueSubstring.length; j++){
	valueSetArray[j-1] = valueSubstring[j].substring( 0, valueSubstring[j].indexOf( ")" ));

for(var k = 0; k < pointAmount; k++){
	finalTweenMaxObject.push({ x: parseInt( valueSetArray[k].split(",")[0] ), y: parseInt( valueSetArray[k].split(",")[1] ) });	
	finalTweenMaxObject.push({ x: parseInt( valueSetArray[k].split(",")[2] ), y: parseInt( valueSetArray[k].split(",")[3] ) });
	finalTweenMaxObject.push({ x: parseInt( valueSetArray[k].split(",")[4] ), y: parseInt( valueSetArray[k].split(",")[5] ) });


window.onload = function(){
	e = document.getElementById("main");	
	window.animate = function(){
		TweenMax.to(window.e, 10, {bezier:{type:"soft", values:finalTweenMaxObject, autoRotate:true}, repeat:-1, ease:Power1.easeInOut});


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.