Parallax

Used in collaboration with Parallax to create visual displacements declaratively and simply.

Usage

Note

This component is only available in the @react-spring/web package and is therefore only usable in the browser.

import { Parallax, ParallaxLayer } from '@react-spring/parallax'

function MyComponent() {
  return (
    <Parallax pages={1} style={{ top: '0', left: '0' }}>
      <ParallaxLayer offset={0} speed={2.5}>
        <p>Parallax</p>
      </ParallaxLayer>
    </Parallax>
  )
}

Reference

All props that can be passed to HTMLDivElement can be passed to Parallax.

Prop	Type	Default
`horizontal`	`boolean`	–
`factor`	`number`	`1`
`offset`	`number`	`0`
`speed`	`number`	`0`
`sticky`	`StickyConfig`	–

Ref

Passing a ref to the ParallaxLayer component will give you access to the layer state of the ParallaxLayer component via ref.current:

interface IParallaxLayer {
  horizontal: boolean
  sticky: StickyConfig
  isSticky: boolean
  setHeight(height: number, immediate?: boolean): void
  setPosition(height: number, scrollTop: number, immediate?: boolean): void
}

type StickyConfig = { start?: number; end?: number } | undefined

Examples

Can't find what you're looking for? Check out all our examples!