> For the complete documentation index, see [llms.txt](https://docs.responsiveads.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.responsiveads.com/creating-ads/designing-your-ad-in-the-fluid-ad-creator/animation-timeline/exporting-after-effects-animations-to-lottie.md). # 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](https://docs.responsiveads.com/creating-ads/designing-your-ad-in-the-fluid-ad-creator/animation-timeline/using-sprite-sheets-and-animation-in-responsiveads) instead — those effects do not export to Lottie (see below). *** #### Video walkthrough {% embed url="" %} *** ### 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. 1. Select the layer in your timeline. 2. Go to **Layer → Create → Create Shapes from Vector Layer**. 3. 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) 1. Open **Window → Extensions → Bodymovin**. 2. In the panel, confirm your current composition is listed, then choose a destination folder for the export. 3. 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. 4. Click **Save**. 5. 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. 6. Once it reports **Done**, your `.json` file will be in the destination folder you chose in step 2. #### Option B — Export with the LottieFiles plugin 1. Make sure the LottieFiles plugin is installed and added to your After Effects composition. 2. Open the LottieFiles panel and confirm your composition is saved. 3. Click through to preview your animation directly in the panel. 4. Save your Lottie file — this uploads it to your LottieFiles account/library rather than saving straight to your computer. 5. To download the file locally, sign in on [lottiefiles.com](https://lottiefiles.com/) and open it from your dashboard. Downloading requires a paid subscription; previewing does not.

Lottiefiles plugin in Adobe After Effects

> 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: 1. Go to [lottiefiles.com/preview](https://lottiefiles.com/preview). 2. Drag your exported `.json` file into the preview tool. 3. 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).

Animation and download options in Lottiefiles web app

*** ### Part 4 — Adding the animation to your ad in ResponsiveAds 1. In the Fluid Ad Creator, click the **+** button to add a new element and choose **Lottie Animation** from the Video/Rich Media group.

2. 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.

3. With the element selected, go to its **Setup** tab and click **Add Lottie**, then select your exported `.json` file to upload it.

4. 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.

5. 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 below `1` (e.g., `0.5`, `0.25`) to slow it down — this stays smooth since the animation is vector-based. 6. 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.