LATEST AWESOMNESS

Animating Along a Path - Smoothly!

I’ve written about Animatron’s Snap to Path feature before - it’s really a super convenient and simple way to move an object from point A to point B - and now I’d like to go into a little more detail about the Orient to Path option and how a line’s smoothness level affects the animation.

Here’s the goal - we want to have the starfish dance along a path across the canvas. We also want the starfish’s movement to be oriented to the path - meaning that the starfish will rotate during its journey, based on where along the path it is and where the registration point is set. In this case, we want the starfish to rotate from the center, so we’ll leave the registration point set there.

Here’s what the path will look like once we’re finished (though actually, when the animation plays, it will be invisible):



So, first begin by drawing a path with the Pencil tool:



Which looks cool, but when you select it with the Direct Selection tool, you can see that there are tons and tons of nodes on the line …



And when you zoom in, you can see that the line is actually pretty jagged up close. In fact, it’s not a smooth line at all!



In many cases, this doesn’t matter, but in the specific case of Snap to Path and Orient to Path … well, let’s see what happens. Select the path, right / control click to bring up the context menu, and select “Cut” …



And then select the starfish and select “Snap to Path.”



Ok, here’s what it looks like - note that “Orient to Path” is checked in the Inspector Panel.



And, here’s how it plays:



Yuck! The reason this happens is because Animatron is trying its absolute hardest to orient the starfish’s movement to all those little nooks and crannies along the path - which sounds nice, but results in a jerky movement.

Here’s how to fix this! Set the smoothness to a higher number, like 7. You can see that there are way fewer nodes now, and that the line looks smoother.



And when you zoom in, you can see that the line is way smoother.



Now that the line’s all smooth, repeat the Snap to Path process that you did above. Here’s the result!



Here’s the project in the Editor - feel free to duplicate it into your account and play with it!

Catherine Arizan

Marketing Manager