Scroll
Scroll Opposite
A scroll-driven animation component that moves two columns in opposite directions as you scroll, creating a dynamic visual effect.
Usage
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode[] | - | Array of elements to display (split evenly between columns) |
height | string | - | Height of the container with unit (e.g., "300px", "20rem") |
className | string | - | Additional CSS classes for the container |
Features
- Opposite scroll directions: Left column moves down while right column moves up
- Automatic splitting: Children array is automatically split in half between columns
- Flexible height: Supports any CSS unit (px, rem, vh, etc.)
- Scroll-linked animation: Animation progress tied to scroll position (30%-70% of viewport)
- Smooth motion: Powered by Motion for fluid, performant animations
Scroll Active Section
A powerful scroll-based component that displays content on the left side while showing an active item preview on the right. Perfect for showcasing features, timelines, or step-by-step processes.
Scroll Progress
A scroll progress indicator component that displays a visual progress bar and percentage as users scroll through content.