Animation Made Quiet

On saleTwo Editions are on sale today, Les Gourmands and Aperture Office. Complete React source, the original photography included. Single licence 89 USD, one published website. Studio licence 179 USD, up to five.

The grammar of quiet motion

• A reveal is an opacity change and a small vertical move, nothing else. Twelve to twenty four pixels of travel, no scale, no rotation, no blur. Anything larger stops being a reveal and becomes a transition.
• Six hundred to nine hundred milliseconds, on a curve that decelerates into place. Fast enough that nobody waits for it, slow enough that the eye registers the arrival rather than the movement itself.
• Elements animate once, when roughly a quarter of the block has entered the viewport. Replaying a reveal every time the visitor scrolls back up is the single fastest way to make an expensive site feel cheap.
• Sixty to ninety milliseconds between siblings in a row of cards or a grid of rooms. Above that the row reads as a queue and the visitor starts counting instead of looking.
• One parallax per page, usually the hero image, moving at six to ten percent of scroll speed. A second one somewhere down the page turns an editorial site into a fairground.
• A hover is a confirmation, not an event. Opacity to a defined value, an underline drawn from the left, an image that lifts by two pixels over two hundred milliseconds. No pop, no shadow bloom, no colour flip.

The motion that cheapens a brand

• Spring and bounce. An overshoot says the element is light and plastic. A hotel suite, a clinic, a furniture studio, none of them are light and plastic, and the physics of the animation quietly contradicts the photography above it.
• Scroll jacking. Taking the wheel away from the visitor buys four seconds of admiration and then loses the page. Skimming stops working, find on page stops working, and keyboard users are usually stranded.
• Cursor followers and magnetic buttons. They read as a portfolio effect, which is precisely the problem: the visitor is now looking at the site's craft instead of the client's rooms, treatments or work.
• Counting numbers and typewriter headlines. Both delay the one thing the visitor came for, which is the sentence. If a figure matters, print it. If a headline matters, let it be there when the page arrives.
• Entrance animations on body copy. Reveals belong to sections and images. A paragraph that fades in line by line is unreadable on a slow connection and irritating on a fast one.

What animation actually costs

Reduced motion is not an optional extra

• macOS, iOS, Windows and Android all let a person ask for less movement. That setting reaches the browser as prefers-reduced-motion, and a template either listens to it or ignores a request the visitor has already made.
• When the setting is on, our reveals resolve to nothing visible. Translation, parallax and stagger stop. Content is simply there, at full opacity, in position, with no delay and no waiting.
• The usual failure is not ugly, it is fatal: content is set to zero opacity in CSS, the animation is suppressed, and entire sections never appear. We test the reduced state on every page before a template ships.
• Parallax and large drifting backgrounds are the effects most likely to trigger nausea and dizziness for people with vestibular sensitivity. That is the reason we limit them to one, and the reason that one switches off first.
• The same discipline pays elsewhere. Older devices, battery saver modes and anyone who simply dislikes movement all land on the calmer version of the site, and the calmer version is still the whole site.

The Editions, and the prices

Related