Jump to content
Search Community

Orientate along bezier path

joe_midi test
Moderator Tag

Go to solution Solved by Dipscom,

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

  • Solution

Hey Joe!

 

Man, that was rather intriguing. The answer is yes, you can. The alignment of the arrow, is handled by the Bezier plugin. So, you just need to enable the 'auto-rotate'.

 

The catch is, as in all SVG related rotation: where is the origin of the element in the coordinate system. It took me a while to work out the order in which things needed to be done. But check out the fork I made of your example:

 

See the Pen GZPoYz by dipscom (@dipscom) on CodePen

 

The main thing to take away here is all transforms will be done from the top left of the element.

 

 

I am not very experienced with the MorphSVG plugin myself so, I can't explain too well why your initial setup wasn't working. But, there were some things not quite right and was messing around the calculations. 

 

In order to make sense to me, I ended up simplifying the path data you had in the arrow. Also, watching the video Carl made, helped me understand the behaviour of the plugin and troubleshoot my mistakes. The video is in the docs.

 

http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/pathDataToBezier/

 

Thanks for the question, helps me learn stuff I otherwise wouldn't have the focus to.

  • Like 3
Link to comment
Share on other sites

Dipscom!

 

Thanks dude, clearly looking in the wrong place.

 

I assumed it was a MorphSVG.pathDataToBezier argument, but obviously its actually apart of the Bezier plugin stuff.

 

Attached CodePen, I needed it to go clockwise, instead of counter-clockwise so I just reversed the animation.

 

 

Link to comment
Share on other sites

Nice one Jack, that looks great, those small differences between your version and mine, seem to make it perform a lot better.

 

I had tried to create a reversed path in Illustrator, but the output was always the same, and I couldn't figure out how to change the order of the path data.

  • Like 1
Link to comment
Share on other sites

If you do happen to want to reverse paths in Illustrator here's a quick tip:

  • Open path: select the pen tool and click on the first point of your path and it will reverse the points.
  • Closed path: right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons.
(Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All')
 
:)
  • Like 2
Link to comment
Share on other sites

I'm finding easier to write the path data myself when it comes to simple paths and shapes.

 

Hence why I simplified the original arrow. It makes it easier for me to visualise in my head what is going on. I was going to do the same thing with the rectangle but figured it would not be helpful as it was not what was causing it to go wrong.

  • Like 1
Link to comment
Share on other sites

 

If you do happen to want to reverse paths in Illustrator here's a quick tip:

  • Open path: select the pen tool and click on the first point of your path and it will reverse the points.
  • Closed path: right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons.
(Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All')
 
:)

 

 

Hmm, that was exactly what I tried at first and it didn't seem to work, I'll try again and see what happens.

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