MMridha UI

Sticky Story Scroll

A GSAP ScrollTrigger-powered sticky scroll section. A panel sticks to the viewport while a sequence of content slides scroll past and fade in/out. Ideal for product storytelling and feature walkthroughs.

ReactNext.jsClient ComponentReactGSAP
Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/sticky-story-scroll

Registry endpoint: https://ui.mridha.net/r/sticky-story-scroll.json

Manual Installation

1. Install dependencies

pnpm add gsap

2. Copy the component file

Copy the source from the Code tab above into components/ui/sticky-story-scroll.tsx

3. Import the component

import { StickyStoryScroll } from "@/components/ui/sticky-story-scroll";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <StickyStoryScroll />
    </main>
  );
}

Dependencies

gsap

Accessibility

  • All content in sticky slides is readable without scrolling in assistive technologies.
  • Does not remove items from the accessibility tree during animation.
  • Reduced motion disables the scroll-driven animation — content displays statically.

Performance

  • GSAP ScrollTrigger is cleaned up on component unmount.
  • Uses GSAP context for safe cleanup in React Strict Mode.
  • Avoid nesting multiple sticky sections on the same page.