If you build logos, layouts and social visuals all day, motion can feel like a separate discipline with its own vocabulary. It is not. The classic animation principles for designers were written for hand drawn characters, but the useful part translates almost perfectly to a logo reveal, a button that reacts to a tap, or a 6 second vertical ad. You do not need a character animation background. You need to know why a rectangle sliding at a constant speed feels cheap, and why the same rectangle with the right curve feels expensive.
This guide takes the eight principles that actually matter for graphic and UI work, explains each one in plain language, and gives you a before and after description so you can hear the difference in your head before you open your software.
Why static designers should care about animation principles
Motion is no longer optional in a brand system. A logo now has to work as a favicon, a stamp on a print piece, and a 2 second animated sting on a vertical video. Buttons are expected to respond. Carousels are expected to breathe. The problem is that most designers approach motion the way they approach layout: they position the start, position the end, and let the software fill the middle. That default in-between is linear, and linear motion is the single biggest reason amateur animation looks amateur.
The principles below are essentially a set of physics shortcuts. They tell the viewer’s brain that the object on screen has weight, intent and consequence. That is the whole trick.
Quick reference: the 8 principles and where they land in real work
| Principle | What it controls | Best use in design work |
|---|---|---|
| 1. Timing and spacing | Perceived weight and speed | Every transition, tone of the whole brand |
| 2. Easing (slow in, slow out) | Naturalness of a move | Menus, modals, page transitions |
| 3. Anticipation | Readability, intent | Logo reveals, CTA emphasis, loaders |
| 4. Follow through and overlapping action | Life and softness | Text stacks, card grids, icon sets |
| 5. Squash and stretch | Material, flexibility | Buttons, toggles, playful mascots |
| 6. Arcs | Organic path of travel | Add to cart, notification badges, mograph |
| 7. Staging | Where the eye goes | Social posts, explainer sequences |
| 8. Secondary action and restraint | Richness without noise | Hero animations, brand stings |
1. Timing and spacing: the principle that fixes 80% of bad motion
Timing is how many frames a move takes. Spacing is how the distance is distributed across those frames. Two objects can travel the same distance in the same duration and feel completely different depending on spacing.
Before and after
- Before: A logo mark slides in from the left over 1.2 seconds at an even speed. It reads as a slideshow transition from 2009. The brain registers no mass, just a picture being moved by software.
- After: The same mark covers 70% of the distance in the first 200ms, then settles into the last 30% over 300ms. Now it feels like an object that was thrown and caught. Total duration went down, perceived quality went up.
Practical durations to start from
- Micro-interactions (hover, toggle, checkbox): 100 to 200ms
- Standard UI transitions (modal, dropdown, tab switch): 200 to 350ms
- Page or screen level transitions: 350 to 500ms
- Logo stings and brand reveals: 1.2 to 2.5 seconds total
Rule of thumb: if a user triggered it, it should feel instant. If the brand triggered it, it can take its time. Anything in UI over 500ms starts to feel like lag rather than polish. There’s a good explainer over at lobehub.com.
2. Easing: your most important design decision after duration
Easing is spacing expressed as a curve. Slow in and slow out means an object accelerates from rest and decelerates before stopping, exactly like everything in the physical world. Linear motion only exists in machines and cheap animation.
Before and after
- Before: A dropdown opens with linear easing. It feels mechanical, and the moment it stops is abrupt, like a video cut.
- After: The same dropdown uses ease-out. It launches fast, then glides into position. The user’s eye arrives at the content at the same moment the panel settles. Nothing feels faster than something that starts immediately.
Which curve for which job
| Curve | CSS value | Use it for |
|---|---|---|
| Ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Elements entering the screen, opening panels |
| Ease-in | cubic-bezier(0.5, 0, 0.75, 0) | Elements leaving the screen, dismissals |
| Ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | Moves that start and end on screen, loops |
| Slight overshoot | cubic-bezier(0.34, 1.56, 0.64, 1) | Playful confirmations, badges, toggles |
Designer shortcut: entrances ease out, exits ease in. If you remember only one line from this article, remember that one. There is more on it in Mastering Animation’s 12 Principles.
3. Anticipation: the small move backwards before the big move forward
Before a character jumps, it crouches. Before an arm throws, it winds up. Anticipation prepares the eye so the main action reads clearly instead of surprising the viewer.
Before and after
- Before: A logo wordmark scales up from 0% to 100% and stops. It appears, but it does not arrive. There is no narrative.
- After: The wordmark dips to 96% scale for 6 frames, then springs to 100% and settles. Same asset, same duration, but now the mark feels like it took a breath and asserted itself.
Where anticipation works in design
- Logo reveals: a container line that contracts slightly before expanding to release the mark
- CTA buttons: a 2% scale down on press, then release to 100%, which mimics physical depression
- Loaders: a spinner that pulls back before its first rotation feels intentional rather than stuck
Keep it subtle. In UI, anticipation should be measured in single digit percentages and 60 to 100ms. Anything bigger looks like a bug.
4. Follow through and overlapping action: nothing stops all at once
Follow through means parts of an object keep moving after the main mass has stopped. Overlapping action means different parts start and stop at different times. Together they are the difference between a rigid slideshow and a designed sequence.
Before and after
- Before: A card with an image, a headline and a button all fade in together over 300ms. It reads as one flat block. The eye has nowhere to go.
- After: Image enters first, headline follows 60ms later, button 60ms after that. Total time barely changes, but the eye is guided in reading order and the card feels composed instead of pasted.
Stagger values that work
- Tight lists and menu items: 30 to 50ms between items
- Card grids: 50 to 80ms between cards, capped at around 8 items so the last one is not late
- Headline word by word in social video: 70 to 120ms
- Logo parts in a reveal: 80 to 150ms, with the last element carrying a small overshoot
Follow through also lives in the settle. A panel that slides in and stops dead feels stiff. A panel that slides in, passes its mark by 4 pixels and returns feels alive. Four pixels. Not forty.
5. Squash and stretch: yes, even for a corporate button
This is the principle designers dismiss first because they picture a bouncing cartoon ball. In interface and brand work, squash and stretch is applied at 2 to 8%, not 40%, and it communicates material rather than comedy.
Before and after
- Before: A toggle knob jumps from left to right position instantly. It reads as a state change in a database.
- After: The knob stretches horizontally by 6% while travelling, then squashes by 4% on impact before returning to a circle. It now reads as a physical object with a bit of rubber in it, and the state change is impossible to miss.
Rules to keep it professional
- Preserve volume: if you scale X to 106%, scale Y to about 94%. Otherwise the object looks like it grew, not deformed.
- Deform on impact and acceleration only, never at rest.
- Match the brand personality: a fintech app gets 2 to 3%; a kids brand or a food delivery app can push to 10%.
- Never squash typography in a logotype. Deform the container, the shape or the mark, not the letterforms, or you break the brand.
6. Arcs: straight lines are for machines
Natural movement travels on curves. An element that flies from a product image to a cart icon in a perfect diagonal feels robotic. The same element following a gentle arc feels tossed by a hand.
Before and after
- Before: An “added to cart” thumbnail moves in a straight diagonal to the header icon. Functional, forgettable.
- After: The thumbnail rises slightly, curves across and drops into the icon with a small scale down along the way. Users actually watch it, and the feedback registers.
In motion graphics tools this means editing the spatial path, not only the value graph. In CSS, you can fake it by animating X and Y with different easing curves, which produces a curved path for free.
7. Staging: motion is a spotlight, use one at a time
Staging is about presenting one clear idea per moment. Static designers already know this as hierarchy. In motion, hierarchy also has a time axis: what moves first owns the attention.
Before and after
- Before: An Instagram post where the background pattern scrolls, the headline fades, a badge spins and the logo bounces, all in the first second. The viewer sees chaos and swipes away.
- After: The background holds still, the headline enters alone, the badge appears only once the headline has settled, the logo lands last. Same assets, one message at a time, and the completion rate climbs.
Staging checklist for animated social posts
- Hook in the first 3 to 5 frames: the strongest visual must already be on screen, not animating in from nothing
- One moving focal point at a time
- Design for sound off: the motion has to carry the meaning alone
- Hold the final frame for at least 1 second so the logo and the offer can be read
- Loop cleanly if the platform auto repeats: the last frame should be able to sit next to the first without a visual jolt
8. Secondary action and restraint: seasoning, not the meal
Secondary action supports the main move: a subtle shadow that softens as a card lifts, a highlight that sweeps across a metal logo, a colour shift during a state change. It adds richness only when it stays subordinate.
Before and after
- Before: A card hover that lifts 8px, rotates 3 degrees, glows, changes colour and animates its border. The interface feels nervous.
- After: The card lifts 4px with the shadow softening in sync. One primary move, one supporting detail. It reads as premium because it is quiet.
The restraint test: remove the secondary action and watch the animation again. If nothing feels lost, delete it permanently.
Putting it together: a logo reveal in 6 steps
- Stage it. Decide the single moment the viewer must remember. Usually the mark locking into place.
- Set total duration. 1.5 to 2 seconds is plenty for a sting. Longer only if a voiceover demands it.
- Add anticipation. A short contraction, dip or hold before the main move, roughly 8 to 12 frames at 30fps.
- Ease everything. Ease-out for the entrance, no linear keyframes anywhere except constant loops.
- Overlap the parts. Mark, then wordmark, then tagline, staggered by 80 to 150ms. Never all at once.
- Follow through on the last element. A tiny overshoot and settle, then a full 1 second hold on the locked up logo.
Applying the principles to button micro-interactions
| State | Motion | Duration | Principle |
|---|---|---|---|
| Hover | Scale 102%, shadow softens | 120ms ease-out | Secondary action |
| Press | Scale 96%, shadow tightens | 80ms ease-in | Anticipation and squash |
| Release | Return to 100% with slight overshoot | 200ms overshoot curve | Follow through |
| Success | Label swaps to check icon, arc path | 250ms | Arcs and staging |
Common mistakes static designers make in their first motion projects
- Linear keyframes everywhere. The default is almost always wrong.
- Everything animating at once, which destroys hierarchy.
- Durations that are too long. If it reads as “nice animation” in UI, it is probably too slow.
- Animating opacity only. A fade with no movement carries no weight. Pair opacity with a small position or scale change.
- Ignoring reduced motion. Respect the prefers-reduced-motion setting and provide a simple fade fallback. It is an accessibility requirement, not a nicety.
- Bouncing corporate brands. The energy of the motion is part of the brand voice. Match it to the tone of voice document you already have.
A simple practice routine
- Week 1: animate a square moving 400px across the screen with five different easing curves. Watch them back until you can identify each one by eye.
- Week 2: take one of your existing logos and build three reveals: one elegant, one energetic, one minimal. Same asset, three personalities.
- Week 3: rebuild the button state table above in your prototyping tool and test it on a phone. Motion always feels different on a real device.
- Week 4: convert one static social post into a 6 second animated version using staging and staggering only. No new assets allowed.
Tools worth your time
- Figma: smart animate for quick UI prototypes and easing experiments
- After Effects: the standard for brand stings, with the graph editor as the place where quality is actually made
- Rive or Lottie: lightweight vector animation that ships straight into apps and websites
- Plain CSS: more than enough for hovers, presses and page transitions, and the cheapest performance you will ever get
FAQ
What are the 12 basic principles of animation?
They are squash and stretch, anticipation, staging, straight ahead action and pose to pose, follow through and overlapping action, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing and appeal. They were defined by Disney animators Ollie Johnston and Frank Thomas in the book The Illusion of Life, published in 1981.
Do I need all 12 principles as a graphic designer?
No. Straight ahead action versus pose to pose is a production workflow question, and solid drawing belongs to character animators. The eight covered above carry nearly all of the practical value for UI, logo and social work.
How long should a UI animation last?
Between 100 and 500ms for most interface work. Under 100ms and users will not perceive the transition; over 500ms and it starts to feel like the product is slow. Brand stings and title sequences are the exception and can run 1.5 to 3 seconds.
What is the difference between easing and timing?
Timing is how long the move takes. Easing is how the speed is distributed inside that duration. Two animations can share the same 300ms timing and feel completely different depending on the easing curve.
Can I use squash and stretch in a serious corporate brand?
Yes, at low intensity. Two to four percent deformation on impact reads as quality material rather than cartoon energy. Keep it away from letterforms in a logotype and always preserve volume.
What is the fastest way to make my animations look more professional?
Three changes, in order: remove every linear easing curve, shorten your durations, and stagger elements instead of moving them all at the same time. Those three fixes will improve most timelines more than any plugin. 7 Principles for Great UI Animations tackles the same question from another angle.
Final word
Animation principles for designers are not an extra skill set bolted onto your craft. They are the same design thinking you already apply to hierarchy, contrast and rhythm, extended onto a timeline. Start with easing, add staggering, then experiment with anticipation and follow through. Within a handful of projects, motion will stop feeling like a foreign discipline and start feeling like another tool in your kit for making brands feel intentional.