The physics of UI: Applying principles of mass, momentum, and elasticity to your animations

Imagine you are pushing a heavy filing cabinet. Now imagine that you are pushing a shopping cart. The filing cabinet resists, moves slowly and stops abruptly when you let go. The shopping cart slides easily, coasts and wobbles to a stop. These objects obey the same laws of physics, but their different properties – their mass, their momentum, their elasticity – create completely different feelings.

Our digital interfaces are weightless, but it shouldn’t feel that way. When we ignore physics, our animations feel robotic and disconnected. When we apply its principles, we create interfaces that feel tangible, predictable, and satisfyingly real. This is not about realism in itself. It’s about using the language of the physical world to make the digital world intuitive.

Let’s build a mental model for the physics of UI.

1. Mass: the perceived weight of an element

In physics, mass is an object’s resistance to motion. In UI, mass is visual density.

The rule: The more an element conveys visual ‘weight’, the more inertia it should have.

• High mass elements: Modals, large panels, navigation drawers. These should move more slowly, accelerate gradually, and feel substantial.
• Low mass elements: Tooltips, toggle switches, small buttons. These can click, bounce and move quickly.

Code Thinking Process: A high mass modal should not use 200ms linear ease. A heavier one is needed ease-out curve with a longer duration (e.g. 350 ms) to indicate that it is being “pushed” into view. A lightweight tooltip could use a snappy tip ease-in-out at 150 ms.

Example: Compare iOS’s modal sheet, which slides up with a slight delay as if rising from the bottom of the screen, with a macOS menu that appears instantly. The sheet has more perceived mass.

2. Momentum and acceleration: the feeling of force

In the real world, objects don’t start and stop instantaneously. They speed up and slow down. This is the most important principle for natural movement.

The rule: Nothing moves linearly. Use easing curves to simulate acceleration (ease-in) and deceleration (ease-out).

• Easy to engage (gear): Use when an element is build energy move. Example: an element that leaves the screen via the bottom.
• Ease-Out (delay): Use when an element is to relax out of motion. Example: A panel that slides in from the side. This is the most common and generally the most natural.
• Easy in-out: Use this for elements that move through the viewport, such as flipping a card.

Tutorial: creating your convenience
Instead of blindly choosing presets, think about the force applied.

css

/* Too robotic, no physics */
.element { transition: transform 300ms linear; }

/* Natural: A quick, decisive push that slows to rest */
.element { transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* A strong ease-out */

3. Elasticity: the subtle resilience of life

Perfectly rigid objects are rare. Most things have a little give. Elasticity in the user interface provides a sense of fluidity and confirms that an action has been received.

The rule: Use subtle overshoot and settle for interactive elements, especially those that are ‘stretched’ or ‘pulled’.

• When to use: Pull-to-refresh, form entry on successful validation, toggle switches, drag to a limit.
• When to avoid: Major navigation transitions, serious error conditions, or anything that should feel rigid and formal.

Tutorial: Pressing the “stretched” button
A button should not only change color. It can be slightly compressed when pressing and releasing with a small overshoot.

css

.button:active {
  transform: scale(0.97); /* Compression on press */
  transition: transform 0.1s ease-out;
}
/* On release, the transform is removed, and a separate animation 
   can briefly scale to 1.01 before settling at 1, giving a micro-bounce. */

4. Friction and resistance: connecting input to movement

Your finger on a touchscreen is a force. Scrolling, dragging and swiping should feel connected to that power.

The rule: The movement of a UI element should feel like a direct, physical result of the user’s gesture.

• High friction: Useful for precise controls (e.g. a date picker wheel). The movement should stop shortly after the gesture ends.
• Low friction: Useful for slow scrolling (e.g. a long page). The movement should extend and slow down smoothly after the gesture.

Example: A properly implemented swipe-to-dismiss card should exactly match the speed of your finger. When you let go, it should continue with momentum. If the smudge crosses a threshold, it should fly away. If not, he should jump back with slight resistance.

All together: a physics audit for your user interface

Walk through your product and ask these questions:

1. Mass: Do my heaviest elements (modals, sidebars) move with the right inertia and weight?
2. Momentum: Do my animations all use linear timing? Can I replace 90% of it with a well-made easy-out?
3. Elasticity: Where can a subtle overshoot (5-10%) add a moment of joy and affirmation? (Tip: Try it after successful form submission).
4. Friction: Do my interactive gestures (drag, swipe, scroll) feel connected to my finger, or are they distant and robotic?

The goal: intuitive credibility, not realism

We are not simulating a ballistics laboratory. We use the user’s innate, lifelong understanding of physics to build credibility. A modal that moves more smoothly feels like it’s moving under the user’s control. A button with elastic feedback feels alive and responsive.

If the physics are right, the interface doesn’t work alone. It feels right. The user’s subconscious accepts the digital object as something he or she can manipulate, not just observe. They stop thinking about the interface and start thinking about their task.

That is the power to make pixels obey the laws of a universe in which they were never born.