AnimationsProNew
Sticky Hero Scroll
The first screen is pinned and shrinks with a slight tilt as you scroll, while the next section grows over it. A smooth hand-off between blocks.
Customize
heroColor
gridColor
nextTint
heroTextColor
Based on Sticky Hero Scroll (MIT license) ยท Terms of use
Props
14 properties| Property | Type | Default | Description |
|---|---|---|---|
| hero | ReactNode | โ | Content of the first screen that shrinks and tilts. |
| next | ReactNode | โ | Content of the next section that grows over it. |
| container | RefObject<HTMLElement | null> | โ | Scrolling element when the effect lives inside one. Without it the page scroll is used. |
| height | string | "100vh" | Height of each section, any CSS length. |
| scaleTo | number | 0.8 | Scale the first screen shrinks to. |
| rotate | number | 5 | Tilt in degrees. |
| showGrid | boolean | true | Faint grid behind the sections. |
| heroClassName | string | โ | Classes of the first screen. |
| nextClassName | string | โ | Classes of the next section. |
| heroColor | string | "#ebebeb" | Background of the hero. It darkens slightly towards the top. |
| gridColor | string | "rgba(79, 79, 79, 0.18)" | Colour of the grid lines. |
| nextTint | string | "rgba(255, 255, 255, 0.06)" | Glow at the top of the next section, over its near-black base. |
| heroTextColor | string | "#000000" | Text colour of the hero. Dark, so it reads on the coloured background. |
| className | string | โ | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge