Jump to content
GreenSock

SammyC123

Offsetting the center point for an element moving along a bezier

Recommended Posts

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?

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 6
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

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.
×