Lottie Animations

Lottie is a library for playing After Effects animations exported as JSON files across iOS, Android, web, and other platforms. Originally developed by Airbnb, Lottie enables designers to create complex animations in After Effects and export them for native playback without developers manually recreating the animation. This workflow bridges design and development for motion design in cross-platform design systems.

What Is Lottie

Lottie parses JSON animation data exported from After Effects via the Bodymovin plugin. The JSON describes animation properties frame by frame. Lottie renderers on each platform interpret this data and render animations using platform-native drawing APIs.

This approach enables sharing exact animations across platforms. The same JSON file plays on iOS, Android, and web with visually identical results. This consistency is valuable for brand animations, onboarding sequences, and complex motion that would be difficult to replicate manually.

Lottie supports a subset of After Effects features. Vector shapes, masks, trim paths, and expressions work well. Some effects, 3D layers, and complex features may not export or play correctly. Testing exported animations ensures compatibility.

How Lottie Works

After Effects workflow creates source animations using supported features. Designers animate using shapes, paths, and transforms while avoiding unsupported features for Lottie export.

Lottie Workflow:

Design Phase:
1. Create animation in After Effects
2. Use supported features (shapes, paths, transforms)
3. Avoid unsupported features (3D, effects)
4. Export with Bodymovin plugin to JSON

Development Integration:

iOS (Swift):
import Lottie
let animationView = LottieAnimationView(name: "animation")
animationView.play()

Android (Kotlin):
val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
animationView.setAnimation("animation.json")
animationView.playAnimation()

Web:
lottie.loadAnimation({
  container: element,
  renderer: 'svg',
  loop: true,
  path: 'animation.json'
});

React Native:
<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
/>

Bodymovin export converts After Effects composition to JSON. Export settings affect file size and compatibility. Preview in Bodymovin validates export before integration.

Platform libraries render animations. lottie-ios for iOS, lottie-android for Android, and lottie-web for browsers provide playback. Each library interprets JSON and renders using platform drawing systems.

Animation control APIs allow programmatic playback manipulation. Play, pause, seek to frame, loop control, and speed adjustment are available. Progress callbacks enable synchronization with application events.

Key Considerations

• After Effects expertise required for animation creation
• Not all After Effects features export successfully
• File size increases with animation complexity
• Performance varies by animation complexity
• Testing across platforms validates consistent playback
• Version compatibility between Bodymovin and Lottie libraries

Common Questions

What After Effects features work with Lottie?

Well-supported features include shape layers, solid layers, image layers, null objects, masks, and alpha mattes. Transform properties (position, scale, rotation, opacity) animate reliably.

Expressions have limited support. Simple expressions work; complex expressions may fail.

Unsupported or problematic features include 3D layers, layer effects (drop shadow, glow), blending modes (some), and complex expressions. Checking the official compatibility documentation helps during design.

LottieFiles community provides examples and compatibility information. Testing exported animations on all target platforms validates actual support.

How do teams optimize Lottie animation performance?

Reducing layer count improves performance. Fewer layers mean less rendering work. Merge shapes where possible.

Simplifying paths reduces complexity. Fewer path points require less calculation. Use pathfinder operations in Illustrator before importing to After Effects.

Avoiding large assets (images, complex shapes) keeps file size small and rendering efficient.

Using native renderers when available improves performance. iOS and Android libraries have optimized native renderers.

Testing on lower-end devices reveals performance issues. Animations that run smoothly on flagship devices may struggle on budget phones.

How do design systems manage Lottie assets?

Asset organization groups animations by purpose. Loading indicators, onboarding animations, and status animations each have directories.

Version control tracks animation files. JSON files work well with text-based version control. Change diffs show actual modifications.

Naming conventions indicate animation purpose and usage context. Loading-spinner-primary.json is clearer than animation1.json.

Documentation describes each animation’s intended use. When should it play? What events trigger it? How should it loop?

Performance budgets may limit animation complexity. Maximum file sizes or frame counts prevent problematic animations.

Summary

Lottie enables After Effects animations to play across platforms through JSON export and platform-native rendering. The workflow allows designers to create animations without developer recreation. Design systems using Lottie should understand supported features, optimize for performance, and establish asset management practices. Testing on all target platforms validates that animations play correctly and perform adequately.