Lottie vs Video: Which Is Right for Web Animation?

A designer hands over a beautiful animation: a logo that draws itself, an icon that bounces when tapped, or a product demo that loops in the hero. The developer then has to decide how to put it on the site. That decision is Lottie vs video, and the wrong choice shows up as a blurry logo, a heavy page or an animation that looks different from the one the designer made.

Here is how to decide, based on what each format is and what it is good at.

What each format is

Lottie. The Lottie documentation describes it as "a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively." In plain terms, a designer animates in After Effects, exports the animation as a data file of shapes and keyframes, and a small player draws it live in the browser. On the web, the lottie-web player can render to SVG, canvas or HTML.

Because the animation is drawn rather than played back, vector shapes stay sharp at any size, and the player's methods let code control it: play, pause, set the speed, reverse the direction or go to a specific frame.

Video. A video file is a sequence of frames, compressed. It can contain anything a camera or 3D renderer can produce: footage, photographs, lighting, textures, particles. web.dev recommends the HTML video element with "autoplay loop muted playsinline" for silent looping clips, and providing both WebM and MP4 sources so each browser can pick one it supports.

When Lottie is the better choice

• Logos and brand marks in motion. Flat shapes and lines stay crisp on every screen. Our post on logo animation covers how to design these.
• Icons and interface feedback. A heart that fills when tapped, a checkmark after a form submits, a loading indicator.
• Animations that respond to the user. Because playback is controlled in code, a Lottie can follow scroll position, play on hover or switch states on a click.
• Illustrations made of flat shapes that need to scale from phone to desktop without a second file.

When video is the better choice

• Anything photographic or filmed. Product footage, people, places.
• 3D renders with lighting, reflections and texture. A Lottie cannot recreate a rendered product shot.
• Long or detailed motion. Many layers of complex vector shapes can become heavy to draw every frame; a video's playback cost does not depend on how many layers the original scene had.
• Effects Lottie does not support. The Lottie supported-features table marks merge paths as unsupported in all three web renderers, and shows a question mark against luma mattes on the web. If the designer used After Effects features outside that table, the export may not match.

Performance: where each one costs

Neither format is automatically lighter. They cost in different places.

Lottie costs CPU while it plays. The player library has to load, the animation data has to be parsed, and every frame is drawn by the browser. A simple icon is trivial. A full-screen illustration with hundreds of shapes, masks and gradients can keep the main thread busy and make taps feel slow, which shows up in Interaction to Next Paint.

Video costs bandwidth up front. A long or high-resolution clip is a big download. A hero video also counts toward Largest Contentful Paint: web.dev's LCP documentation says that for video elements "the poster image load time or first frame presentation time for videos is used," whichever is earlier. If the video is your hero, give it a small, well-compressed poster image so there is something to show before the clip arrives.

Practical rules:

• Keep Lottie files for small and medium elements, and test large ones on a mid-range phone.
• Load the Lottie player only on pages that use it.
• Compress video, keep loops short, and size it for the space it fills.
• Do not autoplay several heavy animations at once above the fold.

Our guide to website animation performance covers how to test both for dropped frames.

Accessibility for both

• Pause control. WCAG 2.2 requires a way to pause, stop or hide moving content that starts automatically, lasts more than five seconds and plays alongside other content. A looping hero video or Lottie needs a visible pause button.
• Reduced motion. Respect the operating system's reduced-motion setting by showing a still frame or a simpler version.
• Meaning. If the animation carries information, describe it. The lottie-web player accepts a title and description in its renderer settings for the SVG output, and a video can have a caption or text alternative nearby.

Lottie vs video: a decision rule you can use

Ask these questions in order:

1. Is it photographic, filmed or a lit 3D render? Use video.
2. Must it respond to scroll, hover, taps or app state? Use Lottie.
3. Is it a logo, icon or flat illustration that must stay sharp at any size? Use Lottie.
4. Does the After Effects file use effects outside Lottie's supported list? Simplify the animation or use video.
5. Is it full-screen and complex? Test both versions on a phone, and keep the one that plays smoothly and loads faster.

Three quick cases. A CPA firm's logo that draws itself in the header: question 3, Lottie. A restaurant's hero loop of a dish being plated: question 1, video. An explainer illustration for a software product that advances as the visitor scrolls: question 2, Lottie, with a check against question 4 before the designer starts.

Common mistakes

• Exporting everything as Lottie because it is the design team's default, including scenes that are really footage.
• Exporting a logo animation as video, then seeing it soften on large screens, when a few vector shapes would have stayed sharp.
• No fallback for when the script fails to load. Show a static image.
• Skipping the design check. Preview the exported Lottie in a browser before handing it to development, because unsupported effects fail quietly.

How Pinn.Media handles motion

In our own goal-planning app, progress is shown as a climb up a painted mountain, so motion is part of the product itself. We design motion with the export format in mind from the first sketch, so what you approve is what ships. If you have animations ready and are not sure how to put them on your site, book a discovery call.