Your motion designer ships a 50MB MP4 of kinetic typography for your hero section. You embed it as <video> and hope nobody on a 4G connection visits. Plot twist: there's a 200KB alternative that loads 3 seconds faster, animates smoother, and lets you recolor on the fly without re-rendering. It's called Bodymovin-to-Lottie, and it's the reason Aiden stopped exporting video from After Effects.
Here's the move: After Effects → Bodymovin plugin → JSON → browser via Lottie. Instead of a pre-rendered video file, you get a JSON payload describing every keyframe, layer, and effect. The browser's JavaScript renderer plays it back. Same motion, 1% of the file size, and you can pause, reverse, speed up, or recolor it without touching After Effects. For hero animations, social media cards, or dashboard reveals, this is 10× better than uploading an MP4.
Why MP4 Video Is the Wrong Format for Motion Graphics
Video files are dumb containers. They encode every single frame pixel-by-pixel, whether that frame changes 10% or 100% from the last one. A 5-second kinetic-typography animation at 1080p needs 150 frames × 2.3MB per frame (compressed) = 50MB minimum. You can't recolor the text without re-rendering. You can't skip to a specific frame without decoding the whole file. You can't pause and let it sit — it either plays or it doesn't.
JSON motion files work differently. Bodymovin describes animation as data: layer properties (position, scale, opacity), keyframe timings, cubic-Bezier easing, and effects. A 5-second animation might be 150KB of JSON. Lottie reads it and renders it via Canvas or SVG in real-time. Recolor the text? Change a JSON property. Loop infinitely? One flag. Reverse on hover? Add a trigger. Video can't do that without re-encoding.
The Pipeline: After Effects → Bodymovin → Lottie
Install the Bodymovin plugin in After Effects (free on Adobo Exchange). Build your kinetic-typography animation normally — text layers, position/scale keyframes, easing curves, effects. When it's done, right-click the composition and export → Bodymovin. Out comes a .json file (+ an .html preview).
// Install Lottie in React
npm install react-lottie-player
// Or use the vanilla JS version
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>In your React component, import the JSON and render it with react-lottie-player. The animation plays automatically. Hook it to a ref and control playback (play, pause, reverse, speed) via JavaScript.
import Lottie from 'react-lottie-player';
import animationData from './my-animation.json';
export default function HeroAnimation() {
const lottieRef = useRef(null);
return (
<>
<Lottie
ref={lottieRef}
animationData={animationData}
play
loop
style={{ width: '100%', height: 'auto' }}
/>
<button onClick={() => lottieRef.current?.pause()}>Pause</button>
</>
);
}That's it. Your 50MB video is now 200KB of JSON, interactive, and performant on slow connections.
Performance Budget: JSON vs Video
A typical kinetic-typography animation: 5 seconds, 1080p, 24fps. Video (H.264): 45–55MB. Bodymovin JSON: 150–300KB. Render time on a mid-range phone: video needs 2–5 seconds to buffer and decode; JSON renders instantly. Lottie uses requestAnimationFrame, so motion is smooth at 60fps on any device.
File size matters. At 50MB, only 30% of your users on 4G will fully load the video before scrolling past. At 200KB, it loads before they blink. For a site where hero animation is the first impression, that's the difference between "polished" and "choppy".
Three Real Use Cases
Hero Animation (Load Once, Play Infinitely)
Kinetic typography over a gradient background. Text animates in, pauses, animates out. Bodymovin JSON sits in your repo at 180KB. No video embed. No bandwidth waste. Loop the animation infinitely or trigger it on scroll. Lottie plays it at 60fps across 99% of devices.
Social Media Cards (Recolor Dynamically)
Create one kinetic-typography master animation in After Effects. Export as Bodymovin. For each social card, import the JSON and swap brand colours via the Lottie renderer API. One animation, infinite brand variants. Impossible with video.
Dashboard Reveals (Pause, Play, Speed Up)
When a user completes a workflow step, trigger a celebratory animation. Pause it if they navigate away. Speed it up if they're rushing. Bodymovin JSON + Lottie lets you hook animations to user events. Video is binary: play or don't.
The Catch: Limitation of What After Effects Exports
Not every After Effects effect exports via Bodymovin. Particle systems, some plugins, and complex 3D effects often don't make the cut. Bodymovin handles keyframes, masks, easing, text layers, and most standard effects (blur, glow, distortion). If your animation uses built-in AE features only, you're golden. If you're relying on third-party plugins, test the export first.
Workaround: for complex animations that Bodymovin can't fully export, render a short video clip (2–5 seconds max) and use Bodymovin for the decorative pieces. Combine them on the web. Or switch to Rive, which natively handles more complex vector animations.
FAQs
Can I use Bodymovin animations in production?
Yes. Lottie is battle-tested across 10 million+ apps. Airbnb built and open-sourced it. Use it without hesitation.
What if my JSON file is still 5MB?
Your After Effects composition is bloated. Large image assets or tons of nested precomps inflate the JSON. Simplify the AE file: replace raster images with vector shapes, flatten unnecessary precomps, remove unused layers.
Can I animate SVG text instead of raster text?
Bodymovin exports text as vector outlines by default. Fully scalable, crisp at any resolution. If you need to edit the text in the browser after export, that's trickier — text is baked into the JSON path data.
Does it work on mobile?
Yes. Lottie runs on iOS, Android, web. Performance is excellent on modern devices. Test on older phones (iPhone 11 era) if your audience skews that way — very old phones may stutter at 60fps.
Can I host the JSON file on a CDN?
Yes. Upload the JSON to your CDN or S3, pass the URL to Lottie's src prop. It'll fetch and render the animation. Saves you from bundling the JSON directly.
The Bottom Line
After Effects exports are expensive (bandwidth, encoding time, re-renders on changes). Bodymovin-to-Lottie is the antidote. Export once, render infinitely in the browser at 60fps, in 1% of the file size. For hero animations, social cards, dashboard reveals, or any motion graphic that needs to feel polished, this is the move. Stop uploading video. Start shipping JSON. Grab the full motion design playbook here.