Animation on the web has come a long way from simple transitions and hover effects. Motion is more than flair; it is communication, guiding users, reassuring them, and delighting them while transforming routine workflows into memorable experiences.

But not all animation is created equal. The difference between good and great often comes down to intention. Great animation is purposeful, subtle, and rooted in the principles that have guided designers for decades.

The Principles of Animation

The 12 Principles of Animation provide a framework for creating more engaging and lifelike animations. Developed by Disney animators in the 1930s, they emphasize the importance of understanding the underlying mechanics of movement and how to apply them effectively.1

Understanding these principles can help you create animations that feel more natural and intuitive in your software.

Squash and Stretch

Everything has it's own mass, and the way it moves and deforms is crucial to conveying its weight and personality. If you are trying to create a sense of realism in your animations, consider how objects squash and stretch in the real world.

You can use this concept to create objects that seem malleable and responsive to their environment.

In this example, the wallet icon appears to squash and stretch on change. It's almost like it's morphing into a different shape. A simple but effective use of this principle.

Utilize in moderation. Overdoing squash and stretch can lead to a cartoonish effect that distracts rather than enhances. The key is to find the right balance that feels natural and complements the overall design, as is with all principles we will cover.

Anticipation

Anticipation is the act of preparing users for what comes next. In practice, this means giving a clue before a major action occurs. Such cues tap into subconscious expectations.

Use anticipation to set up important transitions or calls-to-action – like a notification icon that wiggles gently to imply updates awaiting. Select the issue below and hold to delete it to see how you can anticipate a deletion.

Avoid overusing it on every tiny interaction, too much anticipation can feel gimmicky or slow the experience. Save it for moments where an extra hint helps the user, and keep it quick. The goal is to inform the user about what’s coming, without making them wait unnecessarily.

Staging

If anticipation is about the before, staging is about the during. This principle is all about focusing the user’s attention on what matters most as an interaction unfolds.

In UI terms, staging might mean introducing interface elements one by one in a sequence. Imagine opening a complex settings panel: the backdrop might fade in first, then the panel slides into view, and finally the primary control within that panel gets a subtle highlight.

Choreograph the sequence, in this example, we use the backdrop to blur out the background to provide focus.

Staging helps guide the user’s focus, ensuring they don’t miss critical information or actions. It’s a subtle but powerful way to enhance clarity and usability.

Avoid animating too many things at the same exact time, or the user won’t know where to look. Staging is not always needed for very simple interactions, but for anything complex, it brings clarity.