Flip Scroll
A scroll-triggered flip animation where elements rotate and transform as you scroll. Creates a dynamic, engaging scroll experience.
Component preview
Install using CLI
npx shadcn@latest add "https://www.obsidianui.dev/r/flip-scroll.json"Install Manually
1
Install dependencies
npm install motion clsx tailwind-merge
2
Copy the source code
Copy into components/block/flip-scroll.tsx
Note: Install via CLI for the full scroll-triggered animation implementation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { image: string }[] | Required | Images to flip through inside a parent with a fixed height |
| mode | 'normal' | 'alternate' | 'normal' | Animation mode |
Last updated on