Framer Motion Scroll

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

作者 C-Jeril837d7268fc4a3cf5b1f8904616ec97c7485e3edaMIT8 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫6 個月前更新

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.

僅含說明Software Development

AI 產生的概覽

使用 Framer Motion 的 useScroll、useTransform 與 useInView 鉤子打造捲動連動動畫的參考指南。

功能: 提供在 Framer Motion 中實作捲動驅動動畫的說明與程式碼範例，涵蓋 useScroll 進度追蹤、useTransform 數值對應、視差效果、捲動進度列，以及 useInView 視窗觸發。內容包含選項表格、offset 格式說明，以及最佳實務與反面模式清單。產出的是指引與範例程式碼，而非可直接執行的成品。
適用情境: 適用於在 React 專案中以 Framer Motion 實作捲動連動或捲動觸發動畫的情境，例如視差區塊、進度指示器或進場動畫。也適合用來回答關於 useScroll、useTransform 或 useInView 的問題。
執行需求: 需要已安裝 framer-motion 套件的 React 專案。不需要指令碼、憑證或網路存取；此技能僅為說明性內容。

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/

來源與署名

來源：C-Jeril/framer-motion-skills位於skills/framer-motion-scroll提交837d726

授權條款： MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

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

來源與署名

更多來自 C-Jeril/framer-motion-skills 的技能

Framer Motion Variants

Framer Motion Gestures

Framer Motion React

Framer Motion Layout

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices