Share Posted March 21, 2016 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 More sharing options...
Share Posted March 21, 2016 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted March 21, 2016 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. 2 Link to comment Share on other sites More sharing options...
Share Posted March 22, 2016 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. 1 Link to comment Share on other sites More sharing options...
Share Posted March 22, 2016 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 6 Link to comment Share on other sites More sharing options...
Share Posted March 22, 2016 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 23, 2016 Oh my gosh... offsetX/Y! Even simpler now. Thanks, Diaco! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now