Early on, I animated nearly everything I could reach — full page transitions, list reordering on every data change, hover effects layered onto every card in a grid. Visually the result was polished, but it came at a real cost: the site's Lighthouse Performance score dropped to around 45, largely because of the sheer volume of JavaScript-driven animation running simultaneously, much of it triggering layout recalculations that a browser has to work hard to keep smooth. Animating layout properties like `width`, `height`, and `top` forces the browser to recalculate the layout of the entire page on every frame, which is far more expensive than animating `transform` and `opacity`, which the browser can handle on the compositor thread without touching layout.

Three rules have stuck with me since. First, only animate elements that genuinely need to draw the user's attention — primary buttons, section entrances on scroll, and meaningful state changes, not every incidental UI element. A hover effect on a card is fine; a hover effect on every element inside the card is performance theater that makes the page feel busy without adding value. Second, use plain CSS transitions rather than Framer Motion for simple hover effects, since CSS transitions on properties like transform and opacity are GPU-accelerated and don't require any JavaScript to run at all.

Third, always respect the prefers-reduced-motion media query, since a meaningful number of users experience genuine discomfort or motion sickness from animation and rely on that setting to opt out. Framer Motion supports this via the `useReducedMotion` hook, which lets you conditionally disable or simplify animations. Respecting user preferences isn't just about accessibility compliance — it's about not making your site physically uncomfortable for a subset of users who have specifically asked their OS to reduce motion. Since applying those three rules consistently, Lighthouse Performance scores on the projects I work on stay above 90 without giving up the animations that actually matter.