Motion for interfaces
Animation in an interface explains rather than decorates: where the screen came from, what is happening right now and whether the product heard you. We cover timings and curves, transitions and micro-interactions, the minimum of After Effects the job needs, and handing motion to developers as values rather than words.
What you will be able to do
8 modules, one project
01 Why an interface needs movement2 lessons · 1 h 28 minOpen
We start with the question the animation answers. And straight away with the opposite case: when movement gets in the way and has to be switched off.
02 Timing and curves3 lessons · 2 h 16 min
The core module of the course. Numbers instead of feelings: how long a movement lasts, what curve it has and why a spring is sometimes more honest than easing.
03 Transitions between screens2 lessons · 1 h 32 min
A screen should not appear out of nowhere. We link screens with a shared element and set the order in which things arrive.
04 Micro-interactions3 lessons · 2 h 14 min
The small things that add up to a sense of quality: a response within a hundred milliseconds, honest waiting and a comprehensible error.
05 After Effects, only what you need3 lessons · 2 h 19 min
Not a course about the software, but the minimum of it that interface animation is made with: compositions, keyframes, the speed graph and shapes.
06 Icons and Lottie2 lessons · 1 h 31 min
An animated icon is the most common task. We make one from vector and deliver it in a format the developer will understand.
07 Handover to development2 lessons · 1 h 29 min
Showing a video is not enough — the motion has to be described. We cover the spec and what the browser and the app can do on their own, without an animation file.
08 The project2 lessons · 1 h 32 min
The final piece: a short video about a product and a written case study that shows not only the result but the logic of the movement.
What you get
Videos with timecodes and a written version: every duration and curve value is there in text, so nothing has to be copied off the screen.
Finished compositions for every walkthrough: open them, move the keyframes and see what each value changes.
A one-page cheat sheet: kind of movement — duration — curve, with examples of where each option belongs.
The motion handover table: element, property, values, curve, delay — in the form that gets accepted into work.
The whole first module is open
Watch the lessons of the first module and the first task. If the format does not suit you, you have lost nothing.