Astro's islands architecture makes Lottie integration unique: animations live in client-side islands while the rest of the page stays static HTML. This guide covers every pattern â from basic client components to scroll-triggered animations and the right client:* directive for each use case.
The Astro + Lottie Mental Model
Astro renders everything as static HTML by default. Lottie requires JavaScript. The solution: wrap Lottie in a framework component (React, Vue, Svelte, or vanilla) and load it as an island with client:visible or client:load.
Best directive for Lottie:
client:visible â load and hydrate only when the animation enters the viewport (recommended for most animations)
