Good motion guides attention. Bad motion gets in the way. This is the checklist I follow on every project.
Animate cheap properties
Stick to transform and opacity so the browser can animate on the GPU, and avoid animating layout properties like width or top.
Respect the visitor
- Honour prefers-reduced-motion.
- Never hide content behind an animation that can fail.
- Keep durations short and purposeful.
Clean up
Kill timelines and ScrollTriggers when a component unmounts so pages stay smooth after many navigations.