Trick or treat: 25% off with code Ends Nov 1. Halloween templates & freebies
Back to blog

Website Animation: What Helps and What Gets in the Way?

Oct 20, 2026·4 min read
Two people at their desks: one calmly browsing a clean website, the other frustrated by a busy, cluttered website

A button responds as you move your cursor over it. A menu slides open when you tap. A product illustration shows how a feature works.

These details can make a website easier to understand and more enjoyable to use.

Then there’s the other experience: headings arrive too slowly, sections disappear when you scroll back, and the page insists on moving sideways when you want to move down.

Hover effects and scroll animations can improve a website. The difference is whether they help visitors do something or ask visitors to accommodate the design.

Usability research offers a practical way to make that distinction.

Useful animation answers a question

Did my click register? Where did that panel come from? What changed after I selected this option?

Animation can answer these questions without adding another instruction to the page. Nielsen Norman Group recommends using motion primarily for feedback, changes of state and helping people understand navigation. It also warns that movement attracts attention even when it has nothing to do with the user’s task.

Consider Airtable’s column-reordering interaction, documented by NN/G. As someone drags a column, animation previews the new arrangement before they release it. The movement helps them see the consequence of their action.

That gives us a useful starting point: explain what each animation helps the visitor understand. “It makes the page feel premium” needs a more specific reason behind it.

Hover effects should make interaction predictable

A restrained colour change or underline can give someone useful feedback as they move over a link. Problems begin when hovering causes large, unexpected changes.

Case study: navigation that opens too easily

Baymard Institute observed shoppers struggling with dropdown menus that appeared immediately as their cursor passed over the navigation.

On Appliances Online, a participant trying to reach the search bar repeatedly triggered unwanted menus and considered leaving. On Dell, moving diagonally towards a submenu could activate a neighbouring category instead.

The issue was the interaction’s sensitivity.

Baymard recommends an activation delay of 300 to 500 milliseconds for hover-based dropdown menus. Its Macy’s example shows how a delay lets shoppers cross the navigation without accidentally opening it. This recommendation concerns when a menu opens, rather than how long its animation lasts.

For your own website, keep hover behaviour stable. Avoid moving the target someone is trying to click, and make sure essential actions are available through touch and keyboard interaction too.

Scroll animation works best when content stays available

A short reveal can draw attention to an illustration or introduce part of a product story. But visitors also need to scan, compare and revisit information at their own pace.

Case study: Apple Card and Crypto.com

In its 2023 qualitative usability study, NN/G found that the Apple Card page combined concise copy with selective reveals. Animating text or imagery separately helped direct attention, and the page achieved the strongest overall efficiency and comprehension in that study.

Crypto.com’s calculator exposed a different problem. Participants changed inputs, scrolled to see the results and had to wait for those results to fade in again. Repeated reveals added work to an already repetitive task.

The practical lesson is to reveal content once, then keep it visible. Prices, specifications and calculator results should be easy to return to.

These observations describe particular designs tested at the time. They do not establish a universal conversion benefit for scroll animation.

Keep visitors in control of scrolling

Scroll animation and scrolljacking are different behaviours.

A scroll animation reacts as someone moves through a page. Scrolljacking changes the expected pace or direction of that movement.

NN/G’s scrolljacking research identified problems with control, discoverability and task completion. Some participants mistook an image for the end of a page because further scrolling initially revealed nothing new.

For a business website, preserving familiar scrolling is a sensible default. If you want to tell a richer visual story, let people move through it freely and reach key information directly.

Plan for people who need less motion

Large zooms, parallax effects and moving backgrounds can cause more than irritation. W3C explains that motion effects can trigger dizziness, nausea and headaches for people with vestibular disorders.

Its WCAG 2.2 Level AAA criterion for animation from interactions says non-essential motion triggered by interaction must be possible to disable.

Build a reduced-motion version alongside the animated design. The browser’s prefers-reduced-motion setting lets your site respect a visitor’s system preference. Remove unnecessary movement while preserving the content and feedback people need.

Check performance on real devices

A smooth preview on a designer’s laptop tells you little about the experience on an older phone.

Google’s web.dev guidance recommends favouring transform and opacity for animation, and avoiding properties that repeatedly trigger layout or painting where possible. Those implementation choices can materially affect smoothness.

Test the finished page on mobile, with slower connections and reduced motion enabled. Check whether visitors can read and interact immediately, rather than waiting for the presentation to finish.

Measure whether the animation helps

Before keeping an effect, give people a realistic task: find the price, compare two products or book a call.

Watch for hesitation, missed information and repeated scrolling. Compare the animated experience with a simpler version. If you run an A/B test, measure the action the page is intended to support. More time spent on a page could mean greater interest, but it could also mean greater difficulty.

The research gives you patterns to investigate, not a guaranteed sales uplift.

A good website can have personality and movement. Keep the effects that explain, guide or respond. Simplify the ones that make visitors wait, search or fight the page to get what they came for.

Sources