Creating and exporting Lottie animations in After Effects requires following these steps and best practices:
1. Preparation
Install Bodymovin Plugin
- Visit https://aescripts.com/bodymovin/ to download the plugin
- Or search for Bodymovin in After Effects' Window > Extensions > Browse Extensions
- After installation, open the plugin panel from Window > Extensions > Bodymovin
Project Settings
// Recommended project settings - Frame rate: 30fps or 60fps - Resolution: Set based on target platform (e.g., 1920x1080 or 375x667) - Color space: sRGB - Duration: Keep within 5-10 seconds
2. Creating Animations
Basic Layer Creation
1. Create shape layers - Select shape tools (rectangle, ellipse, polygon, etc.) - Draw shapes in composition - Add fill and stroke 2. Create text layers - Use text tool - Choose appropriate fonts (recommend web-safe fonts) - Set font size, color, and spacing 3. Create pre-compositions - Group multiple layers - Right-click > Pre-compose - Check "Move all attributes into the new composition"
Animation Creation Tips
1. Position animation - Select layer - Press P to open position property - Add keyframes - Use easing functions for smoother animation 2. Scale animation - Press S to open scale property - Add keyframes - Maintain aspect ratio (unlink) 3. Rotation animation - Press R to open rotation property - Add keyframes - Set rotation angle 4. Opacity animation - Press T to open opacity property - Add keyframes - Set 0-100% opacity
3. Optimizing Animations
Simplify Shapes
1. Reduce path points - Select shape layer - Use pen tool to simplify paths - Remove unnecessary control points 2. Merge similar layers - Merge layers of the same type - Use pre-compositions to reduce nesting levels 3. Avoid complex effects - Limit use of After Effects effects - Prioritize basic transform properties - Avoid using 3D layers (unless necessary)
Performance Optimization
1. Reduce layer count - Merge layers that don't need independent control - Use pre-compositions to organize layers 2. Optimize keyframes - Remove unnecessary keyframes - Use easing functions to reduce keyframe count 3. Reduce complexity - Simplify shapes and paths - Shorten animation duration - Avoid complex expressions
4. Export Settings
Bodymovin Export Configuration
{ "version": "5.7.0", "generator": "Bodymovin", "settings": { "compress": true, // Compress JSON "demo": false, // Don't generate demo page "pretty": false, // Don't format JSON "hidden": false, // Export hidden layers "ignore": false, // Don't ignore any layers "hidenull": false, // Don't hide null layers "trim": false, // Don't trim animation "simplify": true, // Simplify paths "exp": false, // Don't export expressions "mask": true, // Export masks "guides": false, // Don't export guides "camera": false, // Don't export camera "effects": false, // Don't export effects "chars": false, // Don't export character animation "shapes": true, // Export shapes "images": true, // Export images "fonts": false // Don't export fonts (use web fonts) } }
Export Steps
1. Select the composition to export 2. Click "Refresh" in Bodymovin panel 3. Choose export path 4. Click "Render" to start export 5. Wait for export to complete 6. Check the generated JSON file
5. Validation and Testing
Validate with LottieFiles
1. Visit https://lottiefiles.com/preview 2. Upload the exported JSON file 3. Check if animation plays correctly 4. View file size and performance metrics 5. Test compatibility across different platforms
Use LottieFiles Optimizer
1. Visit https://lottiefiles.com/tools/optimize 2. Upload JSON file 3. View optimization suggestions 4. Apply optimization options 5. Download optimized file
6. Common Issues and Solutions
Export Failure
Problem: Error during export Solution: - Check After Effects version compatibility - Update Bodymovin plugin to latest version - Ensure composition settings are correct - Check if layer names contain special characters
Incomplete Animation
Problem: Exported animation missing some content Solution: - Check layer visibility settings - Ensure all needed layers are not hidden - Check pre-composition settings - Verify keyframe range
File Too Large
Problem: JSON file size is too large Solution: - Simplify shapes and paths - Reduce layer count - Lower frame rate - Use LottieFiles optimizer - Compress image assets
Animation Lagging
Problem: Animation playback is not smooth Solution: - Reduce animation complexity - Lower frame rate - Simplify shapes and paths - Reduce number of simultaneously animated elements - Use Canvas renderer
7. Best Practices
Design Phase
1. Keep it simple - Prioritize basic shapes - Avoid complex paths and effects - Limit layer count 2. Consider performance - Design with target device performance in mind - Avoid too many simultaneous animations - Use appropriate frame rates 3. Responsive design - Design scalable vector graphics - Consider different screen sizes - Use relative units
Animation Creation Phase
1. Use easing functions - Make animations more natural and smooth - Avoid stiff linear animations - Use standard easing functions 2. Maintain consistency - Use consistent animation style - Maintain consistent easing and timing - Follow brand design guidelines 3. Test and iterate - Regularly test export results - Optimize based on test results - Maintain version control
Export Phase
1. Validate export results - Use LottieFiles preview - Test across different platforms - Check file size 2. Optimize files - Use optimization tools - Compress JSON - Optimize image assets 3. Document - Record animation parameters - Annotate keyframes - Provide usage instructions
8. Advanced Techniques
Using Expressions
// Loop animation loopOut() // Wiggle effect wiggle(5, 20) // Time delay thisComp.layer("Layer 1").transform.position.valueAtTime(time - 0.5)
Using Masks and Mattes
1. Create masks - Select layer - Use shape tools to create mask - Set mask mode 2. Use mattes - Set layer matte properties - Adjust matte opacity - Add matte animation
Using Pre-compositions
1. Organize complex animations - Pre-compose related layers - Create nested animations - Simplify main composition 2. Reuse animations - Create reusable pre-compositions - Use in multiple compositions - Maintain animation consistency
9. Tools and Resources
Recommended Tools
1. LottieFiles - Preview and test animations - Optimize and compress files - Community animation library 2. Bodymovin - After Effects plugin - Export Lottie animations - Configure export options 3. Lottie Editor - Online editor - Modify animation properties - Test animation effects
Learning Resources
1. Official documentation - Lottie official documentation - After Effects tutorials - Bodymovin usage guide 2. Community resources - LottieFiles community - GitHub repositories - Stack Overflow 3. Video tutorials - YouTube tutorials - Online courses - Practical cases
By following these steps and best practices, you can create high-quality, high-performance Lottie animations that run smoothly across various platforms.