Three rules for motion on the web
Motion is the easiest thing to do badly on a website. Three rules that keep us out of trouble.
Rule one. Motion is a sentence, not a word. A scroll-triggered fade-in on every block is not motion direction; it is decoration. Real motion has a beginning, a middle, and an end. It says something. If you cannot describe what your motion is saying without using the words "smooth" or "modern", it is not saying anything.
Rule two. Motion that is not part of the system is debt. The first time a designer puts a custom easing curve on a button, it is delightful. The fortieth time someone else copies that pattern with a slightly different curve, it is a mess. Tokens for easing, duration, and stagger are as important as tokens for colour. Without them, motion drifts every time someone new opens the file.
Rule three. Test the motion on the actual machine. A fade that looks gorgeous on a top-of-the-line laptop on hard-wired ethernet is unwatchable on the mid-range Android phone your customer is actually holding on a five-bar connection. Every motion decision gets a test on a representative device before we sign it off. That single discipline removes most of the bad motion we see in the wild.