\n \n\n \n\n \n\n \n \n \n \n )\n}\n```\n\n## Parallax\n\n| Property | Type | Description |\n| ----------- | ------------- | -------------------------------------------------------------------------------------------------------- |\n| pages | number | Total space of the container. Each page takes up 100% of the viewport. |\n| config? | SpringConfig | The spring behavior. Defaults to `config.slow` (see [configs](https://react-spring.dev/common/configs)). |\n| enabled? | boolean | Whether or not the content can be scrolled. Defaults to `true`. |\n| horizontal? | boolean | Whether or not the container scrolls horizontally. Defaults to `false`. |\n| innerStyle? | CSSProperties | CSS object to style the inner `Parallax` wrapper (not the scrollable container) |\n\n### `ref` Properties\n\n`Parallax` also has a few useful properties that you can access using a `ref`:\n\n```jsx\nconst ref = useRef()\n...\n\n```\n\n#### `ref.current.scrollTo`\n\nA function for click-to-scroll. It takes one paramater: the number of the page to scroll to. Pages are zero-indexed, so `scrollTo(0)` will scroll to the first page, `scrollTo(1)` to the second, etc.\n\n#### `ref.current.container`\n\nThe `ref` for the outer container `div` of `Parallax`, for when you need access to the actual DOM Element.\n\n**NOTE**: since it is also a `ref`, it must be accessed with `ref.current.container.current`.\n\n#### `ref.current.content`\n\nThe `ref` for the inner container `div` of `Parallax`.\n\n### Usage Notes\n\n- All direct `children` of `Parallax` must be `ParallaxLayer`s (or `fragment`s whose only direct `children` are `ParallaxLayer`s).\n- `Parallax` is a scrollable container so all scroll events are fired from the container itself -- listening for scroll on `window` won't work (but you _can_ use `ref.current.container`).\n\n## ParallaxLayer\n\n| Property | Type | Description |\n| ----------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| factor? | number | Size of the layer relative to page size (eg: `1` => 100%, `1.5` => 150%, etc). Defaults to `1`. |\n| offset? | number | The offset of the layer when it's corresponding page is fully in view (eg: `0` => top of 1st page, `1` => top of 2nd page, etc ). Defaults to `0`. |\n| speed? | number | Rate at which the layer moves in relation to scroll. Can be positive or negative. Defaults to `0`. |\n| horizontal? | boolean | Whether or not the layer moves horizontally. Defaults to the `horizontal` value of `Parallax` (whose default is `false`). |\n| sticky? | StickyConfig | If set, the layer will be 'sticky' between the two offsets. All other props are ignored. Default: `{start?: number = 0, end?: number = start + 1}` |\n\n### Usage Notes\n\n- The `offset` prop is where the layer will end up, not where it begins. For example, if a layer has an offset of `1.5`, it will be halfway down the second page (zero-indexed) when the second page completely fills the viewport.\n- The `speed` prop will affect the initial starting position of a layer, but not it's final `offset` position.\n- Any layer with `sticky` set will have a `z-index` higher than regular layers. This can be changed manually.\n\n## Demos\n\n- [Parallax - vertical](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/parallax-vert)\n- [Parallax - horizontal](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/parallax)\n- [Parallax - sticky](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/parallax-sticky)\n","readmeFilename":"README.md"}