The key idea
Each animation needs a purpose: to guide, explain change or express character while keeping reading and control comfortable.
A transition can make an interface clearer. It can also become an obstacle between a person and their goal. Before deciding how an element moves, we define what that movement contributes to the experience.
A distinctive website does not need to animate everything. A few connected moments can be enough: entering a section, a button responding or a component changing state.
Give each animation a task
Describe the effect’s function without calling it “beautiful”. It might direct attention to an action, show that a card has opened or connect two states of the same component.
Expressive movement also belongs in a design. An artistic piece can communicate character and make arrival memorable. Decide how much space it deserves. If an animation’s contribution is hard to explain, compare the experience with and without it.
Parallax with space and restraint
Parallax moves layers at different speeds. It is useful for depth when it leaves reading, links and section boundaries clear. We reserve it for decorative layers with restrained movement. Text and actions keep predictable positions, and the person controls scrolling through mouse, keyboard or touch.
On mobile, review framing and available space again. Keeping an image’s proportion does not require keeping its desktop size.
An interface can have character without asking visitors to wait for an effect to finish.
Rhythm between elements
Many elements arriving together can feel noisy. A slow sequence can hide information someone is already trying to read. Review transitions within the whole journey as well as individually.
Appearance order should follow reading order. Controls must respond promptly and transitions must support interruption: opening another element, closing a dialog or continuing to scroll should not leave an incomplete interface. Timing depends on distance, purpose and context.
An experience with less motion
Some people prefer fewer animations. The website can read this preference through prefers-reduced-motion and offer a calmer presentation. MDN’s documentation explains the media query.
On this website, reduced motion retains all text, images and actions. The full experience should still make sense when nothing moves by itself.
Review the journey, not just the effect
- Scroll quickly and return to the top.
- Navigate controls using the keyboard.
- Open and close an element before its transition finishes.
- Review mobile and tablet at real reading sizes.
- Enable reduced motion.
- Check that off-screen animations stop doing unnecessary work.
Movement should accompany the person. If it makes them wait, hides information or removes control, adjust the experience.
