Jump to content
Search Community

How to offset MorphSVG and BezierPlugin on SVG content

ElliotGeno test
Moderator Tag

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

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"
});
  • Like 1
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:

 

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"
  • 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.
×
×
  • Create New...