lottie-reactReference
Interactions API
The wrapper, the hook, the two factories, and the contract for yours.
import { Lottie, LottieInteractions, lottieInView } from "lottie-react";export function InView() { return ( <LottieInteractions interactions={[lottieInView()]}> <Lottie src="/anim.json" loop /> </LottieInteractions> );}LottieInteractions
| Prop | Type | Behaviour |
|---|---|---|
lottie | LottieInstance | The animation to drive. Omit it around or inside <Lottie>. |
interactions | readonly LottieInteraction[] | The behaviours, each made by a factory. Read declaratively: edit the list and behaviours attach and detach to match. |
children | ReactNode | Rendered untouched; the component renders no element of its own. |
useLottieInteractions(lottie, interactions) is the same attachment for the hook path.
lottieInView(options)
| Option | Type | Behaviour |
|---|---|---|
once | boolean | Play on the first entry, then stop watching. Default off. |
amount | number | How much must be visible to count as entered, 0 to 1. Default 0. |
margin | string | Grows or shrinks the measured viewport, in rootMargin grammar: px or % only. |
lottieScrollScrub(options)
| Option | Type | Behaviour |
|---|---|---|
range | [number, number] | The stretch of the element's journey mapped onto the animation, as fractions. Default the whole journey. |
axis | "block" | "inline" | The journey's axis. Default block. |
onRangeEnter | (direction, lottie) => void | Fires entering the band, with "forward" or "backward". |
onRangeLeave | (direction, lottie) => void | Fires leaving the band, same directions. |
Writing your own
LottieInteraction is { attach, options }; attach(context, options) returns its cleanup and reads lottie, options(), onChange and memory from the context.
Both types are exported, and Writing your own teaches the contract.