When to add animation

• leverage metaphors

• convey information: the app is working hard to process information, elements have been move from one place to another, something is very important

• connect states — link actions to consequences. a state change is already happening and there’s a way to link them together that makes the moment a little special

• “Good design is suggestive” https://paulgraham.com/taste.html

• it’s not enough to solve the problem — you should solve the problem in a way that the end user loves to use the end product (see stock for companies compared to time invested in design)

When not to add animation

• Very frequent interactions.

• Adding any motion to this will also add friction to the interaction and could make it feel slower than it actually is

• Examples: Keyboard initiated actions, Hovering long lists in a frequently used menu or table

Great animations are fast

• Great animations are often fast

• Speed conveys they system is working hard to do what you want it to do

• As a general rule, keep it under 250-300ms (make thoughtful exceptions to this)

Elements that may influence duration of an animation:

• Frequency of use: ⬆️ Frequency, ⬇️ Duration

• Size: ⬆️ Size, ⬆️ Duration

• Easing: ⬇️ Perceptual speed, ⬆️ Duration

Performance

• transform and opacity are most performant elements to animate on the web (triggers composite)

• padding or margin triggers all 3 rendering steps : ( (layout, paint, composite)

• Keep in mind, even animations that are technically more performant can feel as if they slow down the experience (see When not to add animation)

Learn from natural motion

Great animation mirrors natural motion (preserving context)

• Spatial consistency, what comes in from the right exits to the right, unless it’s going somewhere

• When objects transition from an initial to final state, hint at the transition thru gesture/animation

• Pay attention to real world motion. What would a motion curve look like for sliding paper across a desk? A car starting forward, then stopping?

• All animations shouldn’t start/stop at exactly the same time. Differences in times mirror friction in the real world

Easing

• Easing is the main ingredient for influencing how animations feel

• The perception of speed can be more important than the actual speed (trust, satisfaction, engagement)

• Don’t be lazy. Create your own ease functions with the proper strength.

Ease in and out

• No sharp corners when starting and ending at rest, more natural than linear

• Needs a specific velocity, not well suited to touch interactions

• An element that is already on the screen and is changing position: ease-in-out (car accelerating and decelerating)

Ease out

• Starts fast and smooths to a top at the end

• Snappy or enter/exit animations can often default to some ease-out

Ease in

• Starts slow, then picks up speed

• In most cases, it likely makes sense to avoid ease-in since it starts slow and may feel sluggish

Ease

• By contrast, (default) ease can feel elegant, collected, for simple hover effects (background color, text color, etc.)

Linear

• Abrupt change in velocity

• Can be useful in some places, like repeating spinner

• Be cautious about using it

• Use for constant animations, like a marquee

Spring

• Continuous position and velocity when starting and ending at rest

• Springs can start with any velocity and still feel natural, better suited to touch interactions

• Spring doesn’t necessarily mean it needs to bounce. Objects attached to springs start faster and end slower

How springs work:

• Mass of object

• Stiffness of attached spring

• Damping, or how much friction is applied to the object

Designing animations

Find animations you like. Try to recreate them from scratch if you can.

• What makes them great?

• What would ruin it?

Have patience. Review again the next day and see how it feels.

Resources

Easing Graphs — Cubic and spring animations with copy/paste code

Easing Wizard — Easing playground with copy/paste to CSS and Tailwind

Juice — A post by Brad Woods breaking down non-essential feedback that enhances experience.

Motion & Playfulness — Great presentation by Benjamin De Cock about animations on the web.

Family Values — A post on how the Family app was built. Contains lots of animation details.

Designing Fluid Interfaces — X. Learn how to design with gestures and motion that feel intuitive and natural, making your app a delight to use.

Animate with Springs — WWDC23’s overview of ease, linear, and spring animations and some of the math behind them

Great Animations — Emil Kowalski on what makes an animation feel great.

Design Spells — Curation of design details that feel like magic

Inline Layout Switch Ideas — Two ideas for animating images from an inline layout to a column or grid-based one.

Inside Framer’s Magic Motion — A guide on recreating framer's magical layout animations.

Partial Keyframes — Creating dynamic, composable CSS keyframe animations

The Magic of Clip Path — An introduction to animating the clip-path property.