Offsetting the center point for an element moving along a bezier

[SammyC123 16 Likes (Newbie)]

I don't believe a Codepen is necessary for this question, although I can build one if someone needs to see precisely what I'm talking about.

 

If you have a very long (width-wise) element you want to animate along a bezier curve, and you're using autoRotate, it automatically calculates the center of that element and rotates it around that point.  How can I offset that center point, say, 50px to the right?

[OSUblake 9,990 Likes (Superhero)]

A CodePen might help if this doesn't. I had a similar issue, and trying to offset the element itself made it worse going around a loop. My solution was to nest the element inside a another element and offset it from there.

See the Pen OyBGyV by osublake (@osublake) on CodePen

[SammyC123 16 Likes (Newbie)]

Perfect, as usual -- exactly the solution I was needing.  I'm actually proud of myself because I was headed in that direction already, but you just saved me so much experimentation time!  Thank you once again, Blake.

[OSUblake 9,990 Likes (Superhero)]

You should be proud. That CodePen may look super simple, but it actually took me a while to figure out how to make him stay inside the loop. Definitely one of the more challenging things I've come across.

[Diaco 1,948 Likes (Superhero)]

Hi Guys

 

if you are using MorphSVGPlugin , actually you don't need to nest in another element , you can use simply .pathDataToBezier() Vars offsetX/offsetY ;

 

pls check the Doc : http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/pathDataToBezier/

 

and pls check this demo too : 

See the Pen PNpLWM by MAW (@MAW) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Nice one Diaco!

 

That feature was added after I made that pen, but nice to know it has the same effect. The hardest thing for me was dialing in the correct transform origin and offsets. But even if you not using the MorphSVGPlugin, you can still do that. Just loop through your array of Bezier values add the offset to each point.

See the Pen WwpmKo?editors=0010 by osublake (@osublake) on CodePen

[SammyC123 16 Likes (Newbie)]

Oh my gosh... offsetX/Y!  Even simpler now.  Thanks, Diaco!