Framer Motion

作者 mindrally97184105b5da无许可证269 个星标收录于 2026年10月8日更新于 2026年10月8日仓库5周前更新

Expert guidelines for building performant animations with Framer Motion/Motion library in React applications

仅含说明Software Development

AI 生成的概览

在 React 与 TypeScript 应用中使用 Framer Motion（Motion）构建高性能动画的指导规范。

功能: 提供使用 Framer Motion / Motion 库为 React 界面制作动画的专家级编码规范。内容涵盖正确的导入方式、可硬件加速的属性、will-change 用法、variants、layoutId 共享元素过渡、弹簧动画、记忆化、减少动态效果的无障碍支持、手势、滚动联动动画、退出动画以及性能调试。产出是指导与代码模式，而非生成的文件。
适用场景: 在实现或审查使用 Framer Motion 或 Motion 的 React 项目动画时使用。适合添加页面过渡、交错列表、手势反馈或滚动效果等任务，同时兼顾动画性能与无障碍。
运行要求: 该技能不附带脚本或资源，仅为说明性指导。应用时需具备已安装 Motion 包的 React 项目与 TypeScript，并使用浏览器和 React DevTools 进行性能调试。

Framer Motion / Motion Animation Guidelines

You are an expert in Framer Motion (now Motion), React, and TypeScript. Follow these guidelines when creating animations.

Core Principles

Import from the Correct Package

Use import { motion } from "motion/react" for React projects (not "framer-motion" - this is outdated)
The library was renamed from Framer Motion to Motion
Always use the latest Motion API

Performance-First Approach

Animate transform properties (x, y, scale, rotate) and opacity for best performance
These properties can be hardware-accelerated and don't trigger layout recalculations
Avoid animating properties that cause layout shifts like width, height, top, left, margin, padding

Hardware Acceleration

Use will-change Properly

tsx

// When animating transforms<motion.div  style={{ willChange: "transform" }}  animate={{ x: 100, y: 50, scale: 1.2 }}/>
// When animating other GPU-accelerated properties<motion.div  style={{ willChange: "opacity, transform" }}  animate={{ opacity: 0.5, x: 100 }}/>

// When animating transforms<motion.div  style={{ willChange: "transform" }}  animate={{ x: 100, y: 50, scale: 1.2 }}/>
// When animating other GPU-accelerated properties<motion.div  style={{ willChange: "opacity, transform" }}  animate={{ opacity: 0.5, x: 100 }}/>

Properties to Add to willChange

transform - for x, y, scale, rotate, skew
opacity - for opacity animations
filter - for blur, brightness, etc.
clipPath - for clip-path animations
backgroundColor - for background color transitions

Animation Best Practices

Use Variants for Complex Animations

tsx

const containerVariants = {  hidden: { opacity: 0 },  visible: {    opacity: 1,    transition: {      staggerChildren: 0.1    }  }};
const itemVariants = {  hidden: { y: 20, opacity: 0 },  visible: { y: 0, opacity: 1 }};

const containerVariants = {  hidden: { opacity: 0 },  visible: {    opacity: 1,    transition: {      staggerChildren: 0.1    }  }};
const itemVariants = {  hidden: { y: 20, opacity: 0 },  visible: { y: 0, opacity: 1 }};

Use layoutId for Shared Element Transitions

Prefer spring Animations

tsx

// Springs feel more natural than duration-based animations<motion.div  animate={{ x: 100 }}  transition={{ type: "spring", stiffness: 300, damping: 30 }}/>

// Springs feel more natural than duration-based animations<motion.div  animate={{ x: 100 }}  transition={{ type: "spring", stiffness: 300, damping: 30 }}/>

React Integration

Memoization for Performance

tsx

// Memoize animation variantsconst variants = useMemo(() => ({  hidden: { opacity: 0 },  visible: { opacity: 1 }}), []);
// Memoize callbacksconst handleAnimationComplete = useCallback(() => {  // handler logic}, []);

// Memoize animation variantsconst variants = useMemo(() => ({  hidden: { opacity: 0 },  visible: { opacity: 1 }}), []);
// Memoize callbacksconst handleAnimationComplete = useCallback(() => {  // handler logic}, []);

Avoid Inline Style Objects

tsx

// Bad - creates new object on every render<motion.div style={{ willChange: "transform" }} />
// Good - define outside or memoizeconst style = { willChange: "transform" };<motion.div style={style} />

// Bad - creates new object on every render<motion.div style={{ willChange: "transform" }} />
// Good - define outside or memoizeconst style = { willChange: "transform" };<motion.div style={style} />

Accessibility

Respect Reduced Motion Preferences

