framer-motion

Name: framer-motion
Availability: InStock
Author: haotool

Optimize Framer Motion animations in React applications to reduce runtime jank.

2|Updated Oct 12, 2025

Search Tags:#refactoring #react #framer-motion #bundle-size #animation-performance #motion-optimization #render-prevention

Ready to run

npx skills add https://github.com/haotool/app --skill framer-motion-haotool

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: framer-motion
Source: https://github.com/haotool/app/tree/main/.agents/skills/framer-motion
Command: npx skills add https://github.com/haotool/app --skill framer-motion-haotool

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Framer Motion animations can incur performance costs if not implemented with best practices and careful optimization.

Core Features & Use Cases

Performance guidelines for bundle size, re-render reduction, and efficient motion patterns across transitions, gestures, and SVG animations.
Category-prioritized rules to guide automated refactoring and code generation.
Practical examples and reference rules to apply during development, review, or migration.

Quick Start

Apply these guidelines when implementing or reviewing Framer Motion animations in a React project to ensure efficient, high-performance motion.

Frequently Asked Questions about framer-motion

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

FAQPage Schema

How do I optimize Framer Motion animations in React to reduce jank?▼

To optimize Framer Motion animations and reduce runtime jank, apply deterministic refactoring rules to motion components, gestures, and layout transitions. This improves runtime performance by enforcing bundle-size considerations and re-render prevention without altering user-visible behavior.

Why does Framer Motion cause re-renders and how can I prevent them?▼

Framer Motion causes re-renders when animation states trigger unnecessary React component updates. Prevent these re-renders by applying category-prioritized rules for efficient motion patterns during development or review, ensuring smooth transitions without visual side effects.

Can I use this to refactor scroll-linked effects and SVG animations?▼

Yes, you can refactor scroll-linked effects and SVG animations. The optimization guidelines cover motion components across web interfaces, applying performance rules to transitions, gestures, and SVG animations to reduce bundle size and improve speed.

What's the best way to reduce bundle size when using Framer Motion?▼

The best way to reduce Framer Motion bundle size is to follow performance guidelines for bundle size considerations during code generation and refactoring. This ensures efficient motion patterns are applied across transitions and gestures.

Does optimizing Framer Motion animations alter user-visible behavior?▼

No, optimizing Framer Motion animations does not alter user-visible behavior. The refactoring process focuses on re-render prevention and animation performance optimization while strictly maintaining the original visual output and interactions.