My rule: every animation must answer a question the user actually has. A shared-element morph from a thumbnail to a hero answers 'is this the thing I clicked?'. A directional slide answers 'did I go deeper or back?'. A skeleton-to-content fade answers 'is it done loading?'. If I can't name the question, the animation is decoration, and decoration goes first when the performance budget tightens.
Numbers that have served me well: 150-250ms for exits, 200-400ms for entrances, expo or power easing that settles fast, and never animate layout properties when transform and opacity can fake it. Old content should leave faster than new content arrives — attention follows whatever is moving, and you want it on the new thing.
Respecting prefers-reduced-motion is not optional, and it is not 'turn everything off' either. Positional movement — slides, parallax, magnetic cursors — is what triggers motion sensitivity. Crossfades mostly don't. So my reduced-motion pass keeps opacity changes and kills movement, which preserves the loading-state communication without the physics.
The implementation stack matters less than people argue about. I use GSAP because ScrollTrigger and timeline orchestration are still unmatched, plus the browser's own View Transitions API for route changes. But the curve and the trigger discipline are what users feel — not the library.