Most animation resources start by talking about code, or taste. This book starts at the start: Perception.
Whether you intend for it or not, every animation communicates something to the user. About your brand, about your interface. About what is happening, or what has just happened. So, better you intend it!
From there, we'll explore mechanics (timing, keyframes, springs), engineering (the render pipeline, performance, layout projection), and practice (animating a button, a modal, a page). Each topic illustrated with animated diagrams and performance-graded examples.
The last time I sat down to write a book about motion, I ended up spending twelve years writing a series of animation libraries instead.
The Book of Motion will be organised into four sections: perception, mechanics, engineering, and practice. Each is self-contained, but together build a foundation of whys and hows that end up informing how we practically build animated interfaces.
Motion is primal.
We are hardwired to perceive motion before anything else, so it's the fastest way an interface can communicate.
Motion can show what's changed, where something came from, what deserves attention, and what the system expects next. Part I explores our relationship to motion. Our perceptions, our attentions, our feelings.
Motion is systematic.
Motion is the combination of time, input, space and energy. Each of these mechanics has its own rules and interplay.
Part II explores easing curves, springs and more. It explains the raw mechanics of motion, and once we know what those are, we can implement them intentionally.
Motion is computed.
Computers don't render intention or feelings, they pump out pixels through a graphics pipeline with finite constraints. Understanding that pipeline changes which ideas are practical and which properties are expensive.
Part III follows an animation frame as it's built from style calculation to screen, so you can build an intuition for designing animations that communicate truthfully by performing well across all devices.
Motion is art.
A button, a menu, and a page transition do not need the same motion. Each has a different job, different constraints, and a different tolerance for delay.
Part IV is a set of UI studies. Enter and exit, layout, scroll, gestures, waiting, and ambient motion are discussed, each example explaining what it communicates and why, what it costs, and how it could be made better.
Sign up for updates.
The Book of Motion is a work in progress. Sign up to the Motion newsletter to be the first to know when Early Access opens.