What web animations really do — and when they annoy
Motion is the silent language of an interface. A button that responds to a click, a menu that opens gently — these signals tell the eye in milliseconds that something is working.
Good animation guides attention, connects states, and creates the feeling that a website is alive. It's not decoration — it's part of the interaction. The visual language behind it is described in the article on a brand's visual language.
Bad animation does the opposite. It plays without reason, delays content, and distracts from the message. On weaker devices, it costs noticeable speed.
This article gives an honest assessment of web animations: which types matter in 2026 and what technology produces them. It also covers how motion affects performance and accessibility — and how Noevu uses it in its own stack. For a project-specific assessment, a brief conversation about the right solution is worth it.
A law firm in Zurich wanted their new website to feel "more alive." Twenty scroll effects, animated counters, and a moving background were built in. The result felt restless rather than premium — and the most important message was lost in the motion. Three targeted effects would have achieved more than twenty.
When motion helps — and when it hurts
An animation earns its place when it answers an action or makes a transition understandable. A button that responds to a click confirms the input. A menu that opens rather than appears shows where it comes from.
As soon as motion plays without cause, the benefit collapses. A background that constantly pulses draws attention away from the message. An effect that reloads with every scroll makes the page feel sluggish rather than lively.
For Swiss SME sites, a simple test applies: if an animation explains nothing and responds to nothing, it belongs under review — or out.
Motion helps when …
Motion hurts when …
The key animation types in 2026
Animation is not all one thing. Six types appear repeatedly on modern websites in 2026 — each with its own purpose. Knowing the difference means using motion deliberately rather than by chance.
| Purpose | Example | When appropriate | |
|---|---|---|---|
| Micro-interaction | Feedback on an action | Button responds to click | almost always |
| Transition | Connect two states | Menu opens smoothly instead of jumping | with every state change |
| Scroll animation | Reveal content | Section appears on scroll | use sparingly |
| Hover effect | Show clickability | Card lifts slightly | on desktop |
| Loading state | Bridge wait time | Skeleton placeholder instead of spinning circle | during real wait times |
| Page transition | Preserve context | Smooth switch between pages | for connected pages |
As of May 2026. The selection is not a ranking but a description of suitability.
CSS, JavaScript, or Library — what works in 2026
Four paths are available for motion on the web: pure CSS, the browser's native View Transitions API, a JavaScript library, or the new scroll-driven CSS animations. The difference sounds technical, but it determines speed, maintenance, and effort.
CSS covers everyday needs — hover, fades, simple keyframes — without additional load. The View Transitions API connects pages and states with a smooth switch, natively in the browser. JavaScript libraries pay off for complex sequences with their own timeline. Scroll-driven CSS animations reveal content on scroll, entirely without a script.
| CSS (transition/animation) | View Transitions API | JavaScript Library | CSS Scroll-driven | |
|---|---|---|---|---|
| Typical use | Hover, fade, simple keyframes | Transitions between pages and states | Complex sequences with timeline | Reveal on scroll |
| Additional load | none | none (native) | approx. 20–60 KB | none |
| Learning curve | low | medium | medium to high | medium |
| Browser coverage 2026 | full | Chromium full, Safari partial, Firefox following | full | Chromium native, fallback elsewhere |
| When appropriate | most cases | multi-page sites with calm transitions | story scrolling, complex effects | subtle reveal effects |
As of May 2026. Browser support: caniuse.com. JavaScript libraries include GSAP and Motion.
The honest answer for most SME websites: CSS is enough. Hover effects, fades, and smooth transitions need no additional library and no load weight. A JavaScript solution only pays off when a real story is told through scrolling — for example on a product or campaign page. Starting with CSS lets you upgrade selectively later without throwing anything away.
Performance: why motion hits Core Web Vitals
Motion is not a direct ranking factor. Google does not evaluate animations for visual appeal. But poorly built motion hits two metrics that do feed into rankings: perceived load speed and responsiveness to input.
An animation that changes width, height, or position forces the browser to recalculate the layout — on every frame. On weaker devices, this produces visible jank. Animating only transform and opacity runs on the fast path of the GPU.
When content jumps on load, the layout stability score (CLS) suffers. When a page responds sluggishly to a click, the interactivity score (INP) suffers. Both can be avoided with clean animation — typically as part of a broader SEO check for the website.
/* Smooth: GPU-accelerated, no reflow */
.karte {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.karte:hover {
transform: translateY(-4px);
opacity: 0.95;
}
/* Janky: forces layout recalculation on every frame */
.karte:hover {
margin-top: -4px; /* triggert Reflow */
width: 320px; /* triggert Reflow */
}Accessibility: prefers-reduced-motion is mandatory
Not everyone can handle motion on screen. People who are sensitive to it set "reduce motion" in their operating system. A good website respects that setting.
The tool for this is prefers-reduced-motion — a CSS query that reads exactly this system preference. When it's active, animation is disabled or replaced with a simple single-step transition.
This is not a niche topic. Accessibility requires consideration for motion sensitivity — for many Swiss organisations already mandatory rather than optional.
/* Motion only when the user allows it */
@media (prefers-reduced-motion: no-preference) {
.reveal {
animation: fade-in 0.4s ease both;
}
}
/* Reduced motion: content visible immediately, no animation */
@media (prefers-reduced-motion: reduce) {
.reveal {
animation: none;
}
}AI and animation — where it helps today
AI is changing how animation is created. Tools suggest motion sequences, and AI assistants write keyframes on demand. For a quick concept or a first draft, this saves real time.
But AI doesn't replace taste. Whether a motion fits the brand, whether it stays subtle enough, whether it still runs smoothly on mobile — those remain design decisions. AI delivers variants; the eye chooses.
In day-to-day projects, AI accelerates the draft — the decision of what fits the brand stays with the human.
A Zurich startup gave their entire homepage an AI-generated scroll story — every element flew in on scroll. On the designer's screen it looked impressive. On the target customers' older laptops the page janked; on mobile, load time collapsed. Less motion would have had more impact.
How Noevu uses animations in practice
On noevu.ch, motion stays deliberately subtle. Cards lift slightly on hover, sections fade in gently on scroll, and page transitions run smoothly rather than jumping. Every effect ends within fractions of a second.
Technically, animation is limited to transform and opacity — the browser handles both without layout recalculation. Page transitions use the browser's View Transitions API, integrated via Astro. Reveal effects run through a single, reusable mechanism rather than scattered individual solutions.
prefers-reduced-motion is not an add-on here — it's the default. Anyone who chooses reduced motion in their system sees the content immediately — without animation, without delay.
What Noevu considers on the topic of animation
Conclusion
Animation is a small tool with a large effect — in both directions. Well placed, it guides attention and brings a website to life. Poorly placed, it costs speed, visibility, and trust.
For most Swiss SME websites, the safe path is clear: subtle motion with pure CSS, limited to transform and opacity, with prefers-reduced-motion as the default. Complex effects stay reserved for the few pages that genuinely tell a story.
A deliberate decision about motion costs less than rebuilding it later. It pays off year after year in speed, accessibility, and brand impact.
Which motion fits your site and how speed, accessibility, and brand impact work together can be honestly assessed in twenty minutes.
Frequently Asked Questions
Which animations belong on a modern website?
Useful animations include micro-interactions like a responsive button, smooth transitions when menus open, and subtle effects that reveal content on scroll. The key is context: motion should respond to an action or make a state change understandable. Auto-playing effects without a purpose don't belong.
Do animations slow down my website?
Poorly built animation causes noticeable slowdowns — especially when it changes layout properties like width, height, or position. Anyone who only animates transform and opacity uses the GPU and stays smooth. Pure CSS loads no additional files. Only large JavaScript libraries bring real weight.
What is prefers-reduced-motion?
prefers-reduced-motion is a CSS query that reads whether someone has activated the "reduce motion" setting in their operating system. When that's the case, a well-built website disables its animations or replaces them with a simple transition. This protects people who are sensitive to motion and is part of accessibility.
CSS or JavaScript for web animations?
For most cases, CSS is sufficient: hover effects, fades, and simple transitions don't need a library. JavaScript is worthwhile for complex sequences or a story told through scrolling. Libraries like GSAP or Motion bring the right tools for that — along with some load weight that you factor in consciously.
Do animations hurt SEO rankings?
Animation itself is not a ranking factor. Indirectly it can count: jittery or content-shifting motion worsens Core Web Vitals, which feed into rankings as one of many signals. Clean animation with transform and opacity avoids that. Speed and stability matter more to Google than the effect itself.
