emilkowalski/skills

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

- 89 - **In Motion, use the full transform string.** `x`/`y`/`scale` shorthands are not hardware-accelerated and drop frames under load:
+ 89 - **In Motion, newest versions hardware accelerate independent transforms like `x`/`y`/`scale`/`rotate`.**
- 92 <motion.div animate={{ x: 100 }} />                          // drops frames under load
- 93 <motion.div animate={{ transform: "translateX(100px)" }} />  // hardware accelerated
+ 92 <motion.div animate={{ x: 100 }} />                          // motion 14.2+: hardware accelerated
+ 93 <motion.div animate={{ transform: "translateX(100px)" }} />  // hardware accelerated in every version
- 190 | Motion `x`/`y`/`scale` props under load | Full `transform` string |
+ 190 | Motion `x`/`y`/`scale` props under load on versions before 14.2 | Upgrade to 14.2+, or a full `transform` string |

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Local scripts

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

- 3 description: Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.
+ 3 description: Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.
- 48 | Framer Motion `x`/`y` drops frames | Animate the full `transform` string |
+ 48 | Motion `x`/`y` drops frames | Upgrade to `motion` 14.2+, or animate the full `transform` string |
- 106 | JS + `requestAnimationFrame` (GSAP, `motion/react` components) | Main thread, always |
- 107 | Web Animations API (`element.animate()`, Motion's `animate()`) | Can be hardware-accelerated |
+ 106 | JS + `requestAnimationFrame` (GSAP, Motion layout animations) | Main thread, always |
+ 107 | Web Animations API (`element.animate()`, Motion's `animate()` and `motion/react` components) | Can be hardware-accelerated |
- 116 Framer Motion can be accelerated, but only when the transform is a string:
+ 116 Motion hands `opacity`, `transform`, `clip-path` and `filter` to WAAPI, so they can be accelerated. The `x`, `y`, `scale`, `rotate` shorthands depend on the version:
- 119 <motion.div animate={{ x: 100 }} />                          // main thread, can jank
- 120 <motion.div animate={{ transform: "translateX(100px)" }} />  // hardware-accelerated
- 121 ```
- 122 
- 123 The `x`, `y`, `scale`, `rotate` shorthands are implemented with CSS variables, and animated CSS variables aren't accelerated. The shorthands read better, so keep them by default and switch to the string form when the animation has to survive a busy main thread.
+ 119 <motion.div animate={{ x: 100 }} />                          // motion 14.2+: hardware-accelerated. Before: main thread, can jank
+ 120 <motion.div animate={{ transform: "translateX(100px)" }} />  // hardware-accelerated in every version
+ 121 ```
+ 122 
+ 123 From `motion` 14.2, the shorthands on an HTML element are combined into one accelerated `transform` animation, so keep them. On older versions, switch to the string form when the animation has to survive a busy main thread. In every version, these stay on the main thread: layout animations (`layout`, `layoutId`), `onUpdate`, `transformTemplate`, inertia, and values driven every frame by a motion value (drag, `useTransform`).
- 156 CSS variables inherit, so changing one on a parent triggers style recalculation for every child. The more content, the slower each frame. Suspect this whenever a `transform` animation degrades as content grows. It's the same reason Framer Motion's shorthands aren't accelerated.
+ 156 CSS variables inherit, so changing one on a parent triggers style recalculation for every child. The more content, the slower each frame. Suspect this whenever a `transform` animation degrades as content grows.
- 204 5. **Is a CSS variable animated at all?** Directly, or through Motion's `x`/`y`/`scale`.
+ 204 5. **Is a CSS variable animated at all?** Or Motion's `x`/`y`/`scale` on a version before 14.2?

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Local scripts

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

- 495 ### Framer Motion hardware acceleration caveat
- 496 
- 497 Framer Motion's shorthand properties (`x`, `y`, `scale`) are NOT hardware-accelerated. They use `requestAnimationFrame` on the main thread. For hardware acceleration, use the full `transform` string:
+ 495 ### Motion hardware acceleration caveat
+ 496 
+ 497 From `motion` 14.2, Motion's shorthand properties (`x`, `y`, `scale`, `rotate`) are hardware-accelerated on HTML elements. Before 14.2 they use `requestAnimationFrame` on the main thread, so on those versions use the full `transform` string for hardware acceleration:
- 500 // NOT hardware accelerated (convenient but drops frames under load)
+ 500 // motion 14.2+: hardware accelerated. Before 14.2: main thread, drops frames under load
- 503 // Hardware accelerated (stays smooth even when main thread is busy)
+ 503 // Hardware accelerated in every version (stays smooth even when main thread is busy)
+ 507 Some Motion animations still run on the main thread in every version: layout animations (`layout`, `layoutId`), animations with `onUpdate` or `transformTemplate`, inertia (drag momentum), and values driven every frame by a motion value (drag, `useTransform`).
+ 508 
- 511 CSS animations run off the main thread. When the browser is busy loading a new page, Framer Motion animations (using `requestAnimationFrame`) drop frames. CSS animations remain smooth. Use CSS for predetermined animations; JS for dynamic, interruptible ones.
+ 513 CSS animations run off the main thread. When the browser is busy loading a new page, animations that run on `requestAnimationFrame` (including Motion layout animations) drop frames. CSS animations remain smooth. Use CSS for predetermined animations; JS for dynamic, interruptible ones.
- 672 | Framer Motion `x`/`y` props under load     | Use `transform: "translateX()"` for hardware acceleration        |
+ 674 | Motion `x`/`y` props under load (pre-14.2) | Upgrade to 14.2+, or use `transform: "translateX()"`             |

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Local scripts

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Local scripts

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → f1090bec2771

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

- 43 7. **GPU-only properties.** Animate `transform` and `opacity` only. Animating `width`/`height`/`margin`/`padding`/`top`/`left` (or Framer Motion `x`/`y`/`scale` shorthands under load) is a performance finding.
+ 43 7. **GPU-only properties.** Animate `transform` and `opacity` only. Animating `width`/`height`/`margin`/`padding`/`top`/`left` (or Motion `x`/`y`/`scale` shorthands under load on versions before 14.2) is a performance finding.
- 63 - Framer Motion `x`/`y`/`scale` props on motion that runs while the page is busy
+ 63 - Motion `x`/`y`/`scale` props (before `motion` 14.2) or layout animations on motion that runs while the page is busy
- 79 6. **Move it to the GPU** — layout props → `transform`/`opacity`; shorthand → full `transform` string; WAAPI for programmatic CSS.
+ 79 6. **Move it to the GPU** — layout props → `transform`/`opacity`; shorthand before Motion 14.2 → upgrade or full `transform` string; WAAPI for programmatic CSS.

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub

Before Instructions only → After Instructions only

2d228630ba14 → f1090bec2771

Compare on GitHub

Before Not checked yet → After Instructions only

First observation → 2d228630ba14

No earlier version was observed for comparison.

Compare on GitHub