Six weeks building a motion library from scratch, iterating through client rounds, and locking timing for delivery

Motion design starts with a library that does not exist. Color treatments that work. Easing curves that feel right. Transitions that sell the idea. You build that library while the project runs—from first concepts through four rounds of client feedback—and the library that supported one project becomes the starting point for the next.

A reference system built for motion work means comparing takes easily, tagging by motion principle rather than project so discoveries transfer across work, and keeping color and timing notes searchable. Your reference moves faster when you can search "all elasticity references" instead of "things I tagged with bouncing last spring."

This is what building and using a motion library looks like when feedback makes you pivot but your reference work compounds.

Week 1 — Collection: assembling motion studies and reference footage

The brief is a 30-second product animation—a device that unfolds, powers on, and starts processing. The motion language is modern and snappy: mostly linear easing with intentional anticipation on the fold. You start by collecting.

Create a workspace folder: /Volumes/ProjectDrive/Product-Unfold/. Inside it, Reference/, Motion-Studies/, Color-Tests/, Timing-Sketches/.

Your reference hunt starts with motion principles:

Twenty-eight clips. Some are phone unfolding references, some are mechanical motion studies from 3D renders, some are animations you saved from other work. You watch them all.

Tag each one as you rate. This one is motion:anticipation-heavy and timing:350ms, a slow wind-up before the unfold. That one is motion:anticipation-light with timing:120ms, a quick snap. Another is motion:ease-out, meaning the unfold starts fast and settles into stillness.

The easing shapes matter more than the content. You are collecting the grammar, not copying the thing.

Rating strategy: Three stars for "usable example of this principle," four stars for "better-than-average execution," five stars for "this is the feel I want to match."

You have four five-star clips now: two anticipation studies, one snap unfold, one slow wind-down. These are your reference north star.

Week 1, day 3 — Color and transition studies

The client wants a warm-to-cool color journey as the device powers on. Search your archive for color progressions:

tag:color:warm-to-cool type:image tag:transition rating:>=3 in:/Volumes/Archive

You have previous work: a glow transition study you did last month, a heat-to-ice progression from a different client, some color hold tests. Create a canvas called "Color Direction Concepts" and lay them out:

Plate one: warm-to-cool over 800ms with a hold at midpoint. Plate two: snappy transition that completes in 400ms. Plate three: slow fade that takes 1.2 seconds. Plate four: hold warm, then pop to cool with almost no transition. Plate five: a three-stage progression with pauses.

Show the client this one canvas and ask which timing language feels closest. They say: "We like plates two and four combined—fast pop but to a cooler warm, not fully cool. More energetic."

You now have direction. Search specifically for that color range:

tag:color:warm-medium-cool type:image tag:transition:fast rating:>=4

You have three studies in that family. Rate them 4 and 5 (direction-locked). Create a canvas called "Color Direction Approved" with just those, plus their timing notes.

Week 2 — First animation pass: sketching motion timing

You start animating. The device unfolds in 600ms with light anticipation. The power-on glow transitions over 400ms in the color-approved direction. But something feels off in how the pieces overlap—does the glow start before the fold completes, or after?

Search your motion library for overlap strategies:

tag:motion:overlap tag:timing type:video rating:>=3

Twelve clips of overlapping movements—pieces moving in sequence, pieces moving simultaneously with different easing. One study shows the glow starting at 80% of the fold completion. Another shows simultaneous start but different end times. Another waits for the fold to settle before glow begins.

Create a canvas called "Timing Overlap Tests" and compare them. Rate the one where glow starts at fold-80% as a 5. That is the reference you will match.

Animate the first version matching that overlap feel.

Week 2, day 4 — Client round 1: color is wrong, motion is close

You present:

• Animation video
• Canvas with the four motion studies you referenced
• Canvas with timing overlap comparison
• Canvas with the approved color progression

Client feedback: "Motion is great. Color is too cool. We want it warmer, more amber than blue. And the fold feels a little slow—can you add more snap?" Two notes.

Tag the current animation as version:round-1 and your reference canvases the same way. You will come back to these to see what you changed.

New color search:

tag:color:warm tag:transition:fast type:image tag:amber rating:>=4 in:/Volumes/Archive

Five studies. Find the warmest, fastest warm-to-amber progression. Rate it 5 and save a new canvas: "Color Direction Round 2."

New motion search for faster anticipation:

tag:motion:anticipation tag:timing:fast type:video tag:snap rating:>=4

You have two studies in this range from your week-1 collection. Pull them onto a canvas called "Motion Snap Options Round 2" and rate them both 5. You will blend these into the next animation.

Week 3 — Animation round 2 with new direction

Animate with:

• Faster anticipation from the snap studies
• Warmer amber color from the approved progression
• Same overlap feel from round 1 (client liked that)

Present again with updated reference canvases showing what changed. Client says: "Motion is perfect now. Color is closer but still needs tweaking—more peachy, less pure amber. And we want the glow to hold for 200ms after it reaches full color before anything else moves. Can you show us that timing?"

Version-tag everything as version:round-2.

Search for peachy color:

tag:color:warm type:image tag:peach rating:>=3

Nine images. Compare them. Three are in the right range. Rate them 4 and 5.

For the glow hold—a pause in motion before the next element moves—search:

tag:timing:hold type:video tag:pause rating:>=3

These are anticipation studies where movement pauses before resuming. You have four. Compare them on a canvas called "Hold Timing Options" and rate the one with a 200-250ms visible hold as 5.

Week 3, day 5 — Building your motion language library

Three weeks in, you have built something useful beyond this one project. Search everything tagged as approved:

rating:>=4 type:video tag:motion

