Sticky Scroll

Sticky scroll with GSAP ScrollTrigger.

Documentation

pnpm dlx @t7blocks/cli add sticky-scroll

Usage

import { StickyScroll } from "@/components/T7blocks/StickyScroll";

export default function Home() {
  return (
    <main>
      <StickyScroll />
    </main>
  );
}

Properties

Property	Type	Default	Description
images	StickyImage[]	DEFAULT_IMAGES	Array of images to display in the sticky sections
enableScale	boolean	false	Whether to enable scaling animation on the images
title	string	"ScrollTrigger"	Title text for the hero section
fontClassName	string	instrument.className	Custom font class for the title

Inspiration

This component is inspired by Sticky Scroll by MadeByKing

Sticky Scroll

Documentation

Usage

Properties

Inspiration

Related resources

Scroll Image Pass