How to create scroll-linked and scroll-triggered animations in Framer Motion.

There are two predominant types of scroll animations, both of which can be achieved with Framer Motion.

Scroll-linked animations are when the progress of an animation is directly tied to scroll progress. Scroll-triggered animations are when a normal animation is triggered when an element enters or leaves the viewport.

Scroll-linked animations

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

import { motion, useScroll } from "framer-motion"

function Component() {
  const { scrollYProgress } = useScroll();
  
  return (
    <motion.div style={{ scaleX: scrollYProgress }} />  
  )
}