API Reference


Parallax component applies a parallax effect (opens in a new tab) to its children using GSAP animations.

Render Props

tweenTween config-
childrenReact.ReactNodeChildren element to animate-
disabledbooleanDisable animationfalse

Parallax Tween Props

startnumberTime where the movement starts relative to the scroll progress
endnumberTime where the movement ends relative to the scroll progress
targetTweenTargetOptional: The target element or elements to apply the animation to
movementXUnitValueOptional: The amount of movement on the X-axis
movementYUnitValueOptional: The amount of movement on the Y-axis

Keep in mind that either movementX or movementY are required for the Parallax to work


import * as Scrollytelling from "@bsmnt/scrollytelling";
export const HomePage = () => (
        start: 0,
        end: 100,
        movementY: { value: 40, unit: "px" },
      <p>This text will move on scroll</p>


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