You have twenty approved motion studies now: five anticipation variations, three snap-unfold variations, four overlap studies, three fold-timing studies, plus others. These are no longer "that thing I used on the product," they are "how I solve anticipation" and "how I solve overlap."

Create a saved view:

tag:motion:anticipation type:video rating:>=4

Name it "Anticipation Library." Next project that needs anticipation will start here.

Another saved view:

tag:motion:overlap type:video rating:>=4

"Overlap Library." The library compounds. Every project adds to it.

Week 4 — Client round 3: motion lock, color iteration

Client feedback: "Motion is locked. Love the fold and glow timing. Color: we're close, but let's try two options—one more coral, one more gold—and show us both for a week." Two parallel directions.

Tag the round-2 animation as version:locked-motion.

Search for the two color directions:

tag:color:peach type:image tag:coral rating:>=4

tag:color:warm type:image tag:gold rating:>=4

Create two canvases: "Color Option A Coral" and "Color Option B Gold." Add timing notes to each. Present both with the locked motion and tell the client they will have one back Monday.

Week 4, day 5 — The color choice and the archive that comes after

Client picks coral. Render the animation with coral color from the approved progression. Tag it version:final.

Now: archive your research. Everything that was round-1, round-2, round-3 motion studies, tag as project:product-unfold archived:2026-09-12. Everything that was round-1, 2, 3 color studies, same tag.

But do not delete the tags. Search:

tag:project:product-unfold type:video rating:>=4 -tag:archived

This is the motion you will reuse. The fold anticipation, the overlap feel, the glow timing—these work for other devices. Keep them tagged as motion principles, not as "product animation 2026."

Rename the tags:

• tag:motion:anticipation-product-style (the faster, snappier feel you developed)
• tag:motion:glow-transition (how the glow overlaps the mechanical motion)
• tag:timing:overlap-staggered (the specific 80%-start feeling)

Next project that needs that motion language will search it by principle, not by project name.

Weeks 5-6 — Where the library pays off

A new brief arrives: a wearable device animation. Same motion language family—a fold, a power on, a transition. Different device, same grammar.

Search:

tag:motion:anticipation-product-style type:video

You have six studies tagged with this now. The fold was one project. Four others came from archived studies from the past year. One is a new reference that matches the feeling. You do not start from zero. You start with "here is the motion family we like," and you refine variations within it.

Search your approved color progressions:

tag:motion:glow-transition type:video rating:>=4 -tag:archived

The glow timing study you built for product-unfold is one of the best versions of this motion. Use it. Modify it for the new device's specific timing, but you already solved how the glow overlaps. The research is done.

A third motion brief—character movement in UI—uses the same tag:motion:overlap library. You built these overlap studies for product animation, but overlap is overlap. One library, many uses.

Managing reference across years

By the end of a year of projects, your motion library has:

• Twenty to thirty approved motion studies, tagged by principle
• Fifteen to twenty color progressions, tagged by mood and transition type
• Fifty to sixty timing reference clips, tagged by easing family

Search returns useful subsets:

tag:motion:anticipation-fast type:video rating:>=4 -tag:archived

tag:color:warm-cool type:image tag:transition:snappy rating:>=4

tag:easing:ease-out type:video rating:>=3

Every project adds. Every round of client feedback adds. The library does not get organized at the end; it gets organized as you go, and it compounds across work.

Canvases from each project live in the project folder as JSON files dated by round: color-direction-round-1.coii-canvas, motion-timing-round-2.coii-canvas, final-approved.coii-canvas. Three months later, you can pull one open and ask "why did we choose that timing?" The answer is the image on the canvas, dated and rated.

Why motion libraries compound faster than other reference work

Motion libraries are unusual because the same piece of research maps across entirely different projects. An anticipation study you made for product animation applies to character movement, UI transitions, even material physics. Tag by principle rather than context, and every project unlocks everything that came before.

This is where the tagging discipline really pays. A bouncing ball study tagged tag:motion:elasticity is found by anyone looking for elastic movement. An anticipation curve tagged tag:motion:anticipation tag:timing:fast is one query away from any project that needs fast wind-up. After a year, you have not just a library — you have a system where each project pays forward and each new project stands on the foundation of all the others.

Most designers rebuild their reference work on each project because they tag by project name. "That thing I did for the client last month" is findable only if you remember which client and which month. Tag by motion principle and you have "all elastic reference" or "all fast anticipation" regardless of what project it came from.

The board as comparison tool, not final deliverable

A motion canvas is not your final animation. It is a decision record. It holds the takes you compared, the timing rhythm you measured, the color progressions you evaluated. The fact that it is a plain JSON file in your folder means you can version it, put it in git, share it with collaborators without needing the app open on the other end.

Week one you build timing options canvas. Week two you lock motion and build color options. Week three you build version boards comparing rounds 1 through 3. The director sees all of them and knows exactly what you tried and why you chose what you chose. That transparency is worth the small overhead of making the canvases.

Three months later when you ask "why did we pick that easing on the glow transition," the answer is not in a comment or a file name — it is on the canvas from week two, rated and dated. You can pull it open, see what you compared it against, and understand the decision.

A reference system that supports motion work is one where:

• You compare multiple takes on one canvas and rate the winner
• You search by motion principle, not project name
• Easing, timing, and color lives in tags
• Approved decisions are version-dated and recoverable
• The work from one project seeds the next
• Each canvas is a decision record, not just a visual

For complex projects, how to organize references by project covers scaling this system across multiple deliverables.

How to organize color and lighting references covers the tagging strategies that work for color-heavy projects. How to rate and filter covers tagging for motion and timing studies. How to build a moodboard is the technical step for comparing takes on a canvas. What is a reference manager answers whether you need one for motion work specifically. The reference manager for motion designers is the full feature list if you want to know what tools live inside this workflow.