How to offset MorphSVG and BezierPlugin on SVG content

[ElliotGeno 27 Likes (Newbie)]

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

[Diaco 1,948 Likes (Superhero)]

Hi ElliotGeno 

 

pls check this topic : http://greensock.com/forums/topic/14003-offsetting-the-center-point-for-an-element-moving-along-a-bezier/

[PointC 8,599 Likes (Superhero)]

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.

[ElliotGeno 27 Likes (Newbie)]

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, {
	force3D:true,
	bezier: {
		type: "cubic",
		values: path,
		autoRotate:true
	},
	ease:Linear.easeNone,
	repeat:-1,
	transformOrigin:"10 10"
});

[ElliotGeno 27 Likes (Newbie)]

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

[GreenSock 8,117 Likes (Superhero)]

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

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

http://codepen.io/anon/pen/aNEvZg

[Carl 9,066 Likes (Superhero)]

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:

 

http://codepen.io/GreenSock/pen/BKJopw

 

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" >

 

  ...

 

</g>

 

In your demo that rect had fill="none"