verve vs Lottie

A player for an After Effects animation, versus code that animates your own component.

What Lottie is

Lottie is a format, not an editor. A designer builds an animation in After Effects, the Bodymovin plugin exports it as JSON, and a player library renders that JSON at runtime as SVG, canvas or HTML. It is open, it is everywhere, and the same file plays on web, iOS and Android.

Use Lottie, not verve, if

A designer is handing you an After Effects file. That is the workflow Lottie was built for, and nothing else comes close at it.
The animation is illustration — a mascot, a loading character, a celebration — rather than your interface moving.
You need the same animation on web, iOS and Android from one artifact.
The motion is complex drawing: shape morphs, masks, hundreds of layers. That is After Effects' home ground and it is not ours.

Use verve if

The thing you want to animate is a component you already built, and it should keep its own markup, classes and theme.
You would rather ship a few lines of Motion, GSAP or CSS than a JSON file and a player to read it.
The motion is interface motion — an entrance, a hover, a panel, a list — where the values matter more than the drawing.
You want the animation to live in your repository, in a diff, next to the component it belongs to.

Side by side

What	Lottie	verve
What you leave with	A .json (or .lottie) file	Motion, GSAP or CSS source, in your own files
What ships in your bundle	A player library, which reads the JSON at runtime	Motion or GSAP if you export those; nothing at all for CSS
What gets animated	Artwork the player draws into SVG, canvas or HTML	Your own DOM — the component keeps its markup and styles
Where it is authored	After Effects, then exported	In the browser, on the rendered component
Editing it later	Back to After Effects and re-export the file	Edit the values in the code, or reopen the animation
Inheriting your theme	No — the artwork carries its own colours	Yes — it is your element, so your CSS still applies

What you end up writing

Lottie, in a React app — plus the .json the designer exported

import Lottie from "lottie-react";
import badge from "./badge.json";

export function Badge() {
  return <Lottie animationData={badge} loop={false} />;
}

verve's Motion export for the same 600ms entrance

import { motion } from "motion/react";

export function Badge() {
  return (
    <motion.div
      initial={{ y: 16, opacity: 0 }}
      animate={{ y: 0, opacity: [0, 1] }}
      transition={{
        y: { type: "spring", stiffness: 260, damping: 24, mass: 1, restDelta: 0.01, restSpeed: 0.01 },
        opacity: { duration: 0.3, times: [0, 1], ease: "easeOut" },
      }}
    >
      {/* your component here */}
    </motion.div>
  );
}

Check it yourself

Every claim above about Lottie is answerable from their own documentation. If one of them goes out of date, it is a bug on this page and we would like to know.

Open the editor All comparisons