framer-motion

Malicious tool definition detected

Tool: SKILL.md Description: --- name: framer-motion description: Framer Motion performance optimization guidelines.

Malicious tool definition detected

Tool: assets/templates/_template.md Description: --- title: Rule Title Here impact: MEDIUM impactDescription: quantified impact (e.g., "2-10x improvement", "eliminates re-renders") tags: category-prefix, technique, related-concept --- ## Rule Title Here Brief explanation (1-3 sentences) of WHY this matters.

Malicious tool definition detected

Tool: metadata.json Description: { "name": "framer-motion", "version": "1.0.3", "organization": "Community", "technology": "Framer Motion", "date": "January 2026", "abstract": "Comprehensive performance optimization guide for Framer Motion animations in React applications, designed for AI agents and LLMs.

Malicious tool definition detected

Tool: references/_sections.md Description: # Sections This file defines all sections, their ordering, impact levels, and descriptions.

Malicious tool definition detected

Tool: references/anim-hardware-acceleration.md Description: --- title: Leverage Automatic Hardware Acceleration impact: HIGH impactDescription: 60fps during heavy JS vs 0fps when main thread blocked tags: anim, hardware-acceleration, gpu, performance, main-thread --- ## Leverage Automatic Hardware Acceleration Motion automatically hardware-accelerates transform and opacity animations, running them on the compositor thread.

Malicious tool definition detected

Tool: references/anim-independent-transforms.md Description: --- title: Animate Transforms Independently impact: HIGH impactDescription: enables different easing and duration per transform vs single timing for all tags: anim, transform, independent, timing, easing --- ## Animate Transforms Independently Motion allows animating `x`, `y`, `scale`, and `rotate` as independent values with their own timing.

Malicious tool definition detected

Malicious tool definition detected

Malicious tool definition detected

Tool: references/anim-transform-properties.md Description: --- title: Animate Transform Properties Instead of Layout Properties impact: HIGH impactDescription: 60fps vs 15-30fps with layout thrashing tags: anim, transform, layout, performance, reflow --- ## Animate Transform Properties Instead of Layout Properties Transform properties (x, y, scale, rotate) are GPU-accelerated and bypass the browser's layout engine.

Malicious tool definition detected

Tool: references/anim-will-change.md Description: --- title: Use willChange Prop Judiciously impact: HIGH impactDescription: reduces paint time when used correctly tags: anim, will-change, optimization, memory, gpu --- ## Use willChange Prop Judiciously The `willChange` prop hints to the browser that an element will animate, allowing it to optimize ahead of time.

Malicious tool definition detected

Tool: references/bundle-dom-animation.md Description: --- title: Use domAnimation for Basic Animations impact: CRITICAL impactDescription: 17kb smaller than domMax tags: bundle, feature-selection, dom-animation, performance --- ## Use domAnimation for Basic Animations The `domMax` feature bundle includes layout animations, drag, and pan gestures which many apps do not need.

Malicious tool definition detected

Tool: references/bundle-dynamic-features.md Description: --- title: Dynamically Import Motion Features impact: CRITICAL impactDescription: defers 150kb chunk until after hydration tags: bundle, dynamic-import, code-splitting, performance --- ## Dynamically Import Motion Features Static imports of motion features block hydration even when animations are not immediately visible.

Malicious tool definition detected

Tool: references/bundle-lazy-motion.md Description: --- title: Use LazyMotion and m Component Instead of motion impact: CRITICAL impactDescription: reduces bundle from 34kb to <5kb tags: bundle, lazy-loading, tree-shaking, performance --- ## Use LazyMotion and m Component Instead of motion The `motion` component includes all animation features by default, adding 34kb to your bundle.

Malicious tool definition detected

Tool: references/bundle-strict-mode.md Description: --- title: Enable Strict Mode to Catch Accidental motion Imports impact: HIGH impactDescription: prevents 30kb+ bundle regressions tags: bundle, strict-mode, lazy-motion, dev-experience --- ## Enable Strict Mode to Catch Accidental motion Imports When using LazyMotion, developers might accidentally import `motion` instead of `m`, silently adding the full 34kb bundle.

Malicious tool definition detected

Tool: references/bundle-use-animate-mini.md Description: --- title: Use Mini useAnimate for Simple Cases impact: HIGH impactDescription: 2.3kb vs 17kb for hybrid approach tags: bundle, use-animate, mini, imperative-animations --- ## Use Mini useAnimate for Simple Cases When you only need imperative animations without the declarative features of motion components, use `useAnimate` from `framer-motion/mini`.

Malicious tool definition detected

Tool: references/exit-animate-presence.md Description: --- title: Wrap Conditional Renders with AnimatePresence impact: LOW impactDescription: enables exit animations for unmounting components tags: exit, animate-presence, unmount, conditional --- ## Wrap Conditional Renders with AnimatePresence React immediately removes components from the DOM when conditionally rendered out.

Malicious tool definition detected

Tool: references/exit-mode-wait.md Description: --- title: Use mode="wait" for Sequential Page Transitions impact: LOW impactDescription: prevents overlapping content during page transitions tags: exit, mode-wait, page-transition, routing --- ## Use mode="wait" for Sequential Page Transitions By default, `AnimatePresence` renders entering and exiting elements simultaneously, causing layout overlap during transitions.

Malicious tool definition detected

Tool: references/exit-unique-keys.md Description: --- title: Provide Unique Keys for AnimatePresence Children impact: LOW impactDescription: prevents wrong animations on list changes tags: exit, keys, animate-presence, list --- ## Provide Unique Keys for AnimatePresence Children `AnimatePresence` uses React keys to track which elements enter and exit.

Malicious tool definition detected

Tool: references/gesture-drag-constraints.md Description: --- title: Use dragConstraints Ref for Automatic Boundaries impact: MEDIUM impactDescription: automatic boundary calculation, handles resize and scroll tags: gesture, drag, dragConstraints, ref, boundaries --- ## Use dragConstraints Ref for Automatic Boundaries The `dragConstraints` prop accepts a ref to a parent element, automatically calculating boundaries based on the container's dimensions.

Malicious tool definition detected

Tool: references/gesture-drag-elastic.md Description: --- title: Configure dragElastic for Natural Drag Feel impact: MEDIUM impactDescription: improved drag feel with elastic overshoot tags: gesture, drag, dragElastic, momentum, UX --- ## Configure dragElastic for Natural Drag Feel The `dragElastic` prop controls how much the element can be dragged past its constraints before snapping back.

Malicious tool definition detected

Tool: references/gesture-tap-cancel.md Description: --- title: Use onTapCancel for Interrupted Gesture Cleanup impact: MEDIUM impactDescription: prevents stuck states on interrupted gestures tags: gesture, onTapCancel, onTap, cleanup, state-management --- ## Use onTapCancel for Interrupted Gesture Cleanup When a tap gesture is interrupted (pointer leaves element or becomes a drag), `onTap` never fires.

Malicious tool definition detected

Tool: references/gesture-variants-flow.md Description: --- title: Let Gesture Variants Flow to Children impact: MEDIUM impactDescription: reduces gesture prop duplication tags: gesture, variants, propagation, children, whileHover --- ## Let Gesture Variants Flow to Children Variants automatically propagate to children, so gesture states like `whileHover` flow down the component tree.

Malicious tool definition detected

Tool: references/gesture-while-props.md Description: --- title: Use whileHover/whileTap Instead of Event Handlers impact: MEDIUM impactDescription: eliminates state updates and re-renders during gestures tags: gesture, whileHover, whileTap, performance, event-handlers --- ## Use whileHover/whileTap Instead of Event Handlers Framer Motion's `whileHover` and `whileTap` props are optimized internally to update styles without triggering React re-renders.

Malicious tool definition detected

Tool: references/layout-dependency.md Description: --- title: Use layoutDependency to Limit Layout Measurements impact: HIGH impactDescription: reduces layout calculations by 90%+ tags: layout, performance, layoutDependency, FLIP --- ## Use layoutDependency to Limit Layout Measurements By default, layout animations measure element position on every render.

Malicious tool definition detected

Tool: references/layout-group.md Description: --- title: Group Related Layout Animations with LayoutGroup impact: HIGH impactDescription: batches measurements, prevents layout shift between components tags: layout, LayoutGroup, coordination, batch --- ## Group Related Layout Animations with LayoutGroup When multiple components have layout animations that should coordinate, wrap them in `LayoutGroup`.

Malicious tool definition detected

Tool: references/layout-id-shared.md Description: --- title: Use layoutId for Shared Element Transitions impact: HIGH impactDescription: 10× less code for cross-component transitions tags: layout, layoutId, shared-element, transition --- ## Use layoutId for Shared Element Transitions When an element should visually transition from one component to another (like a list item expanding to a modal), use matching `layoutId` props.

Malicious tool definition detected

Tool: references/layout-position-size.md Description: --- title: Use layout="position" or "size" for Targeted Animations impact: HIGH impactDescription: animates only what changes, faster transitions tags: layout, performance, position, size, optimization --- ## Use layout="position" or "size" for Targeted Animations When only position OR size changes (not both), use `layout="position"` or `layout="size"` instead of `layout={true}`.

Malicious tool definition detected

Tool: references/layout-scroll.md Description: --- title: Add layoutScroll to Scrollable Ancestors impact: HIGH impactDescription: fixes layout animations in scroll containers tags: layout, layoutScroll, scroll, container --- ## Add layoutScroll to Scrollable Ancestors Layout animations calculate element positions relative to the viewport.

Malicious tool definition detected

Tool: references/rerender-animate-prop.md Description: --- title: Use Stable Animate Values to Prevent Animation Restarts impact: CRITICAL impactDescription: prevents animation restart on unrelated re-renders tags: rerender, animate, variants, object-reference, restart --- ## Use Stable Animate Values to Prevent Animation Restarts Passing dynamic objects directly to the animate prop creates new references on every render, causing Framer Motion to restart the animation.

Malicious tool definition detected

Tool: references/rerender-motion-value-event.md Description: --- title: Use Motion Value Events Instead of useEffect impact: CRITICAL impactDescription: avoids syncing motion values to React state, eliminating re-renders tags: rerender, motion-value, onChange, useEffect, events --- ## Use Motion Value Events Instead of useEffect Motion values provide event callbacks (onChange, onAnimationStart, onAnimationComplete) that execute outside React's render cycle.

Malicious tool definition detected

Tool: references/rerender-motion-value.md Description: --- title: Use useMotionValue Instead of useState for Animated Values impact: CRITICAL impactDescription: eliminates re-renders on every animation frame (60+ renders/sec to 0) tags: rerender, motion-value, useState, performance, animation-frame --- ## Use useMotionValue Instead of useState for Animated Values Motion values update the DOM directly without triggering React re-renders.

Malicious tool definition detected

Tool: references/rerender-stable-callbacks.md Description: --- title: Keep Animation Callbacks Stable with useCallback impact: CRITICAL impactDescription: prevents child component re-renders on parent state changes tags: rerender, useCallback, callbacks, memoization, children --- ## Keep Animation Callbacks Stable with useCallback Inline callback functions create new function references on every render, breaking memoization of child components and causing unnecessary re-renders.

Malicious tool definition detected

Tool: references/rerender-use-transform.md Description: --- title: Derive Values with useTransform Instead of useEffect impact: CRITICAL impactDescription: avoids React render cycle entirely for derived animations tags: rerender, useTransform, useEffect, derived-values, performance --- ## Derive Values with useTransform Instead of useEffect useTransform creates derived motion values that update synchronously with their source, completely bypassing React's render cycle.

Malicious tool definition detected

Tool: references/rerender-variants-object.md Description: --- title: Define Variants Outside Component or with useMemo impact: CRITICAL impactDescription: prevents new object reference each render triggering animation restarts tags: rerender, variants, useMemo, object-reference, stability --- ## Define Variants Outside Component or with useMemo Defining variants objects inside a component creates new object references on every render.

Malicious tool definition detected

Tool: references/scroll-container-ref.md Description: --- title: Track Scroll Within Specific Containers Using container Option impact: MEDIUM-HIGH impactDescription: enables scroll tracking in nested scrollable elements tags: scroll, container, useScroll, nested, overflow --- ## Track Scroll Within Specific Containers Using container Option By default, useScroll tracks the page scroll.

Malicious tool definition detected

Tool: references/scroll-element-tracking.md Description: --- title: Track Specific Elements Entering Viewport with useScroll target impact: MEDIUM-HIGH impactDescription: 5× less code than manual IntersectionObserver tags: scroll, useScroll, target, viewport, intersection-observer --- ## Track Specific Elements Entering Viewport with useScroll target The useScroll hook accepts a target ref to track a specific element's position relative to the viewport.

Malicious tool definition detected

Tool: references/scroll-offset-configuration.md Description: --- title: Configure Scroll Offsets for Precise Animation Triggers impact: MEDIUM-HIGH impactDescription: precise animation trigger control tags: scroll, offset, useScroll, viewport, trigger --- ## Configure Scroll Offsets for Precise Animation Triggers The offset option in useScroll defines when scroll progress starts (0) and ends (1) relative to the target element and viewport.

Malicious tool definition detected

Tool: references/scroll-use-scroll.md Description: --- title: Use useScroll Hook for Scroll-Linked Animations impact: MEDIUM-HIGH impactDescription: avoids blocking main thread with scroll listeners tags: scroll, useScroll, scroll-event, performance, motion-value --- ## Use useScroll Hook for Scroll-Linked Animations The useScroll hook returns motion values that update via the browser's native ScrollTimeline API, enabling hardware-accelerated animations that remain smooth even during heavy JavaS

Malicious tool definition detected

Tool: references/scroll-use-spring-smooth.md Description: --- title: Smooth Scroll Animations with useSpring impact: MEDIUM-HIGH impactDescription: eliminates jittery scroll-linked animations with physics-based smoothing tags: scroll, useSpring, scrollYProgress, smooth, easing --- ## Smooth Scroll Animations with useSpring Raw scroll progress values change abruptly with each scroll event, causing jittery animations especially on trackpads or during fast scrolling.

Malicious tool definition detected

Tool: references/spring-damping-ratio.md Description: --- title: Configure Damping to Control Oscillation impact: MEDIUM impactDescription: prevents excessive bouncing that distracts users and delays interaction tags: spring, damping, oscillation, bounce, overshoot --- ## Configure Damping to Control Oscillation Damping controls how quickly a spring settles.

Malicious tool definition detected

Tool: references/spring-mass-inertia.md Description: --- title: Adjust Mass for Heavier or Lighter Animation Feel impact: MEDIUM impactDescription: improved perceived weight for large elements tags: spring, mass, inertia, weight, large-elements --- ## Adjust Mass for Heavier or Lighter Animation Feel Mass controls the inertia of animated elements.

Malicious tool definition detected

Tool: references/spring-physics-based.md Description: --- title: Use Physics-Based Springs for Interruptible Animations impact: MEDIUM impactDescription: handles animation interruptions gracefully tags: spring, physics, transition, interruptible, duration --- ## Use Physics-Based Springs for Interruptible Animations Physics-based springs (stiffness/damping) simulate real-world motion and handle interruptions gracefully by preserving velocity.

Malicious tool definition detected

Tool: references/spring-use-spring-hook.md Description: --- title: Use useSpring for Reactive Spring Values impact: MEDIUM impactDescription: prevents abrupt value jumps tags: spring, useSpring, hook, reactive, motion-value --- ## Use useSpring for Reactive Spring Values The `useSpring` hook creates a motion value that animates with spring physics whenever its target changes.

Malicious tool definition detected

Tool: references/svg-morph-matching-points.md Description: --- title: Match Point Counts for Smooth Path Morphing impact: LOW-MEDIUM impactDescription: avoids expensive interpolation and visual glitches during morphing tags: svg, morph, path, interpolation --- ## Match Point Counts for Smooth Path Morphing When morphing between SVG paths, matching the number and type of path commands ensures smooth interpolation.

Malicious tool definition detected

Tool: references/svg-motion-components.md Description: --- title: Use motion.path and motion.circle for SVG Animation impact: LOW-MEDIUM impactDescription: correct transform-origin for SVG elements tags: svg, motion-components, transform, animation --- ## Use motion.path and motion.circle for SVG Animation Framer Motion's SVG components (motion.path, motion.circle, motion.rect, etc.) handle SVG-specific quirks like transform origin and attribute animation.

Malicious tool definition detected

Tool: references/svg-path-length.md Description: --- title: Use pathLength for Line Drawing Animations impact: LOW-MEDIUM impactDescription: 5× simpler line drawing code tags: svg, path, animation, line-drawing --- ## Use pathLength for Line Drawing Animations The `pathLength` property normalizes any path to a length of 1, enabling simple 0-1 progress animations.

Malicious tool definition detected

Tool: references/svg-viewbox-animation.md Description: --- title: Animate viewBox for Smooth Zoom Effects impact: LOW-MEDIUM impactDescription: crisp zoom without scaling blur tags: svg, viewbox, zoom, animation --- ## Animate viewBox for Smooth Zoom Effects Animating the SVG `viewBox` attribute creates true zoom effects that maintain crisp vector quality at any zoom level.