Motion Design for UI - Micro-interactions and Animation Best Practices

Tutorials & How-To
1

Motion design in UI is where I spend most of my time now and the gap between designers who understand motion and those who don’t is getting wider. A few principles that consistently improve the work:

Micro-interactions should confirm, not decorate. An animation on a button press confirms the click was registered. An animation on a card hover teases interactivity. Both serve a purpose. Animations that exist only because the developer had time to add them are noise.

The easing function is 80% of the motion quality. Linear motion reads mechanical and cheap. Ease-in-out reads too symmetric and sluggish at longer durations. Use custom cubic-bezier curves calibrated to the speed and weight of the element. A toast notification and a modal entrance should have different easing.

Timing reference points: micro-interactions 100-300ms. UI transitions 200-500ms. Longer durations are marketing video, not interface. Users are trying to do something - motion should not make that slower.

Stagger animations carefully. Sequential reveal of list items or cards creates scan order and narrative. But stagger delay that’s too long at the end of the list creates frustration for users who arrived to find a specific item.

Animation as state communication: loading spinners, success checks, error shakes. These are the most valuable motion investments because they directly reduce user confusion.

What are you using to prototype motion currently? Figma Smart Animate, Principle, After Effects?

2

The easing function being 80% of the quality is exactly right and it’s the thing tutorials skip because it’s harder to demonstrate than the animation itself. Learning to read and write cubic-bezier values is what separates UI animators who learned from motion designers versus those who didn’t.

3

Stagger timing scaling with list length is something I now calculate rather than guess. If it’s a 3-item list, 60ms stagger is fine. 15-item list, 60ms stagger means the last item appears almost a second after the first and the user has already started interacting.

4

@pixelrage47 for prototyping motion I split between Figma Smart Animate for rapid concept testing and After Effects for production-quality specs the developer needs to match. Smart Animate for communication, AE for final reference.

5

The loading spinner note is underrated. How loading states animate is where users spend the most anxious time. An animation that communicates progress (versus just “working”) dramatically changes perceived wait time. Research-backed, not just aesthetic preference.

6

micro-interactions as confirmation vs decoration is the framework I use in design critiques now. “what is this animation confirming?” if the answer is nothing, it’s decoration, and it should be cut or reconsidered. gets to the purpose question quickly.