Animations That Respect the User

Animations are often one of the first things people notice in a website.

They can make a product feel fast, responsive, and intuitive. But they can also just as easily make a site feel slow, distracting, or difficult to use.

Animation is not decoration

It’s easy to think of animation as something purely visual.

And to be fair, some of the best product companies today use motion in very expressive ways. In those cases, animation is part of the brand and the experience. The difference is intent.

A useful way to think about animation is:

  • ✅ Motion should explain what is happening.
  • ❌ Motion should exist just to impress.

In strong products, even expressive animation still communicates something. It could be where something came from, what just changed or what will happen next.

When animation only adds visual noise, it tends to age quickly. When it reinforces meaning, it tends to feel natural over time.

Small interactions matter more than big ones

Large, complex animations tend to get the most attention during development. In practice, the small ones are often more important:

  • hover states
  • focus transitions
  • subtle page transitions
  • feedback after interaction

These are the moments that shape how a site feels to use.

Avoid blocking the user

One of the most common mistakes is letting animation delay interaction.

For example:

// Avoid this
setTimeout(() => {
  showContent();
}, 1200);

If animation becomes a dependency for content, the site becomes slower and less predictable. Instead, content should be available immediately, with animation layered on top.

Sometimes you truly want to create an animation that blocks the UI to communicate your brand or a feeling, do it but avoid doing this to often. Use the cache and show an expensive or blocking animation less often.

Respect reduced motion preferences

Some users explicitly request less motion. As an animation creator you must really respect this even though you spent hours to create the most beautiful animation to show to the world.

A common baseline is to disable most motion:

@media (prefers-reduced-motion: reduce) {

  * {
    animation: none !important;
    transition: none !important;
  }

}

This is a good baseline, but in practice it’s often better to be more intentional.

Instead of disabling everything, you can reduce intensity:

@media (prefers-reduced-motion: reduce) {

  .fade-in {
    transform: none;
    opacity: 1;
  }

}

If you’re using utility frameworks like Tailwind, this can also be handled directly in the class layer:

  <div class="transition motion-reduce:transition-none">

The goal is not to remove all motion, but to avoid effects that can feel disorienting or uncomfortable. Even small adjustments here can make a meaningful difference.

Animate the right properties

Not all animations are equal in terms of performance.

Safe properties to animate:

  • transform
  • opacity

These can often be handled by the browser without triggering layout recalculations.

.card {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

Avoid animating:

  • width
  • height
  • top / left

These can cause layout shifts and reduce performance.

Scroll-based animations

Scroll-based animations are powerful, but easy to overuse. They should reinforce structure and not compete with content or require precise timing to feel correct.

There are different ways to implement this. The important part is not the tool itself, but how it’s used.

Native browser APIs like IntersectionObserver work well for simple cases. [Link to MDN]

For more control, libraries like GSAP (GreenSock Animation Platform) are often used. GSAP provides a consistent animation model, better sequencing, and handles cross-browser quirks that can otherwise become difficult to manage over time. It also makes it easier to coordinate multiple animations without relying on fragile timing logic. [Link to GSAP]

A simple example could look like this:

gsap.from(".section", {
  opacity: 0,
  y: 20,
  duration: 0.6,
  stagger: 0.1
});

This introduces a small delay between elements and creates a natural flow as content appears. In many cases, this level of animation is enough. More complex timelines and effects should be introduced carefully, and only when they clearly add value.

The goal is not to draw attention to the animation itself, but to make the transition feel natural.

Some final thoughts

Going back to our mental model defined in Part 1, animation sits at the top of the stack.

Requirements
    ↓
Structure (HTML)
    ↓
Layout & Styling (CSS)
    ↓
Behavior (JavaScript)
    ↓
Enhancement (animations, effects)

If the layers below are not solid, animation tends to amplify problems instead of solving them.

Well-used animation is rarely noticed. It simply makes things feel natural.

Poorly used animation is always noticed. And usually for the wrong reasons.

So, to Animate or not to Animate?

Sometimes the best decision is to not animate at all. In many cases, clarity and speed matter more than visual feedback.

Up Next

In the next part, we move from motion to structure again.

We’ll look at how decisions in HTML, metadata, and content hierarchy influence how a site is understood by search engines — often without adding any additional complexity.

Coming soon: Part 9: SEO That Starts in the Markup.

This is part of our “Building a Modern Website” series where we share how we approach software development, architecture and frontend engineering. If you’re building something similar, we also work as software development consultants. Check our Services for more details.