tsx

import { useReducedMotion } from "motion/react";
function Component() {  const shouldReduceMotion = useReducedMotion();
  return (    <motion.div      animate={{ x: shouldReduceMotion ? 0 : 100 }}      transition={{ duration: shouldReduceMotion ? 0 : 0.3 }}    />  );}

import { useReducedMotion } from "motion/react";
function Component() {  const shouldReduceMotion = useReducedMotion();
  return (    <motion.div      animate={{ x: shouldReduceMotion ? 0 : 100 }}      transition={{ duration: shouldReduceMotion ? 0 : 0.3 }}    />  );}

Gesture Animations

Use Gesture Props Correctly

tsx

<motion.button  whileHover={{ scale: 1.05 }}  whileTap={{ scale: 0.95 }}  transition={{ type: "spring", stiffness: 400, damping: 17 }}/>

<motion.button  whileHover={{ scale: 1.05 }}  whileTap={{ scale: 0.95 }}  transition={{ type: "spring", stiffness: 400, damping: 17 }}/>

Scroll Animations

Use useScroll for Scroll-Linked Animations

tsx

import { useScroll, useTransform, motion } from "motion/react";
function ParallaxComponent() {  const { scrollYProgress } = useScroll();  const y = useTransform(scrollYProgress, [0, 1], [0, -100]);
  return <motion.div style={{ y }} />;}

import { useScroll, useTransform, motion } from "motion/react";
function ParallaxComponent() {  const { scrollYProgress } = useScroll();  const y = useTransform(scrollYProgress, [0, 1], [0, -100]);
  return <motion.div style={{ y }} />;}

Exit Animations

Use AnimatePresence for Exit Animations

tsx

import { AnimatePresence, motion } from "motion/react";
<AnimatePresence mode="wait">  {isVisible && (    <motion.div      key="modal"      initial={{ opacity: 0 }}      animate={{ opacity: 1 }}      exit={{ opacity: 0 }}    />  )}</AnimatePresence>

import { AnimatePresence, motion } from "motion/react";
<AnimatePresence mode="wait">  {isVisible && (    <motion.div      key="modal"      initial={{ opacity: 0 }}      animate={{ opacity: 1 }}      exit={{ opacity: 0 }}    />  )}</AnimatePresence>

Common Patterns

Staggered List Animation

tsx

<motion.ul  initial="hidden"  animate="visible"  variants={{    visible: { transition: { staggerChildren: 0.07 } }  }}>  {items.map((item) => (    <motion.li      key={item.id}      variants={{        hidden: { opacity: 0, y: 20 },        visible: { opacity: 1, y: 0 }      }}    />  ))}</motion.ul>

<motion.ul  initial="hidden"  animate="visible"  variants={{    visible: { transition: { staggerChildren: 0.07 } }  }}>  {items.map((item) => (    <motion.li      key={item.id}      variants={{        hidden: { opacity: 0, y: 20 },        visible: { opacity: 1, y: 0 }      }}    />  ))}</motion.ul>

Page Transitions

tsx

const pageTransition = {  initial: { opacity: 0, x: -20 },  animate: { opacity: 1, x: 0 },  exit: { opacity: 0, x: 20 },  transition: { duration: 0.3 }};

const pageTransition = {  initial: { opacity: 0, x: -20 },  animate: { opacity: 1, x: 0 },  exit: { opacity: 0, x: 20 },  transition: { duration: 0.3 }};

Performance Debugging

Use React DevTools to inspect re-renders
Use Chrome DevTools Performance tab to identify animation jank
Target 60fps minimum, 120fps on high refresh rate displays
Test on actual devices, especially mid-range Android phones

来源与署名

来源：mindrally/skills位于framer-motion提交9718410

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Framer Motion

Framer Motion / Motion Animation Guidelines

Core Principles

Import from the Correct Package

Performance-First Approach

Hardware Acceleration

Use will-change Properly

Properties to Add to willChange

Animation Best Practices

Use Variants for Complex Animations

Use layoutId for Shared Element Transitions

Prefer spring Animations

React Integration

Memoization for Performance

Avoid Inline Style Objects

Accessibility

Respect Reduced Motion Preferences

Gesture Animations

Use Gesture Props Correctly

Scroll Animations

Use useScroll for Scroll-Linked Animations

Exit Animations

Use AnimatePresence for Exit Animations

Common Patterns

Staggered List Animation

Page Transitions

Performance Debugging

来源与署名

更多来自 mindrally/skills 的技能

Zustand State Management

Zod Schema Validation

Woocommerce

Wordpress

Websocket Development

Web Development

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices