Motion that helps, and motion that makes people leave

Website animation best practices reduce to a single test. Motion should show a relationship or a change of state. A loop that decorates the page while someone is trying to read should come out, even when the loop was the part the team liked in the design file.

Hanabi holds the marketing site to a reduced-motion standard. The version with movement and the version without it carry the same words, the same links, and the same offer. Animation is an enhancement on top of a page that already makes sense still. When the still page is confusing, the animation is hiding a writing problem.

Motion that shows a relationship

Relationship means the visitor can see how two things connect, or where an object went. A menu that fades and slides a short distance tells you the navigation came from the button you pressed. A project card that settles into a row tells you these pieces belong together. A diagram that draws a line from a step to the next step tells you the order is the point.

These moves are short. They run once, in response to an action or to a section entering the screen. They finish, and the page becomes still so it can be read. The relationship has been shown. Lingering motion after that point competes with the sentence you wanted read.

Relationship is also why a sudden cut sometimes fails. If a panel appears with no transition at all, a visitor can miss where it came from and think a new page loaded. A brief transition, on the order of a glance, fixes that. You do not need a choreographed entrance. You need continuity.

Use motion this way on a company site:

• Opening and closing a menu, so the navigation has a place it came from.
• Expanding a short question, so the answer is clearly the one that belongs to the question.
• Moving between a small set of states in a comparison, such as a simplified layout and a detailed one, when the change is the lesson.
• Confirming a hover or a press on a control, so the control feels available.

Each of these still needs a non-moving version. The menu can appear at once. The answer can be present. The comparison can be two stacked states. Continuity is a kindness. It is not the information.

Motion that shows a state

State means something changed in the system, and the interface should say so. A form control that shows a pressed state, a filter that marks what is selected, a toast that confirms a message sent: these are state, and a little motion makes the change easier to notice.

The copy still does the real work. A button that says "Sent" is clearer than a button that only bounces. Motion can support the word. It should not replace it. People using the quiet version of the page, and people who simply were not looking at the button, need the word.

Loading is a state, and it is the one teams over-animate. A skeleton or a small indicator is enough to say the next view is on its way. A full-screen spectacle that plays every time a route changes says the site is performing. If the wait is long, the honest fix is to make the wait shorter, not to entertain it. web.dev's stability guidance is the numeric version of the same caution. Cumulative Layout Shift should stay at 0.1 or less. An animation that pushes content down, or a loader that inserts itself above the headline, fails that line while looking busy.

Keep state motion on the element that changed. Do not dim and blur the whole page to announce that one checkbox was ticked.

Motion that makes people leave

Some motion asks the visitor to watch the site instead of using it. That is the motion that thins a marketing page.

Looping backgrounds are the usual case. A gradient that never settles, a grid of cards that bob, a cursor trail, a parallax layer that drifts while the paragraph scrolls: the eye keeps getting recruited. Reading needs a still surface. The loop refuses to provide one.

Entrance sequences are the other usual case. The logo draws itself, the headline rises, the photograph wipes, and only then is the offer available. Anyone who arrived with a question has to sit through an introduction to the website. The introduction is not the answer.

Autoplay is the rude cousin. Video that starts with sound, or a carousel that advances while someone is midway through a sentence, takes control of the pace. The W3C's Web Content Accessibility Guidelines are the shared standard for making web content accessible to people with disabilities, and WCAG applies to dynamic content as well as to text and images. WCAG 2.2 groups its guidance under four principles: perceivable, operable, understandable, and robust. A page that keeps moving on its own is harder to operate and harder to understand. Give the visitor a way to stop it, or do not start it.

There is a physical reason to be strict, beyond taste. Large shifts, zooms, and parallax can make people sick or force them to look away. You will not see that in a critique where everyone is fine with motion. You see it by shipping a reduced version and treating complaints about dizziness as defects.

The reduced-motion pair

Every move that ships should have a pair. The designed move, and a still or instant version when the person has asked the operating system for reduced motion. Hanabi's marketing site is built that way: the craft includes the quiet variant, reviewed as part of done, not patched after someone files a complaint.

The pair must preserve information. If the only explanation of the product is a move, write the explanation. Then the move can illustrate it for people who want the illustration. The preference is prefers-reduced-motion in CSS. The habit is simpler than the syntax: design the still page first, add one move that passes the test, then turn that move off under the preference and check that nothing important disappeared.

The next article walks the habit itself. Reduced motion is part of the craft covers the two versions, what may still move, and how to review the quiet page on purpose.

A review you can run without a motion reel

Open the staging site and do this once before launch.

1. Read the first screen with everything still. If you cannot say what the company does, stop and fix the words. Do not add an animation to compensate.
2. Use the menu, the primary link, and one interactive section. Each move should explain where something went or what state changed, then stop.
3. Watch for loops. If something is still moving after you have started to read, remove it or require a deliberate play action.
4. Turn on reduced motion in the operating system and reload. The offer, the path, and the meaning of each control should survive.
5. Scroll while images load. If a button jumps, fix the space reserved for the image. That jump is a stability bug, and the 0.1 line exists so teams stop calling it polish.

This review takes less time than a second round of entrance concepts. It catches the motions people leave over.

Hanabi's services cover sites built with that review in the schedule: design, a production front end, and motion that can stand down. Bring a page you already have if the current animation is the thing visitors have to wait through. The replacement is usually a clearer first screen and one move that earns its place.