framer-motion-scroll

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();

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

useScroll Options

const { scrollYProgress } = useScroll({
  target: ref,
  offset: ["start end", "end start"],
  container: containerRef
});

Offset Format

"start end" where each can be: start, center, end, or percentage.

Combination	Meaning
["start end", "end start"]	While element visible
["start 100%", "end -100%"]	While scrolling down
[0, 1]	Entire document scroll

useTransform

Map one motion value to another:

const { scrollYProgress } = useScroll();

const scale = useTransform(scrollYProgress, [0, 1], [1, 2]);
const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0, 1, 0]);

return <motion.div style={{ scale, opacity }} />;

Multi-step Transforms

const x = useTransform(
  scrollYProgress,
  [0, 0.3, 0.6, 1],
  [0, -50, 50, 0]
);

Disable Clamping

const x = useTransform(
  scrollYProgress,
  [0, 1],
  [0, 100],
  { clamp: false }
);

Parallax Effect

Different scroll speeds for depth:

function ParallaxSection() {
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });

  const y = useTransform(scrollYProgress, [0, 1], [100, -100]);

  return (
    <motion.div ref={ref} style={{ y }}>
      Parallax Content
    </motion.div>
  );
}

Scroll Progress Bar

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

  return (
    <motion.div
      style={{
        scaleX: scrollYProgress,
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        height: 4,
        backgroundColor: "#00ff00",
        transformOrigin: "0%"
      }}
    />
  );
}

useInView with Variants

Trigger animation when entering viewport:

import { useInView, motion } from "framer-motion";
import { useRef } from "react";

function FadeInSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
      transition={{ duration: 0.6 }}
    >
      Content
    </motion.div>
  );
}

useInView Options

Prop	Type	Default	Description
once	boolean	false	Only trigger once
margin	string	"0px"	Offset for trigger
amount	"any" | "all" | number	"any"	Visibility threshold

Best practices

• ✅ Use useScroll with useTransform for scroll-linked animations.
• ✅ Use whileInView for simple scroll-triggered animations.
• ✅ Use proper offset values to control start/end.
• ✅ Use transformOrigin for scale animations.

Do Not

• ❌ Use scroll animations without offset values.
• ❌ Forget to set height on scroll containers for horizontal scroll.
• ❌ Animate layout properties for scroll effects.
• ❌ Use useInView without once: true for entrance animations.

Learn More

https://www.framer.com/motion/use-scroll/ https://www.framer.com/motion/use-transform/ https://www.framer.com/motion/use-in-view/