Scroll
Parallax Scroll 1
A parallax scroll effect component that creates a smooth sliding animation with text overlays at the top and bottom as the content scrolls into view.
Usage
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content to display with parallax effect |
offset | ['start center', 'center start'] | ['center', 'center'] | ['center', 'center'] | Scroll offset for triggering the animation |
Features
- Smooth parallax effect: Content slides up with spring physics as you scroll
- Text overlays: Bold text at top and bottom creates a layered visual effect
- Spring animation: Uses configurable spring stiffness, damping, and mass for natural motion
- Scroll-linked: Animation progress tied to scroll position
- Customizable offset: Control when the parallax effect starts and ends
Animated Number
A smooth animated number component that transitions between numeric values with customizable spring animations using Framer Motion.
Parallax Scroll 3
A multi-column parallax gallery component that creates smooth scrolling effects with different speeds for each column, enhanced with Lenis smooth scrolling.