Export Lottie and CSS Animations as Video
Lottie animations and CSS @keyframes are the two most popular formats for lightweight, scalable web animation. They are perfect for interactive web experiences — but sharing them outside the browser context has always required conversion to video. Our HTML to MP4 tool handles both: wrap your Lottie JSON or CSS animation in a self-contained HTML file, load it into the tool, and export a clean MP4 that plays anywhere. No runtime dependencies, no browser required — just a standard video file.
Lottie Animations: From JSON to MP4
Lottie is an animation file format developed by Airbnb that stores After Effects animations as JSON and replays them using a JavaScript library (lottie-web). Lottie is widely used in mobile apps, web interfaces, and loading animations because the files are compact, scalable, and high quality at any size. The Lottie ecosystem includes a large library of free animations at LottieFiles.com and similar sites. You can download a Lottie .json file and use it directly, or create your own in After Effects using the Bodymovin plugin. To export a Lottie animation as video using our tool, you need to embed it in an HTML wrapper. Here is the basic structure: 1. Get the lottie-web player library as a JavaScript file (download from npm or the CDN and copy the content inline). 2. Create an HTML file with the Lottie container div and the player script. 3. Embed the Lottie JSON data inline in the HTML (as a JavaScript variable or directly in the lottie initialization code). 4. Use the lottie.loadAnimation() call with the renderer set to 'canvas' (for best frame capture compatibility) or 'svg'. 5. Set a defined duration that matches the animation's total frames/frame rate. The lottie-web player is requestAnimationFrame-driven, which means it advances correctly on the tool's synthetic clock. The animation plays frame by frame at the correct timing, and each frame is captured accurately. After export, the MP4 plays the Lottie animation as a standard video — no lottie-web runtime needed, no browser required. The output can be embedded in PowerPoint, uploaded to social media, or used in any video production workflow.
CSS @Keyframes: Best Practices for Video Export
CSS @keyframes animations are the most common type of web animation and the most reliable for video export. Here is a thorough guide to making CSS animations export perfectly. Animation timing functions: All standard CSS timing functions work correctly in the export tool. linear, ease, ease-in, ease-out, ease-in-out, and cubic-bezier() values are all evaluated precisely at each synthetic timestamp. Multiple animations on one element: An element can have multiple animations applied simultaneously (animation: slide 1s, fade 0.5s). Both run concurrently and are both captured correctly in the export. Ensure the animation-delay values are accounted for in the total recording duration. Chained animation sequences: For an animation where element A animates first, then element B, then element C, use animation-delay to stagger the start times. Element A starts at 0s, B at 0.8s (after A finishes), C at 1.6s, etc. The recording duration should cover the end of the last animation plus any animation-fill-mode hold time. Animation iteration and loop export: CSS animations with animation-iteration-count: infinite loop continuously. For export, the tool captures a defined duration — the animation does not run indefinitely but stops at the specified recording end time. Set the recording duration to capture an exact number of loops for seamless loop potential in the output. Scrolling and parallax animations: Scroll-triggered animations that respond to window.scrollY will not advance in the export context because there is no scroll event. Convert scroll-driven animations to time-driven animations before export (replace scroll progress with time progress). The Intersection Observer API also does not fire during frame-by-frame capture. CSS Grid and Flexbox animations: Animating grid-template-columns or flex properties can produce layout recalculations that are expensive and occasionally inconsistent in the canvas render. For smooth, reliable export, use transforms to animate position and size rather than layout properties wherever possible.
Using LottieFiles Library Animations: Step-by-Step
LottieFiles.com provides thousands of free and premium Lottie animations that you can export as video using our tool. Here is the exact workflow. Step 1 — Find an animation: Visit LottieFiles.com and browse or search for the animation you want. Free animations are available without an account. Preview the animation and verify it matches your intended use. Step 2 — Download the JSON: Click 'Download' and select 'Lottie JSON'. Save the .json file to your computer. Step 3 — Get lottie-web: Go to the lottie-web GitHub repository (github.com/airbnb/lottie-web). In the dist folder, download lottie.min.js. This is the JavaScript library that plays Lottie files. Step 4 — Create an HTML wrapper: Create a new .html file with this structure: a style tag setting the animation container to your target dimensions (e.g., 500×500 for a square animation), a div with id='animation' set to those dimensions, the lottie.min.js content pasted into an inline script tag, and then an initialization script that reads the Lottie JSON (either from an embedded variable or a file reference) and calls lottie.loadAnimation with the container, renderer ('canvas'), loop (true or false), autoplay (true), and animationData (the JSON object). Step 5 — Inline the JSON: Open the downloaded .json file in a text editor. Copy the entire content. In your HTML script, create a variable: const animData = [paste JSON here]. Pass animData to the lottie.loadAnimation call. Step 6 — Load in the tool: Open the HTML to MP4 tool. Load your wrapper HTML file. Set the duration to match the Lottie animation's duration (check the LottieFiles preview for the duration in seconds). Set resolution and frame rate. Start the export. Step 7 — Download the MP4: Review the preview and download the file.
Combining Lottie With CSS: Complex Animation Compositions
Some of the most effective motion graphics combine Lottie animations (for complex, illustrative elements) with CSS animations (for typographic and layout elements). The HTML to MP4 tool captures everything rendered in the HTML document, regardless of whether different elements are animated via Lottie or CSS. A practical example: a product announcement animation that uses a Lottie icon animation (a check mark drawing in, or a notification bell ringing) as the hero graphic, combined with CSS-animated text elements that slide in around it. The Lottie handles the complex illustration animation; the CSS handles the clean typographic motion. Timing synchronization: Both Lottie and CSS use requestAnimationFrame under the hood, so both advance correctly on the synthetic clock. Synchronize their start times using animation-delay in CSS and the delay parameter in lottie.loadAnimation for the Lottie element. Layering: Lottie renders either as SVG or canvas. The SVG renderer integrates naturally into the HTML DOM and participates in CSS z-index stacking. The canvas renderer produces a canvas element that also participates in z-index stacking. Either can be placed behind or in front of CSS-animated HTML elements. Transparency: Lottie animations on transparent backgrounds (if the original After Effects animation has a transparent background) export the transparent areas as transparent in SVG renderer mode. When combined with a CSS background, the Lottie illustration sits naturally on top of any background. Loading timing: Lottie animations load their JSON data asynchronously. Ensure the animation is fully initialized before the recording starts by using the lottie onDOMLoaded event to signal readiness to the recording tool. In the HTML wrapper, add a callback that sets a loaded flag when the animation is ready.
Frequently Asked Questions
- Can I export a Lottie animation with a transparent background?
- To export with transparency, you need a video format that supports an alpha channel. MP4 with H.264 does not support transparency. Use a WebM export (if the tool supports it) or export the animation on a solid color background and use chroma keying in your video editor. Alternatively, export as an animated GIF (which does support transparency, though with limited color depth) by converting the MP4 to GIF with a transparency mask tool.
- The Lottie animation plays correctly in the browser but not in the export. Why?
- The most common cause is that the lottie-web library loaded from a CDN URL is blocked in the export context. Ensure the lottie-web JavaScript is inlined in the HTML file (not referenced as an external script). Also verify that the Lottie JSON data is embedded inline as a JavaScript variable rather than loaded from a separate .json file, which may not resolve correctly in the frame-by-frame rendering context.
- What Lottie renderer should I use — SVG or canvas — for best export results?
- Both work, but canvas renderer tends to be more reliable for frame-by-frame capture because html-to-image captures canvas elements directly as pixel data. SVG renderer works well for most animations but some complex SVG filters or blend modes may not render identically in the canvas capture vs. the live browser. If you see rendering differences with SVG renderer, switch to canvas renderer in the lottie.loadAnimation call and compare the output.