Ok, so this tutorial is on the easiest way to create a motion path.
Typically in UX, you aren’t dealing with a lot of motion paths unless you’re creating motion for material design projects, radial progress bars, or something game related.
The easiest way by far is to just copy and paste. You can waste untold hours (and I have) tweaking your path AE, but honestly, their drawing tools suck and typically you’ve already designed your project in Sketch, Illustrator or perhaps even Photoshop. So let’s just reuse your designs.
If you want access to your path curve data from Sketch, you can always copy and paste your shape directly into Illustrator and from there, over to AE. Or you can use the free and awesome Sketch2AE plugin made by Google.
Keep in mind that copy/pasted motion paths are notoriously moody in after effects. If you google this (and I have), you will find entire forums created by extremely annoyed people.
There are 3 main opportunities for this to go south on you –
- Your motion path must be copy/pasted precisely on the property. For example, you must click the ‘path’ property and paste directly on to the ‘position’ property. There is no room for error here
- The layer you’re copying from and pasting to must have the original position for it to work
- You cannot scale or transform your motion path (which is so insane, it blows my mind)
For #3, the workaround is to paste onto a mask layer, do your scale/transform, and then copy/paste back onto your layer where you want the motion to happen.
In this tutorial, I cover the extremely simple way of copy/pasting from Illustrator to after effects. You can watch the tutorial here.
I’ll be the first admit the entire workflow here is hacky and the AE team could have improved this, but it is what it is.
Start with UI Animation Fundamentals: https://uxinmotion.net/product/ui-animation-fundamentals/
Become a UI Animation pro in the next 4 hours with my ‘UI Animation Fundamentals’ After Effects tutorials: https://uxinmotion.net/tutorials/ui-animation-fundamentals/
Learn how to animate micro interactions with ‘Micro-interactions’ After Effects tutorials: https://uxinmotion.net/tutorials/micro-interactions/