Jump to content


MorphSVGPlugin - animating along the line causes the object to be animated on the right curve but at the wrong coordinates

Moderator Tag
Go to solution Solved by Carl,

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

I am currently working on a project where an animation along the line is implemented, i.e. a chosen SVG element (in this particular case a <g> ) is moved along a <path>.


Previously, I have implemented this using Snap.SVG and it worked fine, however, having to also do some "morphing" on the elements, I decided to give MorphSVGPlugin a go to save resources.


However, so far it has not been a smooth ride...


Stepping through the code, I observe the following:

1. The object is rendered in a starting position (the correct starting position).

2. The line path is rendered (I used fill="blue" just to demonstrate the position of the line) - the starting point is supposed to be the top "corner", however, it is an invisible "looped" line.

2. The animation kicks in, and the object is instantly positioned somewhere else! This is the actual problem for me right now.

3. The object is animated along a correct curve!


This makes me think that MorphSVGPlugin.pathDataToBezier method is working as intended and provides x-y array of movement points. However, TweenMax.to() method seems to disturb the intended starting point for the animation, I really can't put a finger on it right now.


There is very little control I have over the artwork, which has been designed in AI and exported to SVG format.


Hoping to find the resolution to this problem as soon as possible.

See the Pen ZpYxEY by IGaMbLeRI (@IGaMbLeRI) on CodePen

Link to comment
Share on other sites

Thanks for the demo. Very helpful.

The align property will help you here:

var path = MorphSVGPlugin.pathDataToBezier($("#es-za-invisible > path"), {align:"#orange", offsetX:-60, offsetY:-60});

new demo: http://codepen.io/GreenSock/pen/XjJEzN


docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/

  • Like 3
Link to comment
Share on other sites

Thanks for your quick response! It does fix the #orange, indeed.


I have about 10 objects like that which I need to animate, is there a programmatic way to achieving the result? I mean, what's the reason for needing the offsetX and offsetY, and why "-60" in particular here?


Thanks in advance!

Link to comment
Share on other sites

  • Solution

the negative offsets place the center of the object on the path. remove them and you will see the top-left of the orange follows the path.

might be cleaner for more objects to use negative xPercent and yPercent if you want to center multiple objects like:

TweenLite.set("#orange", {xPercent:-50, yPercent:-50})


  • Like 2
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.