Parallax

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

Usage

The Parallax component creates a scrollable container in which ParallaxLayers can be placed or React.Fragments whose only direct children are ParallaxLayers. Because Parallax is a scrollable container all scroll events are fired from the container itself therefore, listening for scroll on window won't work. However, if you want to attach additional events you can use ref.current.container

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.

Ref

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

interface IParallax {
  config: ConfigProp
  horizontal: boolean
  busy: boolean
  space: number
  offset: number
  current: number
  controller: Controller<{ scroll: number }>
  layers: Set<IParallaxLayer>
  container: React.MutableRefObject<any>
  content: React.MutableRefObject<any>
  scrollTo(offset: number): void
  update(): void
  stop(): void
}

Examples

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