Scope
Branding
About
VSCO is where a generation learned to edit. The tools had grown quickly and motion had grown with them, but every team was animating to its own rules. We were asked to set a single standard: how things move, how long they take, and what that movement should say about the product.
Motion
We started by writing down what already existed. Timing, easing and distance were pulled out of the live product, sorted, and reduced to a small set of curves that covered nearly every case. Anything that did not fit was either a mistake or a deliberate exception, and both were worth knowing about.
System
Those curves became tokens rather than descriptions. A duration and an easing paired for entering, for leaving, and for moving within a view, each named for what it does rather than how it looks, so a designer and an engineer reach for the same thing without translating.
Application
We rebuilt the core flows against the standard: opening an image, switching a preset, moving between edit and library. Where the old motion drew attention to the interface, the new motion points at the photograph, which is the only thing on screen that should be holding the viewer.
Craft
The last pass was the small stuff. Loading states, empty states, the half second after a tap. These are moments people feel without noticing, and getting them consistent did more for how finished the product felt than any single animation.
End
VSCO came away with a motion standard that reads as one hand, and a vocabulary its teams can keep building on without meeting about it.
Credits
- Your Name HerePosition, Design
- Your Name HerePosition, Design
- Your Name HerePosition, Design
- Your Name HerePosition, Design
