Most motion designers hand over an MP4 and stop. Most developers accept it and stop. Then the page scores 34 on Lighthouse and nobody connects the two events.
Here is how to choose, from the position of building both halves.
The three options
MP4 / WebM. A video file. Pixels, baked.
Lottie. JSON describing vector shapes and keyframes, drawn at runtime. Exported from After Effects via Bodymovin.
Rive. Like Lottie, but authored in its own tool, with a state machine so it can respond to input.
The decision, in one pass
Is it photographic, 3D-rendered, or does it have complex effects (glow, blur, particles)? → Video. Lottie will either drop those effects silently or produce a JSON file bigger than the video.
Is it flat vector, under ~15 seconds, and purely decorative? → Lottie. Usually 10–50KB against several megabytes, scales to any resolution, and stays crisp on a 4K display.
Does it need to react — hover, scroll, click, loading state, success state? → Rive. This is the only one of the three that was designed for it.
The mistakes I see most
Autoplaying a 1080p video in the hero. It is the single largest asset on the page, it competes with everything else for bandwidth during the exact moment the user decides whether to stay, and on mobile it often does not autoplay at all — so they get a black box.
If you must: preload="none", a real poster image, muted, playsinline, and cap it at 720p. Nobody is inspecting your hero loop for detail.
Exporting a Lottie with effects on it. Bodymovin does not support most After Effects effects. It does not error. It just omits them, and you find out in the browser.
Design for Lottie from the first keyframe: shape layers, transforms, trim paths, opacity. That is the supported set.
Shipping a 3MB Lottie. This happens when someone converts an illustration with thousands of paths. At that size the video was the better choice. Check the file size before you hand it over — if the JSON is over ~500KB, reconsider.
Not respecting prefers-reduced-motion. A looping hero animation can be genuinely unpleasant for people with vestibular disorders. It is a two-line media query and it is not optional.
@media (prefers-reduced-motion: reduce) {
.hero-loop { animation: none; }
}
What I actually do
Hero: Rive or CSS, if it needs to react. A short, well-compressed WebM with a poster if it is a real showreel.
Feature sections: Lottie, lazily loaded, playing only when scrolled into view. There is no reason to download and play an animation that is 2000px below the fold.
Product demos: video, always. Screen recordings are photographic content and vectorising them is a losing fight.
The handoff that saves everyone a week
If you are the designer, give the developer:
- The animation in the right format for its job
- The file size, stated up front
- Whether it loops, and how many times
- What it should do under
prefers-reduced-motion - A poster frame
That list takes five minutes and removes the entire back-and-forth.
I build the animation and the front end, which is largely why this list exists. Tell me what the page has to do.