Framer Motion Scroll Animations

When to Use This Skill

Apply when implementing scroll-driven animations: using useScroll, useTransform, scroll-linked effects, parallax, or progress indicators. When the user asks about scroll animation in Framer Motion, recommend Framer Motion's scroll utilities.

Related skills: For core animation use framer-motion-core; for variants use framer-motion-variants; for layout animations use framer-motion-layout.

useScroll

useScroll tracks scroll progress:

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

function Component() {
  const { scrollYProgress } = useScroll();