import { formatFrontmatterToRemixMeta } from '../helpers/meta'

export const meta = formatFrontmatterToRemixMeta(frontmatter)

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

import { TablesConfiguration } from '../components/Tables/TablesConfig' import { USE_SCROLL_CONFIG_DATA } from '../data/fixtures'

Typescript

function useScroll(configuration: ConfigObject): SpringValues

Where ConfigObject is described above

Examples

import { ExampleGrid } from '../components/Grids/ExampleGrid'

<ExampleGrid sandboxTitles={['Scrolling Wave']} />

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