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