Can you still learn motion design in the age of AI? Start with UX motion — Blog

Ask an AI for a landing page today and it will write the animation code in seconds. Yet the pages that come back often land at one of two extremes: nothing moves at all, or everything moves at once.

AI can already write animation. What it lacks is the judgement of when, how long and why something should move.

This post is for two kinds of readers: designers who want to learn motion, and people who build products with AI and want them to feel more alive. Both start from the same place, UX motion.

What is UX motion?

UX motion is motion that helps people use an interface. It tells them what just happened, where something came from and where to go next. Decorative motion is there to be watched; UX motion is there to be used.

In his UX in Motion Manifesto, motion designer Issara Willenskomer sums up four ways motion supports usability:

Expectation: close the gap between what people expect to happen and what actually happens.
Continuity: keep people oriented when the screen changes.
Narrative: link separate moments into one sequence with a beginning and an end.
Relationship: show how objects relate in space, time and hierarchy.

He also lists 12 principles of UX motion, from easing and offset and delay to parenting, transformation, masking and parallax. Of Disney’s classic 12 principles of animation, he argues that easing is the one that almost always applies to interfaces, because animation is made to be watched and an interface is made to be used.

How large teams write motion down

Large design systems agree to a surprising degree: motion should have a purpose, stay short and be possible to turn off. And they write it down as tokens instead of leaving it to taste.

Apple

Apple’s Human Interface Guidelines say not to add motion for its own sake, to keep feedback brief and precise, to avoid motion on interactions people repeat all day, and to let people cancel an animation instead of waiting for it to finish.

IBM Carbon

IBM’s Carbon design system splits motion into two moods. Productive motion is quick and quiet, for moments when people are getting work done. Expressive motion is visible and lively, saved for important moments such as opening a page or confirming a key action.

Carbon names six durations, from 70 ms for buttons and toggles to 700 ms for dimming a background, and pairs them with separate curves for entering, leaving and moving on screen.

Accessibility

WCAG success criterion 2.3.3 asks that motion triggered by an interaction can be turned off unless it is essential. For people with vestibular disorders, parallax and large movements can cause dizziness or nausea. On the web this starts with the prefers-reduced-motion media query.

Browsers are catching up too. In October 2025, same-document view transitions became available in all major browsers, so smooth changes between views no longer need a large library.

A motion spec is a language AI can read

Without a spec, AI falls back on defaults. Every element gets the same ease and 300 ms, entrances are long enough that people wait for them, prefers-reduced-motion is ignored, and things play by themselves instead of responding to the hand.

These come from everyday use, not from a study. But they share one cause: “add some animation” gives AI nothing to decide with.

Write the decisions down and AI can follow them as well as a teammate. Five habits that work in a prompt or in a project’s style guide:

Define a few duration and easing tokens, and let AI choose only from them.
Say what the motion is for: setting expectations, keeping continuity, telling a sequence or showing a relationship. Not just “make it animated”.
Use precise words: ease-out for things entering or leaving, ease-in-out for things moving on screen, linear for constant motion.
Always ask for a reduced-motion version.
Finish by asking AI to review its own work: which animations can be removed?

The industry is heading the same way. LottieFiles has published an open-source motion design skill that teaches coding agents to decide timing, easing and choreography before writing code, and design engineer Emil Kowalski shares a skill for building, reviewing and improving animations. Both install into coding agents such as Claude Code.

So where can you learn it?

There are more ways to learn motion design today than ever. One route works for designers and AI builders alike:

1. Read the free guidelines

Start with Apple’s motion guidelines, which are short, then Carbon’s motion pages for concrete durations and curves. Willenskomer’s UX in Motion Manifesto gives you the words to describe what you see.

2. Take one hands-on course

Emil Kowalski’s Animations on the Web (animations.dev) teaches easing and timing through interactive exercises and code, and includes a module on animations and AI. School of Motion’s UX Animation Essentials, taught by Ivan Witteborg, covers microinteractions, screen transitions and handing timing over to developers, using Rive, ProtoPie, Figma and After Effects.

3. Hand your judgement to AI

Turn what you learned into tokens and a short style guide, or start from an existing skill, and let your agent follow it. Then keep reviewing the result. Your eye is still the final check.

Practise with Mografy

Learning motion takes practice, and practice needs quick feedback. Mografy is free and open source: Claude Code or Codex builds motion graphics as code, and you check and adjust them in a live preview.

Ask for “three cards, one after another”, look at the timeline to see the stagger, change a single timing and watch the difference. It is a low-barrier way to train the eye for timing and easing that UX motion depends on.

AI can write the motion. Knowing why it moves is still up to you.

Make motion with us

Join the Mografy Discord to share what you make, ask questions and help shape what we build next.

Join Discord Set up Mografy