§II.09 · MOTION & ANIMATION · THE CRAFT BETWEEN TWO POSES

Animation iseverythingthat happensbetweentwo poses.

Motion is how brands feel modern. It’s in your website scroll, your app transitions, your social loops, your ads. Done right, it’s invisible: people feel a brand that’s alive and can’t say why. Done wrong, it’s every decorative loading spinner on the internet. The difference is never the poses. It’s the in-between frames: the easing, the anticipation, the follow-through, the weight. That’s the craft we sell.

Set it in motion Watch the curves

⟢ this arrival · five lines staggered 90ms · cubic-bezier(0.16, 1, 0.3, 1) · principle: anticipation · each line winds up before it lands

kf·02 · the timing chart

Easing is the difference between moved and moving.

Two keyframes are a fact. The curve between them is an opinion: about weight, about confidence, about how much your brand is willing to hurry. A linear move reads as machinery; an eased move reads as intent. We design that curve on purpose for every scroll-scrubbed sequence, hover state, transition and animated demo we build, then we tune it until you stop noticing it. Motion supports the message. It never decorates around it.

01ease-out expocubic-bezier(0.16, 1, 0.3, 1)
The arrival. Fast out of the gate, gentle into the seat: how confident things enter a room.
02ease-in-outcubic-bezier(0.65, 0, 0.35, 1)
The transition. Leaves like it means it, lands like it planned to. For moves between states.
03springovershoot, then the settle
Personality. Past the mark by a few percent, then home. Used sparingly, remembered always.
04 · 05linear & steps()the honest ones
Linear for machinery: tickers, scrubs, progress. Steps for pose-to-pose: animation’s oldest easing.

⟢ these four cells · cascade delays 0 / 110 / 220 / 330ms · the same ease-out drawn in tangerine above · principle: slow in, slow out

lesson · kf·03 · pose to pose

The poses are cheap. The in-betweens are the craft.

P.01

Anticipation

The wind-up before the move. A pixel of backswing buys a mile of believability. This card leaned back before it landed.

−6px backswing · 90ms

P.02

Overshoot

Past the mark, then the settle. Confidence has momentum; this card arrived five percent too big on purpose.

scale 1.05 → 1.00

P.03

Secondary action

The thing, and the thing beside it. Watch the dot: it lands a beat after the card does, and the card feels heavier for it.

follower · +220ms

P.04

Staging

One thing moves at a time, so the eye always knows where to be. This card waited its turn.

delay 540ms · last in

P.05

Rhythm

A beat you can count. This card arrived in four discrete frames, pose to pose, like it was shot on twos.

steps(4) · a count of four

P.06

Drag

Mass makes trail. Heavy things arrive late and honest. This card took the longest road here and you believed it most.

900ms · trailing edge

⟢ each card above arrived by the principle it teaches: the wind-up wound up, the overshoot overshot, and drag took the longest road here

kf·04 · lights down

Some motion explains. Some motion just makes an entrance.

Logo reveals. Case-study intros. Title cards that make a quarterly deck feel like a premiere. And between the entrances, the explainers: ingredient charts that build themselves, app flows that walk a user through, how-it-works sequences that do the talking your sales page can’t. When a thing is complex, motion is how it becomes obvious. When a thing is yours, motion is how it becomes unforgettable.

⟢ this reveal · strokes draw once on arrival · 1.4s · staggered 0 / 400 / 800ms · then it holds. arrivals happen once, like first impressions

kf·05 · the deliverables reel

Every placement gets its native cut.

One motion language, exported into every format and frame rate a platform asks for. You brief the move once, and the reel below is what comes back.

.lottieweb-native · weightless · handed off clean
.mp4social · ads · anywhere a feed plays
.webmweb video · transparent alpha
.gifwhere legacy still demands it

on your drive when we’re done

Motion assets for every placement
Lottie for web
MP4 for social
Source files for iteration

⟢ the chips above · 70ms apart, one at a time · principle: staging · the eye always knows where to be

kf·06 · the exposure sheet

How the work runs, frame by frame.

ASUPPORT

Motion supports the message. It never decorates around it. Every move on the sheet has a job; the ones that don’t are erased before you see them.

fr 001–024

BBUILD

Scroll-scrubbed sequences, hover states, transitions, animated demos, choreographed into the surfaces where they actually live, not bolted on after.

fr 024–072

CEXPLAIN

Complex ingredient charts, app flows, how-it-works sequences. When a thing is hard to say, motion is how it becomes obvious.

fr 072–108

DEXPORT

Every format and every frame rate a platform needs, native to each placement, never letterboxed into the wrong one.

fr 108–132

EHAND OFF

Lottie for web, so nothing balloons your page weight. Source files stay with you, so iteration never starts from zero.

fr 132–144

⟢ rows landed 80ms apart on the ease-out · principle: rhythm · a beat you can count

KF·END · THE SETTLE

Your brand has two poses: where it is, and where it’s going.

We animate the in-between.

Start the in-between

⟢ exit: hold. no animation outlives its welcome.