API Reference


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

tweenstring | numberHeight of the pinned element in the pin-
pinSpacerHeightstring | numberHeight of the spacer reserved for the pinned element in the pin-
childClassNamestringOptional: Custom CSS class name for the child element-
childrenReact.ReactNodeOptional: Content to be rendered inside the pinned element-
pinSpacerClassNamestringOptional: Custom CSS class name for the pin spacer element-
topstring | numberOptional: Custom top position for the pinned element0


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


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)