Send the developer a file, not a video

A designer animates a neat loading spinner in After Effects, exports an MP4, and sends it to the developer. It cannot be used, and the reasons are worth listing because they are the whole argument.

A video has a fixed size, so it blurs when scaled. It has a background, so it cannot sit on a coloured surface. Its colours are baked in, so it cannot follow a dark theme. It cannot be paused at a meaningful state, cannot be looped seamlessly at an arbitrary point, and cannot be driven by what the user is doing. And a three-second 1080p MP4 is a few hundred kilobytes where the same animation described as vectors is around ten.

The animation was not wrong. The file was.

The formats, and what each one is for

Lottie. A JSON file that describes vector shapes and keyframes, played live by a small runtime on web, iOS and Android. It scales to any size, can be recoloured in code, can be played, paused, reversed and scrubbed, and is tiny. Exported from After Effects with the Bodymovin / LottieFiles plugin. This is the standard answer for icons, illustrations, loaders and empty-state animations.

CSS and SVG animation. For anything simple — a transition, a spinner, a hover state, a line drawing itself with stroke-dasharray. No library, no file, nothing to load. Build the SVG in Inkscape (free) or Figma's free tier and animate it in the stylesheet.

Rive. A competing runtime built around state machines, so the motion responds to input rather than playing a fixed clip. Worth knowing about when the animation needs to react.

Video. Correct for anything photographic, anything long, and anything using real footage. Not a defeat, just a different job.

Animated WebP or APNG. When it must be raster and must loop without a player.

Two things that decide whether it works

The performance detail that decides whether it stutters

Animate transform and opacity. Those two can usually be handled by the browser's compositor without recalculating the page layout or repainting pixels.

Animating width, height, top, left, margin or box-shadow forces the browser to redo layout or paint on every single frame. On your laptop it looks fine. On a four-year-old Android phone it drops to something visibly juddery. This is the most common cause of web animation that works in the demo and fails on real devices.

So: to move something, use transform: translateX(), not left. To resize it, use transform: scale(), not width.

Lottie's honest limits

Lottie exports shape layers and their keyframes. It is not a renderer for After Effects.

Most effects do not export — glows, blurs, distortions, layer styles, 3D layers, many blend modes, and expressions beyond a supported subset. They vanish silently. The export succeeds, the file plays, and the glow is simply not there. If you embed a raster image to work around this, the file size goes from kilobytes to hundreds of kilobytes and you have lost the main advantage.

The way to work with this is to keep the exporter's supported-feature list open while you animate, not to animate freely and export at the end. Build the glow as a shape with a gradient rather than as an effect. And test in the actual player on an actual device — the preview on the authoring site is not the same renderer as the one in the app.

Handover hygiene, and reduced motion

What to send

Name your layers. The developer will see those names.
Deliver at the size it will be used, or design it to be size-independent.
State the frame rate and the duration in the filename or a note.
Provide a static first frame as a fallback, for when the player fails or the animation is switched off.
Say explicitly whether it loops, plays once, or waits for an event.

Reduced motion is not optional

A meaningful number of people turn on a system setting called "reduce motion" because animation makes them physically unwell. Vestibular disorders are real, and the triggers are large movements, parallax, and anything that zooms.

In CSS, wrap non-essential motion so it degrades to a fade:

css

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

Better than that blanket version is to write reduced alternatives deliberately for the animations that matter. Lottie players can be gated on the same media query. Native apps expose an equivalent flag.

This is accessibility, and it costs you about five minutes.

One thing to try

Take an animation you have already delivered as a video. Ask whether a developer could change its colour, pause it halfway, or place it on a dark background. If the answer is no to all three, it was the wrong file, and rebuilding it as vectors is a short afternoon.

Before you move on

A designer builds an icon animation in After Effects using a glow effect and a track matte, exports it as a Lottie JSON, and the developer reports that the glow is simply missing in the app. Why?

Pick the one you would defend. Nobody sees your answer.