Parallax Scroll

Y parallax scrubbed to scroll position with optional offset.

Parallax with offset

Installation

Requires MotionProvider and gsap. Add the parallax scroll component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/parallax-scroll.json

Usage

import { ParallaxScroll } from "@/void/scroll/parallax-scroll"

<ParallaxScroll distance={120} offset={12} laneHeightVh={100}>
  <Card />
</ParallaxScroll>

Examples

Default

Parallax with offset

Code

import { ParallaxScroll } from "@/void/scroll/parallax-scroll"

<ParallaxScroll distance={120} offset={12} laneHeightVh={100}>
  <Card />
</ParallaxScroll>