Motion Direction · Animation

Adobe In-App GIFs

2016–2022 · Illustrator & InDesign · Pixel Fort

Six years and 65 animations, helping Illustrator and InDesign users get to know new features. I developed the motion approach, animated throughout the engagement, and guided team members as we made tiny interactions feel clear, deliberate, and satisfying.

Engagement6 years

Animations65

ClientAdobe

RoleMotion Direction
& Animation

Built inAfter Effects

The Brief

Teach a feature in a tooltip

Adobe’s Illustrator and InDesign teams needed a concise, engaging way to introduce new features inside the apps. Each animation had just a few seconds, a small frame, and a tight file-size limit to show someone what a tool could do and make them want to try it.

We rebuilt the interface in simplified form, giving us control over every element. What we left out mattered as much as what we kept. With only a short line of text alongside each GIF, the motion had to do most of the explaining.

I set the feel through reference animations, then used written feedback to help the team refine the timing, weight, and emphasis of each new tutorial.

The First Set

Logo tutorial series

From the first set. Ten GIFs walking a new user through building a logo. These animations became our reference for how the work should feel.

Attention, then action. A trailing line guides the eye, a deliberate Shift press registers, and small accent pops confirm the change.

Motion Philosophy

Simulated, enhanced

A real mouse click is almost invisible. A few pixels of change, easy to miss even when you're looking for it. So nothing here moves at documentary scale. The cursor travels with intent, the click lands with weight, the key press feels like a real, deliberate push. Simulated but enhanced. Familiar enough to read as a user doing this, exaggerated enough to teach. We obsessed over the press most of all.

The Pinnacle

Puppet Pin series

Puppet Pin 02. Placing pins with a deliberate press and a little weight behind every move.

Puppet Pin 03. Orange lines and highlights stand out against the blue background, keeping the action easy to follow.

Creative Choices

The choices behind the motion

Guide the eye

Trailing lines connect one action to the next. A hover indicator draws attention to the target before the click, giving the viewer a moment to catch up.

Give actions weight

A click or key press needs to register. We gave those tiny actions a physical push, then used small accent pops to make the response feel connected to the cause.

Know what to leave out

Simplified panels and selective highlights kept the feature in focus. Each tutorial called for a different balance of detail, pace, and emphasis.

From the Archive

Six years of new features

Freeform Gradients, 2019. Softer selection animation for a softer feature.

Global Edits, 2019. One edit propagating everywhere. The motion is the explanation.

New Features, 2020. More room to play as the work grew beyond tooltips into larger formats.

Adjust Layout, 2019. The page reflows, with each change timed to make the sequence easy to follow.

Content-Aware Fit, 2019. The before and after carried entirely by the motion between them.

Workspace Tour 01. The same attention to movement, now walking new users through the interface itself.

Workspace Tour 04.

Artboard panel, 2019. Artboards and layers, working as one mental model. A workflow shift that feels obvious now; the motion had to make it feel that way then.

The Long Run

A six-year collaboration

Adobe returned each year with new features to introduce. We made 65 in-app animations across Illustrator and InDesign, keeping a recognizable feel while adapting to new tools, workflows, and formats.

The relationship grew to include videos for Illustrator on iPad, a sizzle reel and social suite for InDesign’s 20th anniversary, and splash screen animations. These little loops became part of a collaboration that lasted nearly the entire life of Pixel Fort.

Credits

Motion Direction & AnimationDylan Wilbur

Motion DesignDrew Pavelchak

Additional Motion DesignAustin Coburn

Every move had a job. Every frame had to feel right.