Parallax | BSMNT Scrollytelling

`<Parallax>`

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

Render Props

Prop	Type	Details	Default
`tween`		Tween config	-
`children`	`React.ReactNode`	Children element to animate	-
`disabled`	`boolean`	Disable animation	`false`

Parallax Tween Props

Prop	Type	Details
`start`	`number`	Time where the movement starts relative to the scroll progress
`end`	`number`	Time where the movement ends relative to the scroll progress
`target`	`TweenTarget`	Optional: The target element or elements to apply the animation to
`movementX`	`UnitValue`	Optional: The amount of movement on the X-axis
`movementY`	`UnitValue`	Optional: The amount of movement on the Y-axis

⚠️

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

Usage

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

Example

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

Animation Pin