lottie-reactExamples
Compositions
Larger pieces built from the same parts.
A scroll story
Prose and animation share one scroll, with the logo growing between panels:
Scroll inside this box
Scroll to grow the logo.
And settle it again.
import { Lottie, LottieInteractions, lottieScrollScrub } from "lottie-react";export function ScrollStory() { return ( <> <p>Scroll to grow the logo.</p> <LottieInteractions interactions={[lottieScrollScrub({ range: [0.2, 0.8] })]} > <Lottie src="/anim.json" /> </LottieInteractions> <p>And settle it again.</p> </> );}An animated button
The label is the animation, played on each save:
import { Lottie, type LottieHandle } from "lottie-react";import { useRef, useState } from "react";export function AnimatedButton() { const handle = useRef<LottieHandle>(null); const [busy, setBusy] = useState(false); const save = () => { setBusy(true); handle.current?.seek(0); handle.current?.play(); setTimeout(() => setBusy(false), 1500); }; return ( <button type="button" disabled={busy} onClick={save}> <Lottie as="span" src="/anim.json" lottieRef={handle} style={{ display: "inline-block", width: 20, height: 20, verticalAlign: "middle", }} />{" "} {busy ? "Saving" : "Save"} </button> );}A loader
The light build, doubled in speed, as a spinner:
import { LottieLight } from "lottie-react";export function Loader() { return ( <LottieLight src="/anim.json" autoplay loop speed={2} style={{ width: 48, height: 48 }} /> );}A themed player
The bar draws in currentColor, so one color recolors the whole player:
import { Lottie, LottieControls, LottieDisplay } from "lottie-react";export function ThemedPlayer() { return ( <Lottie src="/anim.json" autoplay loop style={{ color: "rebeccapurple" }}> <LottieDisplay /> <LottieControls /> </Lottie> );}