Microinteractions and purposeful animation: when motion helps and when it gets in the way

Motion grabs attention. That is an advantage when you want to guide the eye, and a risk when the motion has no reason to exist.

What motion is for

Every animation should serve a clear purpose:

• Feedback: confirming that a click was registered.
• Orientation: showing where an element came from and where it is going.
• Hierarchy: revealing content in order of importance.
• Personality: reinforcing the brand’s identity, in moderation.

If an animation serves none of these purposes, it is decoration, and too much decoration is tiring.

Scroll-triggered entrances

Revealing blocks as the visitor scrolls creates rhythm, as long as it is subtle. Prefer short movements and durations between 400 and 700 milliseconds, with a smooth easing curve. Don’t hide important content behind slow animations.

Hover and focus

Hover and keyboard focus states need to exist and be visible. They show what is clickable and guide people who navigate without a mouse. Changes in color, shadow and a slight lift work well.

Performance

To keep things smooth at 60 frames per second:

1. animate only transform and opacity;
2. avoid animating properties that change the layout;
3. use will-change sparingly;
4. pause off-screen animations, such as a canvas background;
5. test on modest phones, not just on your computer.

Accessibility

Respect the reduced-motion preference. In CSS:

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

Never use rapid flashing, which can cause problems for sensitive people, and offer ways to pause motion that lasts longer than five seconds.

When not to animate

In forms, tables and reading content, motion tends to get in the way. Keep the content still and save the shine for the moments that deserve it, such as the top of the page and the calls to action.

Conclusion

The best animation is the one visitors feel but don’t notice. If they comment on the effect instead of the offer, it has gone too far.