lottie-rive-vector-animationlisted

<!-- last-verified: 2026-07 --> # Lottie/dotLottie and Rive: vector animation Both tools play back animation authored visually by a designer (After Effects + Bodymovin/LottieFiles export, or the Rive editor) rather than animation coded by hand. Neither is a general UI-transition tool — see the use-case boundary below before reaching for either. ## dotLottie is now the default, not lottie-web `lottie-web` is on maintenance mode — it still works but isn't where new capability lands. For new work, default to **dotLottie** (`@lottiefiles/dotlottie-web`): - WASM/Rust runtime built on **ThorVG**, rendering via **WebGL2/WebGPU** where available. The plain `DotLottie` class renders on the **main thread**; for **off-main-thread rendering**, use the separate `DotLottieWorker` class instead. That off-main-thread mode is why it outperforms lottie-web's SVG/Canvas main-thread rendering, especially with multiple animations on one page. - The `.lottie` file format itself is a zip container (JSON + assets), smaller and easier to distribute than raw Lottie JSON, though the runtime plays both. - Only reach for `lottie-web` specifically when a project already depends on its plugin ecosystem (e.g. certain expression interactivity) that dotLottie hasn't ported yet — check before assuming, don't default to lottie-web out of habit. ```js import { DotLottie } from '@lottiefiles/dotlottie-web'; const dotLottie = new DotLottie({ canvas: document.querySelector('#animation'),