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