useScroll

A small utility abstraction around our signature useSpring hook. It's a great way to create a scroll-linked animation. With either the raw value of distance or a 0-1 progress value. You can either use the scroll values of the whole document, or just a specific element.

Usage

The example below will start off with an opacity of 0 but when the user scrolls to the bottom of the page it will have reached an opacity of 1.

import { useScroll, animated } from '@react-spring/web'

function MyComponent() {
  const { scrollYProgress } = useScroll()

  return (
    <animated.div style={{ opacity: scrollYProgress }}>
      Hello World
    </animated.div>
  )
}

Reference

Prop	Type	Default
`container`	`React.MutableRefObject<HTMLElement>`	–
`delay`	`number \| function`	–
`immediate`	`boolean \| function`	–
`reset`	`boolean`	–
`reverse`	`boolean`	–
`pause`	`boolean`	–
`ref`	`SpringRef`	–
`config`	`object \| function`	`object`
`events`	`function`	–

Typescript

function useScroll(configuration: ConfigObject): SpringValues

Where ConfigObject is described above

Examples

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