Notes from cleaning up a music agency site that animated every SVG path on scroll: where CSS keyframes stop working, where GSAP path morphing earns its weight, and how to respect user motion preferences.
A client’s landing page felt dead and my first instinct was to import GSAP. Here is what I did instead: staggered CSS timings on a few SVG groups, transforms only, and a reduced-motion check.
A photography portfolio was sitting at a 6 second LCP on mobile and a 25KB masonry script was doing it. Native CSS masonry does the same job, with an @supports fallback to columns for the browsers that are not there yet.
A hanging WooCommerce checkout on Black Friday taught me that a nicer spinner does not calm anyone down. Notes on cognitive tunneling, single-tasking flows, transient locks against panic clicks, and what an emergency mode looks like.
A fleet dashboard flashed so hard that a broken-down truck went unnoticed for twenty minutes. Faster polling made it worse. What helped: delta indicators, sparklines, skeleton screens, an honest last-sync label and ARIA live regions.
Trimming a legacy site cut page weights by 80%, and the same work cut its energy use. Five steps: pick one journey, benchmark it, set a page weight target, strip the WordPress junk nobody needs, then keep checking.
A client paid thousands for an AI accessibility overlay and still got complaints from deaf users. Notes on what does help: text-based contact options, human captions, visual and haptic cues in place of sound, and accessibility handled before launch instead of after.
A hero illustration that looked right at 16:9 and collapsed on mobile. Instead of shipping two SVG files, I moved the artwork into a hidden symbol library and referenced it from two wrappers with different viewBox values, then animated the use elements.
A client was shipping a 4MB transparent PNG for every header to get a 1950s cartoon look, which killed load time and left the page with no real headings. Layered text-shadows, paint-order and a small jiggle animation do the same job in CSS.
A $5M WooCommerce store shrugged off a 40% checkout drop-off until I stopped showing percentages and started showing session recordings and validation logs. The board approved the fix in ten minutes.