Hold

A ball that hits the top of its arc and immediately falls looks mechanical. In animation, that peak gets a few frames of hold — hang time — so the pose registers before gravity takes over. Interfaces need the same beat.

When a toast arrives, an icon settles, or a success check pops in, a short pause at the peak makes the moment feel intentional instead of rushed.

Toggle the hold length and replay.

None snaps up and down with no breath. Brief (~120ms) is usually enough for a toast. Long (~320ms) starts to feel theatrical — fine for a rare celebration, wrong for routine saves.

Where hold earns its keep

Use hold when the peak is the message: confirmation, level-up, a stamp that lands. Skip it when the user is mid-flow and just wants the next state. A hold on every toggle will feel like the UI is waiting for applause.

Pair hold with a slightly stronger ease-out on the way up and a quieter ease-in on the way down. The pause sits in the middle; the curves do the rest.

Usage

import { motion } from "motion/react";

<motion.div
    animate={{ y: [12, 0, 0, 0], scale: [0.96, 1.04, 1.04, 1] }}
    transition={{
        duration: 0.72,
        times: [0, 0.35, 0.55, 1], // 0.35→0.55 is the hold
        ease: [0.23, 1, 0.32, 1],
    }}
>
    Saved
</motion.div>

@keyframes toast-hold {
    0% { transform: translateY(12px) scale(0.96); }
    35% { transform: translateY(0) scale(1.04); }
    55% { transform: translateY(0) scale(1.04); } /* hold */
    100% { transform: translateY(0) scale(1); }
}

.toast {
    animation: toast-hold 720ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

The hold is just two identical keyframes with time between them. No extra library feature required — only timing.