Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
lottie-flight-scroll-demo
Every jar on this page took one whole summer.
Orchard Blossom
01
Lavender Row
02
Goldenrod
03
Late Sunflower
04
Linden Bloom
05
Pollen Hour
06
Thanks for following the bees all the way down.
import { LottieFlightScroll } from "@/registry/tween/lottie-flight-scroll"
export function LottieFlightScrollDemo() {
return <LottieFlightScroll />
}
Installation
Usage
import { LottieFlightScroll } from "@/components/ui/lottie-flight-scroll"<LottieFlightScroll
lottiePath="/bee.json"
items={[
{ image: "/harvest/orchard.jpg", title: "Orchard Blossom" },
{ image: "/harvest/lavender.jpg", title: "Lavender Row" },
]}
background="#f5c63c"
/>How it works
A sticky overlay the height of the viewport sits above the page. It holds two copies of the same looping Lottie: the character and a shadow (brightness(0), blurred, half opacity). A scrubbed ScrollTrigger maps the gallery section from top top to bottom bottom onto a 0 to 1 flight progress:
- Horizontal position samples 11 keyframes (offsets of up to 40% of the width from centre) with smoothstep easing.
- Vertical position samples 6 keyframes from just above the top edge to just below the bottom edge.
- Tilt comes from the horizontal direction a little ahead on the path, clamped to ±14°.
- The shadow is offset further, scaled up and faded as
sin(drop × π)rises, so the character seems highest mid-flight.
Sizes come from the overlay, not the window, so the flight fits the preview. The trigger is rebuilt when the scroller resizes. With prefers-reduced-motion: reduce the Lottie does not play and the character rests mid-path.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
lottiePath | string | "/lottie-flight-scroll/bee.json" | Looping Lottie JSON (svg renderer). |
items | LottieFlightItem[] | 6 remote items | Gallery items { image, title, index? }. |
introTitle | ReactNode | default copy | Heading before the gallery. |
outroTitle | ReactNode | default copy | Heading after the gallery. |
size | number | 125 | Character size in px. |
shadowSize | number | 115 | Shadow size in px. |
background | string | "#f5c63c" | Page background. |
foreground | string | "#1c1406" | Text color. |
fontFamily | string | DM Sans stack | Font for all text. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller. |