scroll

scroll() creates scroll-linked animations. It uses the ScrollTimeline API for best performance, including hardware-accelerated animations when possible.

Note: scroll() is a new function in active development based on upcoming browser APIs. React users are recommended to use useScroll() for currently missing features like element tracking.

#Usage

#Import

Import scroll from "framer-motion":

// React
import { scroll } from "framer-motion"

// Universal
import { scroll } from "framer-motion/dom"

#Callbacks

scroll() can accept a callback function. This callback will be called when scroll changes with the latest progress value, between 0 and 1.

scroll(progress => console.log(progress))

#Animation

scroll() can also accept animations created with the animate() function.

scroll(
  animate("div", { transform: ["none", "rotate(90deg)"] })  
)

Browsers that support the ScrollTimeline API will use this to run supported animations off the main thread.

#Scroll direction

By default, vertical scroll is tracked. By providing an axis: "x" option, it can instead track horizontal scrolling.

scroll(callback, { axis: "x" })

#Element scroll

scroll() tracks window scroll by default. It can also track the scroll of an Element, by passing it in via the source option.

scroll(callback, { source: document.getElementById("scroller") })

#Cancel scroll animation

scroll() returns a cleanup function. Call this to cancel the scroll animation.

const cancel = scroll(callback)

cancel()

#Options

#source: Element

The source element to track.

scroll(
  (progress) => console.log(progress),
  { source: document.getElementById("carousel") }  
)

#axis: "x" | "y"

The axis of scroll to track. Defaults to "y".

scroll(
  (progress) => console.log(progress),
  { axis: "x" }  
)

#Examples

#Window scroll progress

#Element scroll progress

#Video scroll scrub