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.¹

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 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.

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.

Straight Ahead Action & Pose to Pose

There’s more than one way to animate a sequence. Straight ahead action means animating one frame after another in order. Pose to pose involves planning key moments and then filling in the gaps between.

We usually rely on straight ahead action on the web. We define the keyframes and let software interpolate the in-betweens. When trying to create animations, try to keep this in mind. You don't have to plan every single frame in detail. Instead, take the key points, and allow eases and transitions to fill in the gaps.

When it comes to deciding on what should be interpolated, consider how often this action will be used. For example, Apple only animates out their context menus as they are used so frequently, animating them in all the time can start to feel sluggish for the user.

Follow Through & Overlapping Action

When you stop moving, parts of you might continue moving, and when you start moving, not everything accelerates at once. This principle bring this natural continuity into animations.

Imagine scrolling through a list where each card enters the viewport with a tiny delay relative to the previous card. Instead of a block of content popping in together, you get a graceful cascade. This staggered timing is overlapping action at work, turning a static list into a dynamic flow.

The above example makes use of springs to make the transitions feel more alive. Springs itself is a whole topic that would need it's own essay to be discussed. It's not covered in this one, but if you want to do some digging on it yourself, check out the Animate with Springs talk from WWDC23.⁴

Use follow-through and overlapping actions to soften transitions and make them feel natural. Anytime an abrupt stop or start feels jarring, adding a bit of overlap can help. Be cautious not to overdo it, too much delay between elements can make the UI sluggish or unresponsive.

Slow In & Slow Out

Most things in nature don’t start or stop instantly and neither should good UI animations. Slow in & slow out means an object begins motion gradually, then speeds up, then slows down again at the end.

This principle is the cornerstone of smooth, comfortable transitions. In practice, it’s all about easing curves, an element might ease-out as it leaves the screen or ease-in when it appears. The result mimics how a car accelerates and brakes, or how a human moves – avoiding the jolt of an abrupt linear motion.

Above shows a few of the widely used easing functions. Check out easing.dev for a more comprehensive list, as well as the ability to create your own.⁵

The kind of eases you use as well can make a difference. For example, use an ease-out to make elements feel more snappy. Use an ease-in for elements that are entering the viewport.

Arcs

Arcs make movement feel organic. Instead of sliding elements in straight lines, a gentle curve adds realism and comfort. Use arcs for larger transitions or playful effects, but keep them subtle unless your app’s personality calls for more.

Arcs are hard to implement when it comes to ux. It's more relevant for brining information forward, like on a landing page. Alot of experimentation is needed to get it right.

Secondary Action

These are little flourishes that support the main action, adding depth and feedback without stealing the spotlight.

Secondary actions might be something like a checkmark icon that pops and then does a brief sparkle after a form is successfully submitted. The sparkle isn’t the main message, but it reinforces the feeling of success in a fun way.

Add secondary actions to inject delight and clarity into moments of user feedback. Sound can also be a secondary action, like a subtle click or whoosh that reinforces the feeling of interaction.

Think of your favourite games or media, when they want to show impact they often use sound effects and visual effects to enhance the moment. Utilize this frame of thinking.

Timing

In animation, timing refers to the speed of an action, pretty self explanatory. Choosing the right duration is what makes interfaces feel snappy or sluggish, deliberate or chaotic.

For example, a tooltip appearing might feel just right at 150 milliseconds, but utterly annoying at 400 milliseconds. A good rule of thumb I like to use is to keep durations under 300ms for most interactions.

Consistent timing across similar actions keeps the experience coherent and responsive. Keep this in mind. Define some timing guidelines for your animations and reuse them throughout your product.

Exaggeration

Sometimes clarity or engagement calls for pushing reality a bit. Exaggeration means intentionally amplifying a motion or effect beyond what is realistic, in order to make a point. In UI, it's more about emphasizing feedback or transitions so they’re unmistakable (and fun).

Exaggeration can also help usability. Imagine an error wiggle on a form field. The field doesn’t just subtly highlight red, it shakes to indicate something's wrong and needs attention.

It’s an exaggerated motion that instantly draws attention to the problem field, much harder to miss than a tiny change.

Use exaggeration sparingly for moments when you want the user to feel something strongly or notice something important.

It’s particularly at home in onboarding sequences, empty states, confirmations, or error notifications. Here a touch of theatrics can increase engagement or clarity.

Solid Drawing

Solid drawing in traditional animation is about making sure objects feel three-dimensional and believable in their space. We use this to create a sense of depth and realism in the interface.

It can be as simple as using shadows, layering, and perspective subtly to communicate hierarchy and interactivity.

When it comes to coding 3D transforms, take note of using perspective to create depth, which we use in this example. This CSS property allows you to define how far the object is from the viewer, giving a sense of realism to the 3D effect.

Another aspect is consistency in how things are drawn and move. If an icon rotates in 3D, it shouldn’t suddenly look flat or inverted incorrectly, paying attention to how things scale or skew maintains the illusion of volume.

Appeal

Lastly, appeal ties everything together. This is about crafting an experience that is visually and emotionally compelling to the user. It’s the difference between an interface that is technically usable and one that people want to use.

JohnPhamous@JohnPhamous

Gustav Ekerot@designgurra

Abhijeet Singh@abjt14

Mint@smintfy

Xavier (Jack)@KMkota0

Florian@flornkm

lochie@lochieaxon

Think of the products you find delightful to use, or always go back to. What makes them special? Is it the attention to detail, the playful interactions, or the way they anticipate your needs? Those elements contribute to their appeal.

Always consider appeal, especially if you’re aiming for a product that stands out or creates an emotional bond with users. Tell a story with your software. Make something people love.

Why These Principles Still Matter

In a world of AI-driven software and fast development cycles, polished animation is a differentiator. To stand out, you need to make your product feel great. Thoughtful motion design makes an interface feel crafted and intentional.

These principles help teams avoid the two extremes: sterile or overdone. Without them, you get either lifeless, jarring movements or flashy effects that frustrate. The sweet spot is just enough animation, of the right kind, at the right moments.

In the end, great interface animations are almost invisible. Users just feel that an app is smooth and enjoyable, often without knowing why. That’s the magic of these principles.

....making products more fun, human, and memorable.