Jump to content


How to offset MorphSVG and BezierPlugin on SVG content

Go to solution Solved by GreenSock,

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

If I wanted to offset the position of that arrow to center it on the line... How would I go about doing that? I tried using a transformOrigin, but that makes it look worse.

See the Pen QNOXKr?editors=0010 by pyrografix (@pyrografix) on CodePen

Link to comment
Share on other sites

Hi ElliotGeno  :)


You're close with the transformOrigin. Just don't forget the x/yPercent. Add this line and I think you'll get the results you want.

TweenLite.set(".fly", {xPercent:-50, yPercent:-50, transformOrigin:"center"});

See the Pen XdVWoJ by PointC (@PointC) on CodePen


Hopefully that helps a bit.


  • Like 3
Link to comment
Share on other sites

Thanks guys! I also found this worked where 10 is half the width and height for both transform origin and offsets but I like your solution better!

var path = MorphSVGPlugin.pathDataToBezier(".path",{offsetX:-10,offsetY:-10});
var bee = document.querySelector(".bee");
TweenMax.to(bee, 20, {
	bezier: {
		type: "cubic",
		values: path,
	transformOrigin:"10 10"
  • Like 1
Link to comment
Share on other sites

Actually I spoke too soon... Apparently it only worked for that one example:

As soon as I tried it on a different shape it went crazy again:

See the Pen VayZRw by pyrografix (@pyrografix) on CodePen

Link to comment
Share on other sites

  • Solution

I think you just forgot to align the path data to the element when you did the pathDataToBezier():

MorphSVGPlugin.pathDataToBezier(".path", {align:".bee"});


  • Like 4
Link to comment
Share on other sites

I'll award Jack the point for this one:)


I also found that you had a funky <rect> in there that was messing with the dimensions of the <g class="bee"> and the transformOrigin position


see that this works:




but if you uncomment the <rect> and leave it blue you can see that it was calculating the proper center


<g class="bee">
<!-- bad <rect x="-10" y="-20" width="100" height="140" fill="blue"/> -->
<g fill="#fff" stroke="#000" stroke-width="2" >
In your demo that rect had fill="none"
  • Like 3
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.