Timing isn’t calculated—it’s felt.

Yet when we search for advice online on how to timing an animation, we’re told: “Open dev tools, inspect the code, find the CSS or JavaScript, and reverse-engineer the timing.”

In other words: debug the timing instead of experience it.

So we tweak. We adjust curves. We nudge milliseconds. We watch again. And still, something feels off.

Timing as Rhythm

Every animation has a rhythm: a whoosh, a pop, a pause, a snap. It’s closer to drumming than it is to math. When you voice it, literally say it out loud, you suddenly understand its shape.

A button press isn’t just 150ms of scale-up and 200ms of scale-down. It’s boop—pop! A modal doesn’t fade in at “0.2 cubic-bezier(0.4, 0, 0.2, 1).” It arrives with a breath: whoooosh—plop.

We already experience motion as sound in our bodies. When something drops, we hear the thud. When something zips past us, we hear the swish.

Motion designers are just ignoring that instinct by pretending numbers are enough.

Copying With Your Voice

Here’s the hack: voice the animation, literally.

1. 1. Watch the component as it animates.
2. 2. Say it out loud with your mouth: whooooosh..., boink!, click!.
3. 3. Repeat or record yourself and play it back until the rhythm matches what you see.
4. 4. Translate that rhythm into visible animation.

When you voice an animation, the timing becomes obvious. You can tell instantly if the exit is too abrupt, or if the easing feels sluggish.

Your body is better at detecting flow than your eyes alone.

Example

Below is a sample animation:

Now here’s the sound I made while watching it:

Notice how the voice naturally maps to the timing. Without touching bezier values, you already feel the rhythm.

Finally, make the animation visible. Use a tool like easing.dev to explore curves. Match the curve that feels closest to the sound you made. You’ll see how easy the rhythm in your voice translates directly into a mathematical shape.

You can see much easier that the poink! (second part of the animation) is closer to Out Quart than the other ease curves eventhough they look almost the same. Yet you haven’t even touched the numbers yet.

Another Example

Here’s the component with animation:

Here’s the sound I made while watching it:

This rhythm is slightly more intricate than the first, but it’s still easy to grasp.

Why It Works

This method works because animation isn’t logic, it’s performance. Numbers describe the outcome, but rhythm explains the feeling.

Embodied learning: Speaking engages your body. It turns timing into something you can feel and remember.

Musical rhythm: Motion has beats, accents, and pauses—exactly like music. Musicians don’t calculate groove; they feel it.

Faster iteration: Instead of chasing bezier values, you can lock in the timing by ear and then refine in code.

Stop Over-Engineering Timing

We’ve been trained to think timing is about math. But the best animations aren’t engineered from numbers; they’re performed.

If you want your motion to feel alive, stop dragging curve handles and start humming, snapping, voicing. Get weird. Be the animation.

Because if you can voice the motion, you can design it.