There are two kinds of website when it comes to animation: those that use it to explain something (this button has been pressed, this menu is opening, this item has been added to the cart) and those that use it because "it looks nice." The first kind helps the user understand what is happening on screen. The second kind, at best, is decorative and neutral; at worst, it slows the site down, disorients viewers and distracts from the message that actually matters.
The purpose of animation: communicate, not decorate
Every animation in an interface should be able to answer the question "what am I explaining to the user with this movement?" A button that sinks slightly when pressed confirms the click registered. A card that slides away when deleted confirms it has genuinely disappeared, not that the page has frozen. That kind of functional animation (sometimes called a "microinteraction") reduces user uncertainty at very specific moments, which is exactly why it is worth doing.
Motion design done with judgement starts by identifying those moments of real uncertainty (did my change save? was the product added? is something loading?) and designing the animation specifically to resolve them, instead of animating everything by default just because the design tool allows it with one click.
When an animation starts working against you
Three fairly reliable signs that an animation is doing more harm than good: if it delays the user from being able to act (text that takes three seconds to appear letter by letter before the full message can be read), if it repeats every time the page is visited instead of showing only once, or if it competes for attention with content that actually matters, like an animated background behind a contact form that makes it hard to focus on filling it in.
The performance cost almost nobody calculates
Complex animations, especially ones that move many elements at once or use heavy effects, consume browser resources and the visitor's phone battery. On mid-range or low-end devices (which make up a significant share of real traffic for any Spanish small business), a poorly optimised animation can feel choppy or straight-up slow down the whole page. Before adding a flashy animation, it is worth testing it on a mid-range phone, not just the office's latest-generation computer.
Prefers-reduced-motion: the setting that respects people who do not want movement
There is an operating system preference, switchable by the user themselves, called "reduce motion," designed for people with motion sensitivity (dizziness, migraines, vestibular disorders) or simply for anyone who prefers a calmer experience. A well-built website detects that preference through the CSS rule `prefers-reduced-motion` and disables or reduces non-essential animations for those users. It is one line of code, and respecting it is as much a matter of accessibility as of good design judgement.
Scroll-reveal content animation: use it sparingly
The effect where elements smoothly appear as you scroll is one of the most popular on modern websites, and in the right dose it adds rhythm and dynamism. The problem shows up when it is applied to absolutely every element on the page: the user ends up waiting for each paragraph to "appear" before being able to read it, which is exactly the opposite of what was intended. The practical rule is to reserve this effect for the truly standout elements (a results section, a call to action) and leave the rest of the content visible immediately.
Page transitions: elegant if fast, annoying if not
Smooth transitions when switching pages can give a sense of a polished, cohesive website, but only if their duration is nearly imperceptible (a few tenths of a second). A transition longer than half a second starts to feel like an obstacle between the user and what they wanted to see, especially for someone who already visits the site frequently and just wants to get to the information quickly.
How to decide whether an animation is worth it for your website
Before implementing any animation, two simple questions help filter it out: does it help explain something that would otherwise be confusing, and would you still want it if you had to see it a hundred times in a row, because that is exactly what will happen to a regular customer? If the answer to the first is no and to the second is also no, it is probably unnecessary.
The specific case of loading indicators: when they are necessary and when they give away a problem
A loading indicator (a spinning wheel, a progress bar) is useful when something inevitably takes time, but its constant, prolonged presence across many parts of a website is usually a symptom of a deeper performance problem, not a solution in itself. If a user sees the same loading indicator on every interaction, the animation stops reassuring and starts communicating, unintentionally, that the website is slow.
Animation and hierarchy: using motion to direct attention, not to decorate everything equally
One of the most effective uses of motion design is directing the user's gaze toward what actually matters at a specific moment, for example with a slight movement that highlights a button right after the user completes a previous step. Used this way, selectively and with a clear purpose of guiding attention, motion becomes a usability tool; used equally on every element, it loses that signalling power because nothing stands out from the rest anymore.
How to document animations in the design system to maintain consistency
Just like with colours and typefaces, it is worth documenting what type of animation is used for which situation (confirmations, state changes, transitions) and at what standard duration, so anyone adding a new feature to the website maintains the same motion consistency as the rest of the site, instead of improvising a different animation each time.
Animation and phone battery: a cost the user does notice
Beyond visual performance, complex animations noticeably drain battery, especially during long browsing sessions. A user may not be able to technically explain why their phone heats up or the battery drains faster while browsing a specific website, but they do perceive it as a negative experience associated with that site, even if they never consciously connect it to the background animations.
The parallax effect: a specific case worth treating with caution
The parallax effect (where different layers of a page move at different speeds while scrolling) had a moment of great popularity in web design, but excessive use of it causes dizziness in a far from negligible share of users, on top of a considerable performance cost. Reserving it, if used at all, for a single standout element on the homepage, instead of applying it in cascade across the whole website, reduces both the discomfort risk and the impact on loading speed.
Animate only what changes state, leave what does not alone
A useful practical rule for deciding what to animate: if an element changes state (appears, disappears, updates), it makes sense to accompany it with a brief transition that softens that change. If an element is simply sitting there, with nothing changing, it does not need any associated animation. Applying this rule systematically avoids the excess of movement that turns a dynamic website into an exhausting one to browse.
Frequently asked questions
Do animations always slow down a website's loading speed?
Not necessarily. Well-built animations using modern CSS are lightweight and do not noticeably affect speed. The problem arises with complex animations built on heavy JavaScript libraries or with many elements animating at once.
Should I remove all animations from my website to make it faster?
There is no need to go to that extreme. Functional microinteractions (confirmations, loading states) tend to be very lightweight and add a lot of value. What is worth reviewing are the purely decorative animations and ones that repeat excessively.
What is `prefers-reduced-motion` and how do I implement it?
It is a user's operating system preference indicating they prefer less movement on screen. It is implemented with a CSS rule that detects that preference and disables or simplifies non-essential animations for people who have it turned on.
Do animations really improve conversions or are they just aesthetics?
Functional animations (confirming an action, guiding attention toward an important button) can genuinely improve conversion by reducing doubt. Purely decorative ones are neutral at best, and actually hurt conversion at worst if they distract or slow things down.
Is it a good idea to animate the logo or the website header?
In moderation, yes, as long as it is subtle and does not repeat intrusively on every page load. A logo that animates every time the user switches sections can get tiring very quickly.
How do I test whether an animation performs well on low-end mobile devices?
The most reliable way is to test it directly on a real mid-range or low-end device, not just desktop browser simulation tools, which do not always accurately reflect the real performance of a more modest phone.
Is a loading indicator that appears frequently always a problem?
Not necessarily, but if it appears for a long time and constantly across many parts of the website, it is usually a sign of an underlying performance problem worth investigating, rather than just a design detail to polish.
How do I decide how long an animation should last?
As a general reference, functional microinteractions should last between 100 and 300 milliseconds to feel instant but perceptible; longer durations start to feel like an obstacle between the user's action and its visible result.
Do animations really affect mobile battery life?
Yes, noticeably during long sessions, especially with complex or continuous animations. It is a cost users rarely consciously associate with the website, but it does influence their overall experience of the site.
Should I use the parallax effect on my website?
With great caution and very sparingly, if at all, limited to a single standout element. Excessive use causes dizziness in some users and a notable performance cost, so it is worth evaluating carefully before applying it broadly.