Supercharge your
Lottie Workflow
with the LottieFiles plugin for Adobe After Effects
DOWNLOAD PLUGIN (ZXP)
v1.0.0
VIA ADOBE EXCHANGE
For Adobe Creative Cloud
Instant Preview
Preview your Lottie animations instantly across web and mobile devices right within Adobe After Effects.
In Real-time
Preview your animations in real-time and see how they play as you continue to edit and refine them.
Push to Mobile Device
Push your animations simultaneously to Android and iOS devices.
Optimize your animation
With the built-in render graph helps you improve animation for better CPU utilization.
..and a lot more
Render Graph
Instant File size
Magic Login
Render Configurations
Inline Images
Push to iOS
Push to Android
Custom Background Color
Scan QR & Preview
OTA Plugin Update
Render Configurations
Quick Re-Render
Push to All Devices
Save to PC
Web Share
Meta Fields
1000s of Public Files
Supported Features
iOS
|
|---|
iOS
|
| SHAPES |
Shape
|
|
Ellipse
|
|
Rectangle
|
|
Rounded Rectangle
|
|
Polystar
|
|
Group
|
Repeater
|
|
Trim Path (individually)
|
|
Trim Path (simultaneously)
|
|
Offset Path
|
| FILLS |
|
Color
|
|
Opacity
|
|
Fill Rule
|
|
Radial Gradient
|
|
Linear Gradient
|
| STROKES |
|
Color
|
|
Opacity
|
|
Width
|
|
Line Cap
|
|
Line Join
|
|
Miter Limit
|
|
Dashes
|
|
Gradient
|
| TRANSFORMS |
|
Position
|
|
Position (separated X/Y)
|
|
Scale
|
|
Rotation
|
|
Anchor Point
|
|
Opacity
|
|
Parenting
|
|
Auto Orient
|
|
Skew
|
| INTERPOLATION |
|
Linear Interpolation
|
|
Bezier Interpolation
|
|
Hold Interpolation
|
|
Spatial Bezier Interpolation
|
|
Rove Across Time
|
| MASKS |
|
Mask Path
|
|
Mask Path
|
|
Mask Opacity
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Lighten
|
|
Darken
|
|
Difference
|
|
Expansion
|
|
Feather
|
| MATTES |
|
Alpha Matte
|
|
Alpha Inverted Matte
|
|
Luma Matte
|
|
Luma Inverted Matte
|
| MERGE PATHS |
|
Merge
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Exclude Intersection
|
| LAYER EFFECTS |
|
Fill
|
|
Stroke
|
|
Tint
|
|
Tritone
|
|
Levels Individual Controls
|
| TEXT |
|
Glyphs
|
|
Fonts
|
|
Transform
|
|
Fill
|
|
Stroke
|
|
Tracking
|
|
Anchor point grouping
|
|
Text Path
|
|
Per-character 3D
|
|
Range selector (Units)
|
|
Range selector (Based on)
|
|
Range selector (Amount)
|
|
Range selector (Shape)
|
|
Range selector (Ease High)
|
|
Range selector (Ease Low)
|
|
Range selector (Randomize order)
|
|
Expression Selector
|
| OTHER |
|
Expressions
|
|
Images
|
|
Precomps
|
|
Time Stretch
|
|
Time remap
|
|
Markers
|
|
Android
|
|
Android
|
| SHAPES |
|
Shape
|
|
Ellipse
|
|
Rectangle
|
|
Rounded Rectangle
|
|
Polystar
|
|
Group
|
|
Repeater
|
|
Trim Path (individually)
|
|
Trim Path (simultaneously)
|
|
Offset Path
|
| FILLS |
|
Color
|
|
Opacity
|
|
Fill Rule
|
|
Radial Gradient
|
|
Linear Gradient
|
| STROKES |
|
Color
|
|
Opacity
|
|
Width
|
|
Line Cap
|
|
Line Join
|
|
Miter Limit
|
|
Dashes
|
|
Gradient
|
| TRANSFORMS |
|
Position
|
|
Position (separated X/Y)
|
|
Scale
|
|
Rotation
|
|
Anchor Point
|
|
Opacity
|
|
Parenting
|
|
Auto Orient
|
Skew
|
| INTERPOLATION |
|
Linear Interpolation
|
|
Bezier Interpolation
|
|
Hold Interpolation
|
|
Spatial Bezier Interpolation
|
|
Rove Across Time
|
| MASKS |
|
Mask Path
|
|
Mask Path
|
|
Mask Opacity
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Lighten
|
|
Darken
|
|
Difference
|
|
Expansion
|
|
Feather
|
| MATTES |
|
Alpha Matte
|
|
Alpha Inverted Matte
|
|
Luma Matte
|
|
Luma Inverted Matte
|
| MERGE PATHS |
|
(KitKat+)
Merge
|
|
(KitKat+)
Add
|
|
(KitKat+)
Subtract
|
|
(KitKat+)
Intersect
|
|
(KitKat+)
Exclude Intersection
|
| LAYER EFFECTS |
|
Fill
|
|
Stroke
|
|
Tint
|
|
Tritone
|
|
Levels Individual Controls
|
| TEXT |
|
Glyphs
|
|
Fonts
|
|
Transform
|
|
Fill
|
|
Stroke
|
|
Tracking
|
|
Anchor point grouping
|
|
Text Path
|
|
Per-character 3D
|
|
Range selector (Units)
|
|
Range selector (Based on)
|
|
Range selector (Amount)
|
|
Range selector (Shape)
|
|
Range selector (Ease High)
|
|
Range selector (Ease Low)
|
|
Range selector (Randomize order)
|
|
Expression Selector
|
| OTHER |
|
Expressions
|
|
Images
|
|
Precomps
|
|
Time Stretch
|
|
Time remap
|
|
Markers
|
|
Windows
|
|
Windows
|
| SHAPES |
|
Shape
|
|
Ellipse
|
|
Rectangle
|
|
Rounded Rectangle
|
|
Polystar
|
|
Group
|
|
Repeater
|
|
Trim Path (individually)
|
|
Trim Path (simultaneously)
|
|
Offset Path
|
| FILLS |
|
Color
|
|
Opacity
|
|
Fill Rule
|
|
Radial Gradient
|
|
Linear Gradient
|
| STROKES |
|
Color
|
|
Opacity
|
|
Width
|
|
Line Cap
|
|
Line Join
|
|
Miter Limit
|
|
Dashes
|
|
Gradient
|
| TRANSFORMS |
|
Position
|
|
Position (separated X/Y)
|
|
Scale
|
|
Rotation
|
|
Anchor Point
|
|
Opacity
|
|
Parenting
|
|
Auto Orient
|
|
Skew
|
| INTERPOLATION |
|
Linear Interpolation
|
|
Bezier Interpolation
|
|
Hold Interpolation
|
|
Spatial Bezier Interpolation
|
|
Rove Across Time
|
| MASKS |
|
Mask Path
|
|
Mask Path
|
|
Mask Opacity
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Lighten
|
|
Darken
|
|
Difference
|
|
Expansion
|
|
Feather
|
| MATTES |
|
Alpha Matte
|
|
Alpha Inverted Matte
|
|
Luma Matte
|
|
Luma Inverted Matte
|
| MERGE PATHS |
|
Merge
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Exclude Intersection
|
| LAYER EFFECTS |
|
Fill
|
|
Stroke
|
|
Tint
|
|
Tritone
|
|
Levels Individual Controls
|
| TEXT |
|
Glyphs
|
|
Fonts
|
|
Transform
|
|
Fill
|
|
Stroke
|
|
Tracking
|
|
Anchor point grouping
|
|
Text Path
|
|
Per-character 3D
|
|
Range selector (Units)
|
|
Range selector (Based on)
|
|
Range selector (Amount)
|
|
Range selector (Shape)
|
|
Range selector (Ease High)
|
|
Range selector (Ease Low)
|
|
Range selector (Randomize order)
|
|
Expression Selector
|
| OTHER |
|
Expressions
|
|
Images
|
|
Precomps
|
|
Time Stretch
|
|
Time remap
|
|
Markers
|
|
Web (SVG)
|
|
Web (SVG)
|
| SHAPES |
|
Shape
|
|
Ellipse
|
|
Rectangle
|
|
Rounded Rectangle
|
|
Polystar
|
|
Group
|
|
Repeater
|
|
Trim Path (individually)
|
|
Trim Path (simultaneously)
|
|
Offset Path
|
| FILLS |
|
Color
|
|
Opacity
|
|
Fill Rule
|
|
Radial Gradient
|
|
Linear Gradient
|
| STROKES |
|
Color
|
|
Opacity
|
|
Width
|
|
Line Cap
|
|
Line Join
|
|
Miter Limit
|
|
Dashes
|
|
Gradient
|
| TRANSFORMS |
|
Position
|
|
Position (separated X/Y)
|
|
Scale
|
|
Rotation
|
|
Anchor Point
|
|
Opacity
|
|
Parenting
|
|
Auto Orient
|
|
Skew
|
| INTERPOLATION |
|
Linear Interpolation
|
|
Bezier Interpolation
|
|
Hold Interpolation
|
|
Spatial Bezier Interpolation
|
|
Rove Across Time
|
| MASKS |
|
Mask Path
|
|
Mask Path
|
|
Mask Opacity
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Lighten
|
|
Darken
|
|
Difference
|
|
Expansion
|
|
Feather
|
| MATTES |
|
Alpha Matte
|
|
Alpha Inverted Matte
|
|
Luma Matte
|
|
Luma Inverted Matte
|
| MERGE PATHS |
|
Merge
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Exclude Intersection
|
| LAYER EFFECTS |
|
Fill
|
|
Stroke
|
|
Tint
|
|
Tritone
|
|
Levels Individual Controls
|
| TEXT |
|
Glyphs
|
|
Fonts
|
|
Transform
|
|
Fill
|
|
Stroke
|
|
Tracking
|
|
Anchor point grouping
|
|
Text Path
|
|
Per-character 3D
|
|
Range selector (Units)
|
|
Range selector (Based on)
|
|
Range selector (Amount)
|
|
Range selector (Shape)
|
|
Range selector (Ease High)
|
|
Range selector (Ease Low)
|
|
Range selector (Randomize order)
|
|
Expression Selector
|
| OTHER |
|
Expressions
|
|
Images
|
|
Precomps
|
|
Time Stretch
|
|
Time remap
|
|
Markers
|
|
Web (Canvas)
|
|
Web (Canvas)
|
| SHAPES |
|
Shape
|
|
Ellipse
|
|
Rectangle
|
|
Rounded Rectangle
|
|
Polystar
|
|
Group
|
|
Repeater
|
|
Trim Path (individually)
|
|
Trim Path (simultaneously)
|
|
Offset Path
|
| FILLS |
|
Color
|
|
Opacity
|
|
Fill Rule
|
|
Radial Gradient
|
|
Linear Gradient
|
| STROKES |
|
Color
|
|
Opacity
|
|
Width
|
|
Line Cap
|
|
Line Join
|
|
Miter Limit
|
|
Dashes
|
|
Gradient
|
| TRANSFORMS |
|
Position
|
|
Position (separated X/Y)
|
|
Scale
|
|
Rotation
|
|
Anchor Point
|
|
Opacity
|
|
Parenting
|
|
Auto Orient
|
|
Skew
|
| INTERPOLATION |
|
Linear Interpolation
|
|
Bezier Interpolation
|
|
Hold Interpolation
|
|
Spatial Bezier Interpolation
|
|
Rove Across Time
|
| MASKS |
|
Mask Path
|
|
Mask Path
|
|
Mask Opacity
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Lighten
|
|
Darken
|
|
Difference
|
|
Expansion
|
|
Feather
|
| MATTES |
|
Alpha Matte
|
|
Alpha Inverted Matte
|
|
Luma Matte
|
|
Luma Inverted Matte
|
| MERGE PATHS |
|
Merge
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Exclude Intersection
|
| LAYER EFFECTS |
|
Fill
|
|
Stroke
|
|
Tint
|
|
Tritone
|
|
Levels Individual Controls
|
| TEXT |
|
Glyphs
|
|
Fonts
|
|
Transform
|
|
Fill
|
|
Stroke
|
|
Tracking
|
|
Anchor point grouping
|
|
Text Path
|
|
Per-character 3D
|
|
Range selector (Units)
|
|
Range selector (Based on)
|
|
Range selector (Amount)
|
|
Range selector (Shape)
|
|
Range selector (Ease High)
|
|
Range selector (Ease Low)
|
|
Range selector (Randomize order)
|
|
Expression Selector
|
| OTHER |
|
Expressions
|
|
Images
|
|
Precomps
|
|
Time Stretch
|
|
Time remap
|
|
Markers
|
|
Web (HTML)
|
|
Web (HTML)
|
| SHAPES |
|
Shape
|
|
Ellipse
|
|
Rectangle
|
|
Rounded Rectangle
|
|
Polystar
|
|
Group
|
|
Repeater
|
|
Trim Path (individually)
|
|
Trim Path (simultaneously)
|
|
Offset Path
|
| FILLS |
|
Color
|
|
Opacity
|
|
Fill Rule
|
|
Radial Gradient
|
|
Linear Gradient
|
| STROKES |
|
Color
|
|
Opacity
|
|
Width
|
|
Line Cap
|
|
Line Join
|
|
Miter Limit
|
|
Dashes
|
|
Gradient
|
| TRANSFORMS |
|
Position
|
|
Position (separated X/Y)
|
|
Scale
|
|
Rotation
|
|
Anchor Point
|
|
Opacity
|
|
Parenting
|
|
Auto Orient
|
|
Skew
|
| INTERPOLATION |
|
Linear Interpolation
|
|
Bezier Interpolation
|
|
Hold Interpolation
|
|
Spatial Bezier Interpolation
|
|
Rove Across Time
|
| MASKS |
|
Mask Path
|
|
Mask Path
|
|
Mask Opacity
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Lighten
|
|
Darken
|
|
Difference
|
|
Expansion
|
|
Feather
|
| MATTES |
|
Alpha Matte
|
|
Alpha Inverted Matte
|
|
Luma Matte
|
|
Luma Inverted Matte
|
| MERGE PATHS |
|
Merge
|
|
Add
|
|
Subtract
|
|
Intersect
|
|
Exclude Intersection
|
| LAYER EFFECTS |
|
Fill
|
|
Stroke
|
|
Tint
|
|
Tritone
|
|
Levels Individual Controls
|
| TEXT |
|
Glyphs
|
|
Fonts
|
|
Transform
|
|
Fill
|
|
Stroke
|
|
Tracking
|
|
Anchor point grouping
|
|
Text Path
|
|
Per-character 3D
|
|
Range selector (Units)
|
|
Range selector (Based on)
|
|
Range selector (Amount)
|
|
Range selector (Shape)
|
|
Range selector (Ease High)
|
|
Range selector (Ease Low)
|
|
Range selector (Randomize order)
|
|
Expression Selector
|
| OTHER |
|
Expressions
|
|
Images
|
|
Precomps
|
|
Time Stretch
|
|
Time remap
|
|
Markers
|
FAQ
What is a Lottie?
A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback. Open-source and free
Lottie players exist for the web, iOS, Android, Windows and other platforms.
How does the LottieFiles plugin differ from the Bodymovin plugin?
The LottieFiles Plugin implements all the Lottie generation features of Bodymovin. We have gone further by crafting an optimized instant preview and test-on-mobile devices workflow for a quicker,more efficient iteration cycle. We also made it super easy to upload and privately share your animation with others at different points in development and added tools and features such as changing background color, reviewing Lottie file size and render performance graphs.
What formats does the plugin support exporting as?
The LottieFiles plugin will export your animation as a Lottie file (Bodymovin JSON) and as a Telegram Sticker (TGS) file.
What does the previews tab in the plugin do?
The previews tab in the plugin allows you to view animations you’ve uploaded previously (both on LottieFiles on the web and via the plugin).
What does the explore tab in the plugin do?
Using the explore tab, you can browse and search through all the Lottie animations on LottieFiles right from within the plugin itself. After selecting an animation, you can download the Lottie file as well as its Adobe After Effects project (AEP) file.
Downloading the animation’s AEP file gives you the ability to redesign the animation and change the layers you want.
Downloading the animation’s AEP file gives you the ability to redesign the animation and change the layers you want.
My animation isn’t playing, it’s just stuck on ‘rendering’.
Not to worry, there’s a simple solution for this. In Adobe After Effects, go to Preferences > Scripting & Expressions. Under Application Scripting, select Allow Scripts to Write Files and Access Network.
What does the LottieFiles plugin do?
The LottieFiles plugin converts your Adobe After Effects animation into a Lottie format file for use on the web and mobile. The plugin provides a smooth workflow for rapidly iterating on animations and testing feature support across different platforms.
The LottieFiles plugin also integrates tightly with LottieFiles, letting you upload, test and publish animations to share with the world as well as searching for Lottie animations and downloading their Adobe After Effects project files.
The LottieFiles plugin also integrates tightly with LottieFiles, letting you upload, test and publish animations to share with the world as well as searching for Lottie animations and downloading their Adobe After Effects project files.
What file format does the plugin export my animation as?
The LottieFiles plugin will export your animation as a Lottie file.
Do I need to login to use the plugin?
Yes to use the plugin you need to sign into your LottieFiles account.
Can I preview animations for web and mobile straight from within the plugin?
Yes you can. For mobile, there are 2 ways to preview your animation.
1. You can scan the QR code generated after uploading the animation on your mobile device
2. If you have connected your device to the plugin (and you can connect multiple) you can just select to push it to that device and then you’ll be prompted with a notification to open your LottieFiles app on that device. Open it up and watch your animation play!
If you have multiple devices connected to the plugin you can choose to push the animation to either a select few or all your applications. This one click action can save you a lot of time when you’ve got a lot of devices to test on.
1. You can scan the QR code generated after uploading the animation on your mobile device
2. If you have connected your device to the plugin (and you can connect multiple) you can just select to push it to that device and then you’ll be prompted with a notification to open your LottieFiles app on that device. Open it up and watch your animation play!
If you have multiple devices connected to the plugin you can choose to push the animation to either a select few or all your applications. This one click action can save you a lot of time when you’ve got a lot of devices to test on.
