Exporting After Effects Animations to Lottie
Exporting After Effects Animations to Lottie
Lottie lets you export vector animations from Adobe After Effects as lightweight JSON files that play natively inside ResponsiveAds — no PNG sequences, no sprite sheets, and fully scalable at any size.
This guide covers preparing your After Effects composition, exporting it as a Lottie/JSON file, testing it, and adding it to your ad as a Lottie Animation element.
Which method should I use? If your animation is built from vector shapes (logos, icons, line art), Lottie is usually the simplest and smallest option. If you're animating photographic or bitmap content, or using After Effects layer effects like particles or blurs, see Using Sprite Sheets & Animation in ResponsiveAds instead — those effects do not export to Lottie (see below).
Video walkthrough
Part 1 — Preparing your After Effects composition
Convert vector layers to shape layers
If your artwork was brought in as an Adobe Illustrator (AI) file, you need to convert each layer into a shape layer before exporting. Illustrator layers won't translate to Lottie/JSON — only shape layers will.
Select the layer in your timeline.
Go to Layer → Create → Create Shapes from Vector Layer.
Once the shape layer is created, you can delete the original AI layer from your composition — only the shape layer is needed going forward.
Keep your animation simple
Lottie export is reliable for straightforward, keyframe-based timeline animation — position, scale, rotation, opacity. Before you invest time building a complex animation, know these limitations:
Avoid using:
Expressions — these generally do not translate well. Simple cases may partially export, but complex expressions can misbehave or fail silently in the output. If you want to explore this, treat it as experimental — plan to test early and often rather than building the whole animation before checking.
Layer effects and bitmap-style effects (particles, rain, blur, glow, and similar) — these do not export to Lottie or JSON at all. If you apply these, the exported file will render blank in that area. Work with vector shapes and shape layers only.
Use these instead:
Paths and motion paths (e.g., using the Pen tool to draw a path and animate an object along it) — export reliably and are a good alternative to expressions for complex movement.
Manually recreated particle-style effects: if you need something like rain or snow, animate a single element (e.g., one raindrop moving from point A to B), then use a pre-composition to repeat/scatter it across the canvas manually. This is more manual work but does export correctly.
Tip: If you're building a complex animation with many keyframes, don't wait until the end to test it. Export and preview it in chunks (using the LottieFiles preview tool or directly in ResponsiveAds) as you go, so you catch anything that doesn't translate before you've invested more time.
Part 2 — Exporting from After Effects
You have two plugin options. Both produce a JSON file; the difference is mainly in cost and where the file ends up.
Bodymovin
LottieFiles plugin
Cost
Free, exports directly to your computer
Requires a LottieFiles account; downloading requires a paid subscription (previewing is free)
Output location
Your local computer
Your LottieFiles online library/dashboard
Recommended for
Most users — this is the simpler path
Teams already using LottieFiles for asset management
Both plugins are installed via After Effects → Window → Extensions, and both must be downloaded/installed from the relevant plugin marketplace before they'll appear there.
Option A — Export with Bodymovin (recommended)
Open Window → Extensions → Bodymovin.
In the panel, confirm your current composition is listed, then choose a destination folder for the export.
Click into the Assets settings for the export:
Set your compression level as needed.
Make sure Include in JSON (or the equivalent "include assets in JSON" toggle) is enabled.
Click Save.
With your composition selected in the panel, click Render.
Known quirk: The Render button in Bodymovin doesn't always behave reliably. If it appears to hang or not produce output, it's a known limitation of the plugin rather than something you've done wrong. Re-select your composition and try again, or fall back to the LottieFiles preview tool below to confirm the file that was produced is valid.
Once it reports Done, your
.jsonfile will be in the destination folder you chose in step 2.
Option B — Export with the LottieFiles plugin
Make sure the LottieFiles plugin is installed and added to your After Effects composition.
Open the LottieFiles panel and confirm your composition is saved.
Click through to preview your animation directly in the panel.
Save your Lottie file — this uploads it to your LottieFiles account/library rather than saving straight to your computer.
To download the file locally, sign in on lottiefiles.com and open it from your dashboard. Downloading requires a paid subscription; previewing does not.
LottieFiles exports can be smaller than a standard Bodymovin/JSON export, particularly for designs with a lot of vector detail or when mixing in bitmap/PNG assets. For most straightforward vector animations, Bodymovin's JSON export is sufficient.
Part 3 — Testing your export before uploading
Before bringing your file into ResponsiveAds, confirm it plays correctly using the free LottieFiles preview tool:
Go to lottiefiles.com/preview.
Drag your exported
.jsonfile into the preview tool.Confirm the animation plays as expected. The tool also shows you useful metadata: file size, frame rate, resolution, and duration — handy for a quick sanity check (a well-optimized icon-style animation should typically be just a few KB).
Part 4 — Adding the animation to your ad in ResponsiveAds
In the Fluid Ad Creator, click the + button to add a new element and choose Lottie Animation from the Video/Rich Media group.
An empty Lottie element appears on your canvas. Adjust its size and position by dragging it directly, or using the fields in the Design panel on the right.
With the element selected, go to its Setup tab and click Add Lottie, then select your exported
.jsonfile to upload it.
Add lottie button in setup tab 
List of available lottie files Once uploaded, the Setup tab shows the file's Name, Duration, and Frames/Sec (FPS) — a quick way to confirm the right file came through.
Below that, set playback:
Autoplay — check this if you want the animation to start automatically; it's off by default.
Loop — check this to have it repeat continuously; leave unchecked for a single play-through.
Playback Speed — defaults to
1. Increase to speed the animation up, or use a value below1(e.g.,0.5,0.25) to slow it down — this stays smooth since the animation is vector-based.
Save your ad.
Troubleshooting
My export looks blank in part of the animation You likely used a layer effect (particles, glow, blur, etc.) or a bitmap-based effect. These don't translate to Lottie/JSON — recreate the effect using shape layers and/or a manually built pre-composition instead.
My expression-driven animation isn't behaving correctly on export Expressions are not reliably supported. Convert the relevant motion to standard keyframes, or use a motion path with the Pen tool if you need non-linear movement.
Bodymovin's Render button doesn't seem to do anything This is a known plugin quirk. Re-confirm your composition is selected and try again; if it continues to fail, verify whether a file was still produced in your destination folder, or switch to the LottieFiles plugin as a fallback.
I want to download from LottieFiles but I'm being asked to pay Previewing on LottieFiles is free; downloading from your LottieFiles library requires a paid subscription. If you exported with Bodymovin instead, the file downloads to your computer directly at no cost.
FAQ
Do I need a LottieFiles account? No — only if you use the LottieFiles plugin (Option B) instead of Bodymovin. Bodymovin exports straight to your computer for free.
Can I use PNGs or bitmap images inside a Lottie animation? You can include them, but be aware this can introduce playback performance issues compared to a pure vector export. Keep animations vector-based where possible.
What frame rate/duration should I aim for? There's no hard limit, but shorter, simpler animations export more reliably and produce smaller files. Use the LottieFiles preview tool to check your file size before uploading it to ResponsiveAds.
Last updated
Was this helpful?