skills.rest
yahav123147
yahav123147COMMUNITY
Explore all skills by this author →
GitHub

framer-motion-best-practices

Review and refactor React components using Framer Motion APIs for performance and correctness.

1|Updated Apr 13, 2026
Search Tags:#react#performance optimization#svg animation#layout transitions#framer motion#gesture handling#scroll-linked animations
One-click install
npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill framer-motion-best-practices-yahav123147
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: framer-motion-best-practices
Source: https://github.com/yahav123147/paid-ads-cro-skills/tree/main/skills/framer-motion-best-practices
Command: npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill framer-motion-best-practices-yahav123147

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps prevent janky, inefficient, and unstable Framer Motion animations by enforcing performance-first patterns that reduce re-renders, bundle size, layout thrashing, and scroll/gesture stutter.

Core Features & Use Cases

  • Performance & bundle optimization: prefers LazyMotion, m components, and minimal feature bundles to reduce initial payload.
  • Re-render prevention for animation stability: uses Motion Values, stable callbacks, memoized variants, and stable animate inputs to avoid animation restarts.
  • Smooth visual rendering: prioritizes GPU-friendly properties like transform, opacity, and filter, and avoids paint-triggering animations.
  • Layout and shared transitions that scale: applies layout, layoutDependency, LayoutGroup, layoutId, and layoutScroll to keep FLIP-based transitions correct in complex UIs.
  • Scroll and gesture correctness: uses useScroll, useSpring, scroll offsets/targets, and gesture props like whileHover/whileTap for responsive interactions.
  • SVG animation quality: recommends motion-specific SVG components and techniques such as pathLength and point-count matching for morphing.

Quick Start

Use framer-motion-best-practices to refactor the React Framer Motion code in your component for smoother animations and fewer re-renders.

Frequently Asked Questions about framer-motion-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why do my Framer Motion animations keep restarting and causing re-render loops?▼

Framer Motion animations restart when animate props or variants change identity every render. Use Motion Values, memoized variants, and stable callbacks to prevent unnecessary re-renders and stabilize animation playback.

How do I reduce bundle size when using Framer Motion in a React app?▼

Reduce Framer Motion bundle size by using LazyMotion and m components instead of standard motion elements. This loads minimal feature bundles asynchronously to decrease your initial JavaScript payload.

What's the best way to handle scroll-linked animations without stuttering?▼

Handle scroll-linked animations smoothly by using useScroll and useSpring hooks. Configure scroll offsets and targets correctly to maintain responsiveness and avoid gesture stutter.

How do I fix janky layout transitions in complex React UIs?▼

Fix janky layout transitions by applying layout, layoutDependency, and LayoutGroup props. Ensure correct FLIP-based transitions by managing layoutId and layoutScroll to maintain visual stability across complex shared elements.

Does animating CSS properties like width and height cause performance issues in Framer Motion?▼

Animating width and height triggers layout thrashing and paint events. Prioritize GPU-friendly properties like transform, opacity, and filter to ensure smooth visual rendering and avoid janky animations.

How do I animate SVG morphing correctly with Framer Motion?▼

Animate SVG morphing correctly by using motion-specific SVG components and matching point counts across paths. Utilize pathLength for consistent stroke animations and ensure point-count matching for reliable morphing.

Related Skills

Explore More Software Engineering Skills→
47thtechcorner47thtechcorner
21

framer-motion

Implement Disney's 12 animation principles with Framer Motion in React.

Community
Intermediate
rsmdtrsmdt
381

performance-profiling

Diagnose performance issues by profiling CPU, memory, and I/O metrics.

Community
Advanced
CJHarmathCJHarmath

react-performance

Reduce unnecessary React re-renders with memoization and list virtualization.

Community
Intermediate
KamalabotKamalabot

waapi

Create native WAAPI animations with deterministic timing within HyperFrames.

Community
Intermediate