What are Scroll animations in Motion?

Scroll Animation are those types of animations that are triggered or controlled by the user's scroll behavior.

There are 2 types of scroll animations:

• Scroll-triggered : An animation gets triggers when an element enters or leaves the viewport.
• Scroll-linked : Values are linked directly to scroll progress.

Scroll-triggered animations

Scroll-triggered animations are normal animations that are fired when an element enters the viewport. For this, Motion offers whileInView prop to set an animation target.

<motion.div 
  initial={{ opacity: 0, y: 100 }}
  whileInView={{ opacity: 1, y: 0 }}
/>

One time Animations

The animation gets triggered whenever the element enters or leaves the viewport.
We can use viewport prop, and set { once: true } to run the animation just once.

<motion.div 
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true }}
/>

Changing Scroll Container

By default, The element is said to be within the viewport if it enters/leaves the browser window. Here, the browser window is the scroll container.

In order to change the scroll container, you can provide a ref to another scrollable container. For example -

export function ChangeScrollContainer() {
  const scrollContainerRef = useRef(null)

  return (
    <div ref={scrollContainerRef} style={{ overflow: "scroll" }}>
      <motion.div 
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ root: scrollContainerRef }}
      />
    </div>
  )
}

Setting State

You can also set states when any element (not just a motion component) enters or leaves the viewport using useInView hook.

Scroll-linked Animations

Scroll-linked animations are created using motion values and the useScroll hook.

useScroll Hook returns four motion values,

Two of them store scroll offset in pixels (scrollX and scrollY).

The Other two store scroll progress as a value between 0 and 1 (scrollXProgress and scrollYProgress).

These motion values could be passed to specific styles to animate an element.

For example, we can pass scrollYProgress to scaleX to form a progressbar.

const { scrollYProgress } = useScroll();

return (
  <motion.div style={{ scaleX: scrollYProgress }} />  
)

You can also use progress motion values like scrollYProgress to smoothen its value using useSpring hook and use it to mix between any values like colors using useTransform hook.