Do Modern Websites Have Too Many Animations? UX or Distraction?

[Botinquiered]

Hey everyone,

I’ve been browsing a lot of new websites lately, and I can’t help but notice how heavy the use of animations has become, from scrolling effects and hover transitions to entire backgrounds that move.

While these effects can make a website look sleek and modern, I sometimes feel they slow down performance or distract users from the main goal, reading content or converting.

So I wanted to ask the community:

Where’s the balance between good UX and visual appeal?
Would love to hear your opinions, examples of sites that do this well (or poorly), and any best practices for keeping animations smooth and meaningful.

 

[hipcat]

I've noticed that too and it slows down the page loading so it looks glitchy sometimes. A little bit of animation is ok, but too much just overwhelms the page experience and takes away from the main content.

 

[Jack Liwoski]

Look it depends upon the niche. Sometime those animations play a vital role in maintaining the brand reputation. But this doesn't mean you have to insert animation in every website. You mostly see those animation that are single paged or just have 4 to 5 pages.

But, when it comes to big project or sites where you have hundered or thousands of pages, then inserting animation in this kinda websites is not sensible. Coz it can make your sites speed VERY low. And that's why vast majority of big brands keep their site simple and minimalistic.

Short answer is: it depends upon the niche you're working in. If it's small project (5 to 15 pages), then you can add those cozy and cool animation. if it's not, then keeping your site simple is a senseible approach.

 

[Nemanja]

Nemanja

If it's small project (5 to 15 pages), then you can add those cozy and cool animation. if it's not, then keeping your site simple is a senseible approach.

Page count isn't really the variable. A page that stutters because of animation stutters whether the site has 5 pages or 5000, since the visitor only loads one at a time.

What decides it is which property you animate. Transform and opacity get handed to the compositor and never force a layout recalculation. Animate width, height, top, left or margin and every frame means a fresh layout pass and a repaint, which is where the dropped frames come from. Big brands don't look fast because they avoid animation, they look fast because someone profiled it and threw out the parts doing layout work on scroll.

 

[fabwebstudio]

Great question—this is a common UX debate.

The balance: animations should support the user, not impress them. When they guide attention (micro-interactions, subtle hover states, progress feedback), they improve UX. When they delay content, hijack scrolling, or run constantly, they hurt conversions and accessibility.

Best practices

Use animations with a clear purpose (feedback, hierarchy, guidance)

Keep them short and subtle (150–300ms is usually enough)

Prefer CSS transforms/opacity for performance

Respect reduced-motion preferences

Never block reading or core actions

 

[geekteam]

Well, it really depends on site, but in most cases users prefer something more convenient. It's great for sure If you've hired a cool designer and now you have 10 cool animations on the front page etc. etc., but those visuals sometimes might cost you clients or just ppl who don't like when things are flashy, but useless.

 

[mamta25]

Hey,
These days, websites love using animations to look modern and catch your eye. But too many can slow things down or pull you away from what really matters, reading or taking action. The best animations are simple and meaningful, like a smooth button effect or a gentle transition. Sites like Apple and Stripe do this really well. The simple rule is to use animations to make things easier or clearer for users, not just to look fancy.

 

[reveus]

I think the real issue is not the number of animations, but whether they compete with the user’s attention. A subtle transition that explains a state change can improve the experience, while a constantly moving background or scroll effect can make even a well-designed page tiring to use. I usually ask one simple question before adding an animation: does this help the user understand or complete something faster? If the answer is no, it probably doesn’t need to be there. Performance and reduced-motion preferences are also worth considering, especially on mobile.

 

[arindamb]

arindamb

I usually ask one simple question before adding an animation: does this help the user understand or complete something faster?

That filter question is the right one to ask. I'd add one implementation trap that catches people even when the animation itself is justified.

The usual scroll reveal pattern sets elements to opacity 0 in CSS, then waits for an IntersectionObserver to add a class. If the script fails, loads late, or gets blocked, the text is sitting right there in the HTML where nobody can read it. Safer to let the CSS default to visible and have the script add a class to html or body first, so the hidden state only exists once JavaScript is actually running. Same place to gate the whole thing behind prefers-reduced-motion. Has anyone else hit a page where the bottom half just stayed blank because the observer never fired?