Nhatcapdang
Scroll

Section Sticky

A sticky section component that creates a layered scroll effect where sections stack on top of each other with scaling animations.

Usage

Installation

npx shadcn@latest add @nhatcapdang/section-sticky
yarn dlx shadcn@latest add @nhatcapdang/section-sticky
pnpm dlx shadcn@latest add @nhatcapdang/section-sticky

Props

PropTypeDefaultDescription
childrenReact.ReactNode[]-Array of React nodes to be displayed as sticky sections

Features

  • Layered Stacking: Each section sticks to the top while the next section slides over it
  • Scale Animation: Sections scale from 0.8 to 1.0 as they come into view
  • Smooth Transitions: Uses Framer Motion for buttery smooth animations
  • Responsive Design: Works seamlessly across different screen sizes
  • Customizable Positioning: Each section has a slight vertical offset for visual depth

On this page