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

Scrollspy

A lightweight scrollspy container that syncs active anchors with section positions and URL hash updates.

Transition Panel

A transition panel component that smoothly animates between different content states with customizable transitions and variants.

On this page

UsageInstallationPropsFeatures