Animating a custom Lemniscate in After Effects

[Kristian35585560aroj]

Hello everyone,

I'm new to the Adobe suite and seeking guidance on creating a seamless motion looping animation in After Effects for custom shapes I made in Illustrator.

I want to animate all vectors in this shape to animate from it's current start position around the shape and back to it's start position as it's end position mantaining the gaps between each shape and bending each around the edges.

I've tried using trim paths in After Effects, but found limitations in molding the paths to resemble my vectors. I also attempted plugins like Omnio Snake and Buo, but encountered issues with path animation.

After days of attempts and much trial and error later, I am considering straightening all shapes in Illustrator to align on a single line path and then animate in After Effects following this tutorial: https://www.youtube.com/watch?v=8biAwem4jeA

In summary, I'm seeking answers to:

1. Is my approach correct?
2. How can I prepare vector shapes in Illustrator to align in a straight line with consistent gaps?

Side Note : I know this is a After Effects community so I apologise before hand if asking for illustrator guidance is out of place  

[Mylenium]

You don't animate the sahpe, you reveal it/ stencil it out using track mattes, wipes, strokes on strokes, the Write-on effect. It's all an illusion and any good old "logo reveal" or "growing vines/ swirls" tutorial can teach you the necessary techniques. Most of them are a bit dated, but the methods shown are still valid and can be adapted. Here#s one to get you started and if you search YouTube, literally a gigazillion more will show up:

https://www.youtube.com/watch?v=IxDO3Ass4UQ

Mylenium

[Rick Gerard]

The problem with warping the shapes using Puppet Pin is maintaining the distance between them and maintaining the curves. Your illustration has seven separate segments. You'll need seven layers. You'll need at least four pins in each segment. You will also need a single centerline path that you can use for the nulls that are going to follow the path.

The tutorial you referenced used a very amateurish approach to spacing out the pins and adjusting the timing. A much easier method would be to add a loopOut expression to the first and last keyframes generated by copying and pasting the path to position and then sequencing the layers. There is no need to generate all of those keyframes. 

I don't have time to put together a demo or a project file for you now, and fine-tuning the Puppet Pin settings to keep the curves smooth is going to be a bit of a challenge. 

A much simpler approach would be to create an Illustrator file with the gaps as separate matte layers and have the gaps flow around the motion path as track mattes. You'll need two copies of the figure eight path, one for each color and copies of the matte gaps for each layer. Then, take a look at Mylenium's suggestions for track matte tutorials.