Streaming live at 10am (PST)

Lottie AE Vectors

If I create a vector within AE, the json file works fine in webflow. But if I import an Illustrator vector into AE, the json file doesn’t work. It just shows up as a blue question mark in webflow. What’s up with that?

Hello @Chris_Patchel,

I found this on a Github forum, I hope it helps.

In order to save yourself some time make sure you imported your .ai file correctly. Here’s the step by step that will work with the latest After Effects CC.

Illustrator Preparation

  1. In Illustrator take all the layers and make them into their own layers. ‘Release to Layers’ (right click after selecting them all)
  2. Make sure the Illustrator file had the ‘Create PDF Compatible File’ checked when saving
  3. Save as .ai file type (for importing into AE)

After Effects

  1. Create a composition
  2. Import file: as Composition (not footage) / Create Composition (from checkmark)
  3. Drag the composition (that is made from Illustrator) This way you don’t need to use the individual layers)
  4. Drag onto the art board/comp
  5. In the layer of the animation pane, double click that composition. You’ll then see inside of it will all the .ai / vector files.
  6. Select all layers and go to Layer>Create Shapes from Vector Layer

If you make sure to import with the ‘Create Composition’ check marked, you’ll be able to just drag that comp onto the stage (then edit the layers inside of it to shapes) … and edit the composition as a whole, rather than the layers individually for vector output.

Thanks a lot, Pablo.

It does solve the problem, though I must say this certainly puts a damper on my enthusiasm for lottie animations. AE is a superb tool for animating images, but pretty clunky at creating (or editing) them : /

Hello @Chris_Patchel,

I hear you, but I think that AE might surprise us with its capabilities for lottie in the future. I’m glad I was able to help you. Take care.

This is exactly what I needed, Thanks