Framer Motion

by mindrally97184105b5daNo license269 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 5 weeks ago

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

Instructions onlySoftware Development

AI-generated overview

Guidelines for building performant Framer Motion (Motion) animations in React and TypeScript applications.

What it does: Provides expert coding guidelines for animating React interfaces with the Framer Motion / Motion library. It covers correct imports, hardware-accelerated properties, will-change usage, variants, layoutId shared transitions, springs, memoization, reduced-motion accessibility, gestures, scroll-linked animation, exit animations and performance debugging. The deliverable is guidance and code patterns rather than generated files.
When to use it: Use it when implementing or reviewing animations in a React project that uses Framer Motion or Motion. It suits tasks such as adding page transitions, staggered lists, gesture feedback or scroll effects while keeping animation performance and accessibility in mind.
Requirements: No scripts or assets ship with the skill; it is instructions only. Applying it assumes a React project with the Motion package installed and TypeScript, plus browser and React DevTools for performance debugging.

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

Source and attribution

Source:mindrally/skillsinframer-motionat commit9718410

License: No license

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

Report or request removal

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

Source and attribution

More from mindrally/skills

Zustand State Management

Zod Schema Validation

Woocommerce

Wordpress

Websocket Development

Web Development

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices