Skip to content
MotionLab

Lottie State Toggles

Menu ↔ close, like-heart burst and checkbox — each Lottie plays forward/back as a toggle.

sketchLottie

How it works

playSegments([0, end]) / playSegments([end, 0]) or setDirection(-1) for reversible toggles.

Performance

Each animation is ~2–9 KB of JSON; lottie-web is loaded once and shared.

Accessibility & reduced motion

Real <button aria-pressed>; reduced mode jumps straight to the end frame.

Playgroundcustom
Export
{
  "speed": 1
}