Chapter 54: Scroll animations in JavaScript with scroll()

Core Idea

Animate on scroll with Motion's 5.1kb scroll() function. Bind any value directly to scroll progress, hardware-accelerated by the browser's ScrollTimeline.

Key Concepts

• Callbacks: scroll() can accept a callback function.
• Animation: scroll() can also accept animations created with the animate() function.
• Scroll axis: By default
• Track element scroll: scroll() tracks window scroll by default.
• Track element position: We can track the progress of an element as it moves within a container by passing its ref
• Scroll offsets: With the offset option we can define which parts of the target we want to track within the container
• Pinning: To use the browser for best performance
• Scroll information: By passing a callback with a second info argument
• Cancel animation: scroll() returns a cleanup function.

Code Examples

import { scroll } from "motion"

• What it demonstrates: Core usage pattern for Scroll animations in JavaScript with scroll().

Key Takeaways

1. Scroll animations in JavaScript with scroll() supports Callbacks.
2. Scroll animations in JavaScript with scroll() supports Animation.
3. Scroll animations in JavaScript with scroll() supports Scroll axis.

Connects To

• animate(): related Motion doc page.
• inView: related Motion doc page.
• Layout animations: related Motion doc page.
• Parallax example & tutorial for JavaScript: related Motion doc page.