What UI motion is for

Interface motion is not decoration. When it works, people barely notice it, yet they understand the product faster. When it is missing or wrong, screens feel abrupt, confusing or sluggish. Before opening After Effects, it helps to know what motion is supposed to do.

Four jobs motion does

1. Feedback: confirming that an action registered. A button that compresses slightly on press, a checkmark that draws itself after saving.
2. Orientation: showing where things come from and go to. A detail screen that expands out of the card you tapped tells you how to get back.
3. Focus: directing attention to what changed. A new notification that slides in, a field that shakes gently when input is invalid.
4. Continuity: connecting states so the interface feels like one space instead of separate pictures.

If an animation does none of these, question whether it needs to exist.

Timing in interfaces

Interface motion is fast. Most transitions sit between about 150 and 400 milliseconds. Small elements such as toggles move quickly, around 150 to 200 milliseconds. Large elements that travel across the screen, like full screen sheets, take longer, up to about 400 or 500 milliseconds. Anything slower starts to feel like waiting.

Platform guidelines such as Apple's Human Interface Guidelines and Google's Material Design publish recommendations on duration and easing. They are worth reading because people are used to the motion of their operating system.

Respecting reduced motion

Some people experience nausea or distraction from movement and turn on reduced motion settings on their devices. Good motion design includes a reduced version, usually replacing movement with a fade. We will note reduced motion alternatives as we go.

Why After Effects

Prototyping tools like Figma handle simple transitions well. After Effects gives you precise control over every curve, lets you combine many elements with complex timing and produces polished videos for presentations, app store previews and landing pages. It can also export animations as Lottie files that run inside real apps.

The sample project

We will work with a fitness tracking app: a home dashboard, a workout list, a workout detail screen and a completion screen. You can download the Figma file and follow along, or use your own designs.