Pin | BSMNT Scrollytelling

`<Pin>`

The Pin component enables pinning an element in its initial position while the remaining content scrolls. It ensures that the pinned element stays fixed at its starting position within the active duration of Scrollytelling.

Render Props

Prop	Type	Details	Default
`tween`	`string \| number`	Height of the pinned element in the pin	-
`pinSpacerHeight`	`string \| number`	Height of the spacer reserved for the pinned element in the pin	-
`childClassName`	`string`	Optional: Custom CSS class name for the child element	-
`children`	`React.ReactNode`	Optional: Content to be rendered inside the pinned element	-
`pinSpacerClassName`	`string`	Optional: Custom CSS class name for the pin spacer element	-
`top`	`string \| number`	Optional: Custom top position for the pinned element	`0`

Usage

import * as Scrollytelling from "@bsmnt/scrollytelling";
 
export const HomePage = () => (
  <Scrollytelling.Root>
    <Scrollytelling.Pin childHeight={0} pinSpacerHeight={"100vh"} top={0}>
      <section className="section">
        <div className="wrapper">
          <h1>Layered pinning 1</h1>
        </div>
      </section>
    </Scrollytelling.Pin>
  </Scrollytelling.Root>
);

Example

https://stackblitz.com/edit/react-ts-kittrj (opens in a new tab)

With horizontal scrolling:

https://stackblitz.com/edit/stackblitz-starters-fx6y3a (opens in a new tab)

Parallax Stagger