Free · 8 min read
Motion design for beginners: principles of motion and first exercises
Motion design from scratch: the classic animation principles, timing and easing, accessibility and three exercises you can do in any app today.
- Which principles of motion work in any app
- How many milliseconds an interface animation should take
- Three starter exercises and where to get feedback
- Free
- 1,504 members
- Join in 1 click
Motion design from scratch: 5 steps
- 1
Step 1
Understand why a designer needs motion
- 2
Step 2
Learn the classic principles of animation
- 3
Step 3
Timing: how long motion lasts
- 4
Step 4
Easing: motion curves
- 5
Step 5
Accessibility and three first exercises
- 1,504
- community members
- 8,915
- messages with questions since July 2024
- 9
- design games since September 2024
- 759
- people wrote in the chat
This guide is for you if you
Want to get into motion but don't know where to start
You see dozens of apps and courses and can't tell what to learn first: the tool or the motion itself.
Design static work
You make interfaces, banners or logos and want them to move with purpose, not just because it looks nice.
Already animate, but something's off
You can set keyframes, but the motion still looks mechanical or too slow.
In short
- Motion design isn't an app; it's the skill of controlling motion: what moves, when, for how long and with what character. The principles are the same in After Effects, Figma or Procreate.
- The foundation is the 12 principles of animation from Frank Thomas and Ollie Johnston's book The Illusion of Life (1981). For designers the most useful are timing, easing, anticipation and arcs.
- In interfaces motion should be short: Nielsen Norman Group recommends mostly 100–500 ms.
- Uniform motion looks unnatural. An element that enters should slow down at the end (ease-out); one that leaves often speeds up (ease-in).
- Motion isn't for everyone: let people stop auto-playing animation that lasts longer than 5 seconds, and never flash more than three times a second.
Motion design from scratch: 5 steps
- 1
Step 1
Understand why a designer needs motion
Motion in design should do a job, not decorate. The first piece of advice in the Apple Human Interface Guidelines is to add motion purposefully and not for its own sake: excessive motion distracts, and some people find it physically uncomfortable. Nielsen Norman Group names the main jobs of animation in an interface:
- feedback: a button responds to a tap, a switch slides over;
- state change: an element expands, loading finishes;
- navigation: the user sees where a new screen came from and where the previous one went;
- signifiers: motion hints that an element can be interacted with.
💡 Before every animation, answer one question: what will a person understand thanks to this motion? If there's no answer, the animation can go.
- 2
Step 2
Learn the classic principles of animation
The 12 principles of animation were described by Disney animators Frank Thomas and Ollie Johnston in the 1981 book The Illusion of Life: Disney Animation. They grew out of the studio's work from the 1930s onwards, yet they apply just as well to advertising and web design. You don't need all twelve at once. Start with the ones a designer will use most:
- Timing: the number of frames or milliseconds decides whether an object feels light or heavy;
- Slow in and slow out: more frames near the extreme poses makes motion feel alive;
- Anticipation: a small movement in the opposite direction before the main action, like a wind-up before a throw;
- Squash and stretch: conveys weight and flexibility, but the object's volume must stay the same;
- Arcs: in nature almost everything moves along an arc, not a straight line;
- Follow through and overlapping action: parts of an object don't stop at the same moment;
- Staging: one clear action at a time, so the eye knows where to look.
💡 The full list, explained by the authors themselves, is on the Frank & Ollie site. Read one principle at a time and try it right away in a simple exercise.
Don't learn alone
In the community you can share your first animation, ask about timing or easing curves and get feedback from other designers. Show two versions of the same motion and ask which reads better. It's free.
Get feedback on my animationFree. 1,504 designers are already in the community.
- 3
Step 3
Timing: how long motion lasts
Beginners' most common mistake is animations that are too long. Nielsen Norman Group writes that most interface animations should last 100–500 ms, depending on complexity and how far the element travels. Simple feedback like a switch or a checkbox takes about 100 ms, a modal appearing 200–300 ms, and at 500 ms animation starts to feel like a drag. Material Design 3 suggests starting pairs for transitions:
- an element entering the screen: 400 ms (Emphasized decelerate);
- an element leaving the screen permanently: 200 ms (Emphasized accelerate);
- a transition that begins and ends on screen: 500 ms (Emphasized), or 300 ms for simple utility elements (Standard).
💡 The rule from both sources: entering takes longer, exiting is shorter. What's new on screen needs attention; what's leaving doesn't. And the further an element travels, the longer the motion.
- 4
Step 4
Easing: motion curves
Objects in the real world don't start or stop instantly, so uniform (linear) motion looks mechanical. The character of motion comes from the easing curve. Three main types:
- ease-out: starts fast and slows down; for entering elements, so the eye can see where the object will stop;
- ease-in: starts slowly and speeds up; for leaving elements, as if they're flying away;
- ease-in-out: a slow start, fastest in the middle and a gentle stop.
💡 Material Design 3 Expressive is moving from curves and durations to a physics system based on springs, with stiffness and damping. Start with curves: every app has them, and springs will be easier to grasp once you feel the difference between ease-in and ease-out.
Motion looks off and you can't tell why? Ask the community → - 5
Step 5
Accessibility and three first exercises
Motion can get in the way: for some people, zooming or panning animation causes discomfort. That's why the web has the prefers-reduced-motion setting: a user asks their device to reduce non-essential motion, and your design provides a calmer version. WCAG 2.2 requires a way to pause, stop or hide motion that starts automatically, lasts more than 5 seconds and is shown alongside other content, and it rules out more than three flashes per second. Now practice, in whatever app you have:
- A bouncing ball: timing, easing and squash in one exercise;
- Button feedback: a press in about 100 ms, no extra effects;
- A card entering and leaving: entering with ease-out takes longer, leaving with ease-in is shorter.
💡 Compare versions side by side: the same motion with a different duration or curve. Share both in the community and ask which reads better.
You're not alone with these questions
We counted what people ask about most in our community. Learning and courses are the number one topic, so questions about where to start a new direction are very much on topic.
Messages by topic in Spaceberry Community, July 2024 — November 2026. Keyword search.
Practice with a deadline and live feedback
The best teacher is a task with a deadline that other people see. That's why the community regularly runs design games: the same brief for everyone, a deadline and a vote.
Design game · January 2026
NAOMA website redesign
The academy's home page through the eyes of an applicant, a student and a teacher. Three finalists; the community chose the winner.
AI challenge · May 2025
A landing page made by AI
Logo, copy and visuals made only with AI tools. Four entries, an anonymous vote, and participants shared their prompts.
Workshop · April 2026
Figmosha: AI in Figma
The tool's author showed how to generate interfaces in Figma and analyze a design system.
Free. 1,504 designers are already in the community.
How to join: 1 minute
- 1
Tap the button
Telegram opens with the Spaceberry community.
- 2
Join
It's free: all you need is a Telegram account.
- 3
Introduce yourself
Say where you're starting from and ask your first question.
Questions and answers
Didn't find your answer? Ask it in the community.
Which app should I learn motion design in?
The principles of motion don't depend on the app, so start with whatever you already have. A Figma prototype works for interfaces, After Effects for logo and graphics animation, and Procreate on iPad for frame-by-frame drawn animation. Once you get a feel for timing and easing, moving between apps is easy.
Do I need to be able to draw to do motion design?
No, not necessarily. Most starter exercises use simple shapes and text: a ball, a button, a card. Drawing helps if you want to do frame-by-frame character animation. For motion in interfaces and ads, a feel for timing, easing and composition matters more, and you train it on the same simple shapes by changing only the duration and the curve.
How long should an interface animation last?
Nielsen Norman Group recommends mostly 100–500 ms: about 100 ms for simple feedback, 200–300 ms for a modal appearing. Look for the shortest duration that doesn't feel jarring: animations are more often too long than too short. Entrances usually last longer than exits, and the farther an element travels, the longer the motion takes.
What is easing and why do I need it?
Easing is the curve that defines how the speed of motion changes. Without it an object moves uniformly and looks mechanical. Entering elements usually get ease-out (slowing at the end), leaving elements ease-in (speeding up). Easing curves exist in every animation app, so start with them and leave more complex physics models such as springs for later.
Is the Spaceberry community paid?
No. Spaceberry Community is free: it's supported by Spaceberry Foundation, a non-profit public organization. All you need to join is a Telegram account. The community has 1,504 designers who ask where to start a new direction, share first animations for feedback and take part in design games with the same brief and a deadline. Comparing two versions of a motion with others is the fastest way to train your eye. Most conversations are in Ukrainian.
Share your first motion with the community
Join 1,504 designers who learn, share their work and play design games. Show your first animation and get feedback. The community talks in Ukrainian.
- Free
- 1,504 members
- Join in 1 click
Updated · Spaceberry Foundation
Sources:
- Adobe — 12 Principles of Animation
- Frank & Ollie — Principles of Physical Animation
- Nielsen Norman Group — Executing UX Animations: Duration and Motion Characteristics
- Nielsen Norman Group — The Role of Animation and Motion in UX
- Material Design 3 — Applying easing and duration
- Material Design 3 — Motion physics system: how it works
- Apple Human Interface Guidelines — Motion
- W3C — Understanding SC 2.2.2: Pause, Stop, Hide
- W3C — Understanding SC 2.3.1: Three Flashes or Below Threshold
- MDN — prefers-reduced-motion