It was 2014. After twelve years of making interfaces, I finally admitted defeat.
As a teenager building a Zelda fansite in the early 00s, I spent most of my time redesigning it, over and over. Figuring out how to recreate suede and burnt parchment effects using Photoshop's rubber duck paintbrush, drawing delicate celtic-inspired borders that clogged a 56k modem.
Then, in my early adulthood, I landed a job at Amazon Prime Video mostly because (they later told me) on my test I made a submit button do an angry shake on submission error.
Leave the email empty and press submit.
Most webshops selling birthday cards would show the card as a simple picture. At my next job, mine was a flippable 3D model made entirely from CSS transforms. It even had a little radial gradient "shine" when previewing glossy paper, sweeping across the card face as it rotated.
No one was asking for this stuff: I consciously stole the time to do it. Which is when they started asking specifically not for this stuff.
All these little details took effort and time to make and maintain. Effort and time which didn't end up on the bottom line.
Most companies in the world, for better or worse, aren't Apple. They're not selling craft, they're selling cards.
From my perspective, this was classic suit mentality. Absolutely no pride in the work, only concerned about the spreadsheet. Like, what are you doing with your lives?
But then, in 2014, I admitted defeat. I accepted the obvious fact that the suits likely know what they want better than I do. If it was taking too long, they were right. If it was adding too much maintenance, that was probably also true. Most companies in the world, for better or worse, aren't Apple. They're not selling craft, they're selling cards.
There's an obvious fix here, I thought that I thought. First, figure out what makes a good UI. Then, figure out how to make those kinds of UIs easily. Finally, empower other people to do the same.
So, I decided to write a book.
My first attempt
Despite also having a background in print design, I wanted the book to be web-native. A book about UI interactions needs to actually be interactive to land its ideas.
Some of what I had to say (spoiler: that in this book I will finally get to say) regarded the interplay between the user and the interface, acting as a shared energy system where the interface can receive a user's input and react proportionally and informatively.
This meant creating physics-backed animations, and an animation library like that didn't exist. So, as I built each example, I found myself adding to a little collection of functions that I could reuse.
That collection spiralled into Popmotion, my first piece of open source software.
Popmotion logo
Then React came out, so I wrote Pose, a declarative version of Popmotion. I got married to my now wife. Pose landed me a job at Framer, so my wife and I moved to Amsterdam where I turned Pose into Framer Motion. We bought a flat. I experimented with the browser's Web Animation API, writing Motion One as a side project. We had a kid. Finally I spun Framer Motion out into Motion as its own library and independent company and and and
oh my god what has happened, it's twelve years later and I forgot to write the book.
We got there in the end.
So, why now?
In most ways, writing an animation library like Motion, accessible yet powerful, running across hundreds of thousands of websites, went way further to achieve my aims than a book could ever have been.
Now though, I'm stood atop twelve extra tears of ideas, bug reports, engineering decisions, performance profiling, stress tests, API design, seeing the libraries used in the wild by extremely talented people, the accumulation of over a decade's worth of half-thoughts that I now get to crystallise...
There's the old saying about now being the second best time to start something. Not in this case. There's a far richer book waiting to be written.
"Now" is famously the second best time to start something. Not in this case.
And of course, there's that other thing. The knowledge that AI has already changed so much of our profession and promises to change so much more. From the time I write this first page to the day I write the last, I fully expect everything to have changed all over again.
It can feel that even taste and creativity is just another human-dominated frontier waiting to be conquered. I'm not convinced. Lord knows they're trying.
But, I think there'll be room for a deep human understanding of motion for a long time, because motion is deeply human. It is completely hardwired into our visual processing pipeline for means of survival in a way that a computer needs not.
So this book is for the humans out there, building for humans. And if I'm wrong, then this book is for the robot overlords out there, building for humans. I hope you all get something out of it.
What to expect
The Book of Motion is sequenced as a journey through four parts. Each part covers an aspect of motion from first principles to end product.
The four major parts.
Part I: Perception
Motion is primal. We have a wiring, shaped over millions of years, that perceives motion as the primary signal of a change in situation.
Part I will investigate our relationship to motion in interfaces. How it makes us feel, when and when not to us it, how to command attention.
Part II: Mechanics
Motion is systematic. An output of time, input, space, energy, and more.
Part II looks at each of these building blocks in isolation and performs a deep dive. How they work, why they work, when they work together.
Part III: Engineering
Motion is computed. All animations throughout time are illusory, conjured with all kinds of tricks. Our latest trick is pumping out millions of discrete images, at 120 frames per second - so fast that our eye perceives them as continuous.
In Part III we'll follow a frame from style to screen, so you can build an intuition for designing animations that perform well across all devices.
Part IV: In Practice
Motion is art. Now with a knowledge rooted in perception, mechanics and engineering, we'll get to work on real patterns that you'll have likely built before.
Buttons, modals, scrolling and more - exploring how they can move, how they should move, and also perhaps how they shouldn't.
Next
The first chapter explores the idea that as the fidelity of a device's hardware increases, so too must the fidelity of the software running on it.
Video games and apps have this figured out. A strong competitive environment and a general cultural bar leads designers and developers to squeeze the most from their platforms, in terms of graphics, motion, sound and haptic feedback.
Web interfaces have in many cases never looked better, graphically. But the sharper the picture, the stronger the expectation, and the web's laggardly approach to these other expressions of fidelity have left them in a kind of uncanny valley.
What is the uncanny valley in user interfaces? And how can we break free of it?