Animation should earn its frames: motion design rules we follow

We like motion. Our own homepage is a scroll-driven 3D story. So this isn’t a sermon against animation. It’s a set of house rules, because motion is the easiest way to make a site memorable and also the easiest way to make it annoying.

Every animation on a site we ship has to answer one question: what does this do for the person watching? If the only answer is ‘it looks cool’, it needs a second reason or it goes.

Rule 1: motion needs a job

Good motion does at least one of these jobs.

• Explains change: a menu that slides from the button that opened it shows where it came from and where it will go.
• Directs attention: a subtle entrance on a key message tells the eye where to look first.
• Confirms an action: a button that responds on press tells the user their tap registered.
• Shows relationships: elements that move together read as a group.
• Expresses the brand: a signature moment, used once and well, that people remember.

The last one is legitimate, but it’s a budget, not a licence. One signature moment per page is memorable. Ten is noise.

Rule 2: animate transform and opacity

Browsers can animate `transform` (move, scale, rotate) and `opacity` cheaply, usually on the GPU, without recalculating the page layout. Animating `width`, `height`, `top`, `left` or `margin` forces the browser to work out the layout again, often every frame. That’s where jank comes from, especially on budget phones.

So if something needs to grow, scale it. If it needs to move, translate it. If it needs to appear, fade it. You can do almost everything with those.

Rule 3: timing that respects attention

Our working guide, not a law of physics:

• Feedback on press or hover: very short, roughly 100 to 150 milliseconds. It should feel instant.
• Small UI changes such as toggles, tooltips and dropdowns: around 150 to 250 milliseconds.
• Larger movements such as panels, sheets and page sections: around 250 to 400 milliseconds.
• Anything longer is a deliberate storytelling moment, and should be skippable or tied to scroll.

Distance matters too. Something moving across a full desktop screen needs a little more time than the same element moving across a phone. And exits can usually be quicker than entrances: once someone has decided to close something, they don’t want to watch it leave.

Rule 4: easing gives motion its weight

Linear motion looks mechanical. Real objects speed up and slow down. Use ease-out for things entering, so they arrive fast and settle gently. Use ease-in for things leaving. Use ease-in-out for things moving from one place to another on screen. Pick a small set of curves for the whole site and stick to them; consistent easing is part of a brand’s feel.

The exception is scroll-linked animation. When motion is scrubbed to the scroll bar, the user’s hand is the easing. We map scroll to progress 1:1 and let the person control the speed.

Rule 5: never hide content behind an animation

A common pattern is to set headings to invisible and fade them in with JavaScript. If the script is slow, fails or is blocked, the visitor sees an empty page. It also hurts Largest Contentful Paint, because the main heading doesn’t count as painted while it’s invisible.

Our rule: content is visible by default in the HTML. Animation can enhance it once the script is ready. The most important text on the page, usually the hero heading, doesn’t start hidden at all.

Rule 6: reduced motion is a real design

Operating systems let people ask for reduced motion, and websites can read that setting through the `prefers-reduced-motion` media query. People turn it on for many reasons, including vestibular disorders, where large motion can cause dizziness or nausea.

Respecting it doesn’t mean switching off every transition and leaving a broken layout. It means designing a calm version:

• Replace movement with a simple fade, or no transition at all.
• Remove parallax, scroll-jacking, zooms and large sweeping motion.
• Turn scroll-driven sequences into still frames in normal reading order.
• Keep all the content and all the calls to action. Reduced motion is never reduced information.

We build the reduced-motion version for every animation alongside the full one, not as a clean-up task at the end. In code that means CSS `motion-reduce` variants for simple transitions and `gsap.matchMedia()` for anything GSAP drives.

Rule 7: don’t fight the user

• Don’t take over scrolling speed or direction. People know how their own trackpad should feel.
• Don’t block interaction while an animation plays. If someone clicks during a transition, respond.
• Don’t loop motion endlessly in the reading area. It pulls attention from the words.
• Don’t autoplay video with sound. Ever.

Rule 8: test on the slowest device you support

Motion that’s smooth on a design studio’s laptop can stutter on a mid-range Android phone. Test there. Use the browser’s performance tools to find long frames. If an animation can’t hold steady on the slowest device you care about, simplify it for that device or cut it.

The verdict

Motion is a spice, not the meal. Give each animation a job, keep it on transform and opacity, time it to respect attention, and design a calm version for those who ask. Do that, and your one big moment will land, because it won’t be competing with fifty small ones.