Framer Motion Scroll

C-Jeril/framer-motion-skills/skills/framer-motion-scroll

by C-Jeril837d7268fc4a3cf5b1f8904616ec97c7485e3edaMIT8 starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 6 months ago

Official Framer Motion skill for scroll-linked animations — useScroll, useTransform, scroll-triggered animations, parallax. Use when building scroll-driven animations, parallax effects, progress indicators, or when asking about Framer Motion scroll, useScroll, or scroll-linked animations.

Instructions onlySoftware Development

AI-generated overview

Reference guide for building scroll-linked animations with Framer Motion's useScroll, useTransform, and useInView hooks.

What it does: Provides instructions and code examples for implementing scroll-driven animations in Framer Motion, covering useScroll progress tracking, useTransform value mapping, parallax effects, scroll progress bars, and useInView viewport triggers. It includes option tables, offset format explanations, and best-practice and anti-pattern lists. It produces guidance and example code rather than runnable artifacts.
When to use it: Use when implementing scroll-linked or scroll-triggered animations in a React project using Framer Motion, such as parallax sections, progress indicators, or entrance animations. Also useful when answering questions about useScroll, useTransform, or useInView.
Requirements: Requires a React project with the framer-motion package installed. No scripts, credentials, or network access are needed; the skill is instructions only.

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:

jsx

import { useScroll, useTransform } from "framer-motion";
function Component() {  const { scrollYProgress } = useScroll();
  return (    <motion.div      style={{ scaleX: scrollYProgress }}    />  );}

import { useScroll, useTransform } from "framer-motion";
function Component() {  const { scrollYProgress } = useScroll();
  return (    <motion.div      style={{ scaleX: scrollYProgress }}    />  );}

useScroll Options

jsx

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

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.

useTransform

Map one motion value to another:

jsx

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 }} />;

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

Disable Clamping

Parallax Effect

Different scroll speeds for depth:

jsx

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

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

jsx

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%"      }}    />  );}

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:

jsx

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

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

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/

Source and attribution

Source:C-Jeril/framer-motion-skillsinskills/framer-motion-scrollat commit837d726

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

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

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

Framer Motion Scroll

Framer Motion Scroll Animations

When to Use This Skill

useScroll

useScroll Options

Offset Format

useTransform

Multi-step Transforms

Disable Clamping

Parallax Effect

Scroll Progress Bar

useInView with Variants

useInView Options

Best practices

Do Not

Learn More

Source and attribution

More from C-Jeril/framer-motion-skills

Framer Motion Variants

Framer Motion Gestures

Framer Motion React

Framer Motion Layout

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices