Lottie Animation Conversion

While creating an app splash animation in After Effects, I needed to export it as a Lottie (JSON) file for real-time playback in a mobile app.
The animation consisted of several lines drawn with Trim Paths and multiple circles following each line’s path.
However, when exported, the Lottie version broke—circles stopped following the paths, white shapes clipped the artwork, and movements became jittery.

1. Circles not following the lines

   In After Effects, the circles followed Trim Paths using a pointOnPath() expression.
   But Lottie does not support expressions, so circles froze or disappeared.
   
   

2. Diagonal white clipping across the artwork

   Around 1 s into the animation, a white diagonal shape suddenly covered the lines.

   This was caused by a pre-composition with rotation/scale—Lottie renders pre-comps as rectangular layers, so the layer’s boundary was visible as a white triangle.
   
   

3. Blue line and circle jitter / timing mismatch

   The line and the circle moved at slightly different speeds due to different easing curves (Bezier vs Linear).

   Result: a subtle “shaking” motion during playback.
   
   

4. Parenting and null objects not behaving

   Some circles parented to nulls didn’t move because null expressions and 3D transforms weren’t baked into the JSON.
   
   

5. Circles disappearing or offset

   Internal Transform: Ellipse 1 values conflicted with the layer’s main transform, creating coordinate offsets when exported.

• Lottie’s limited support for expressions and parenting

• Pre-comp boundary clipping when rotation/scale is applied

• Easing mismatch between Trim Paths and Position

• Nested transforms inside Shape Groups

• Exporting world-space coordinates from multiple pre-comps

🧠 Step 1 – Simplify & Reproduce

Deconstructed the AE project to isolate the minimal setup:
one line (Trim Paths) + one circle + no expressions + no pre-comp nesting.
Verified that Lottie handled this baseline correctly.

🧩 Step 2 – Bake Expressions into Keyframes

Replaced the unsupported expression with a comp-space conversion:

var L = thisComp.layer("line");
var path = L.content("Shape 1").content("Path 1").path;
var t = L.content("Shape 1").content("Trim Paths 1").end / 100;
L.toComp(path.pointOnPath(t));

Then:

• Animation → Keyframe Assistant → Convert Expression to Keyframes

• Disabled the expression (fx off)

• Removed parenting

• Set easing for all keyframes to Linear

🧱 Step 3 – Fix Pre-comp Clipping

Because Lottie treats pre-comps as solid rectangles:

• Opened the problematic pre-comp (e.g., “Fiber layer”)

• Increased Composition Width/Height 2–3× and centered contents

• Alternatively, moved rotation/scale keyframes from the pre-comp to inner layers
  Result → no more diagonal white clipping.

⚙️ Step 4 – Align Timing & Easing

• Set both Trim Paths > End and circle Position to Linear interpolation

• Baked the motion inside the same composition (Time Remap off)

• Nudged circle keyframes ±1–2 frames to match perfectly

• Reset all inner transforms:
  Position = 0,0 Scale = 100 Rotation = 0

🧼 Step 5 – Export & Verify

• All layers 2D (no 3D cube)

• Track Matte / Blend Modes = None / Normal

• Null Opacity = 100 %

• Added Fill to circles (Stroke-only shapes sometimes vanish in Lottie)

• Bodymovin export settings:
  ✅ Include in JSON ✅ Convert Expressions to Keyframes ❌ Glyphs
  
  

1. Bake, don’t trust expressions.
   Convert pointOnPath() or any dynamic linking into keyframes.

2. Pre-comps have rectangular boundaries.
   If you rotate or scale them, expand the canvas or move transforms inward.

3. Match easing across layers.
   Trim Paths and Position must use the same interpolation (prefer Linear).

4. Keep transforms clean.
   Reset inner Transform (Position = 0 / Scale = 100 / Rotation = 0);
   apply movement only on the layer level.

5. Validate inside one comp.
   Bake motion where the Trim Path lives — avoid baking under a time-remapped parent comp.

• 100 % visual parity between AE and Lottie

• Eliminated diagonal clipping and timing drift

• Reduced debugging time for future animations

• Established a “Lottie-safe production checklist” for designers and engineers

• Before: circles stuck, diagonal clipping, jittery motion

• After: clean, synced, expression-free Lottie animation identical to AE