Pick an animation duration from distance, size and complexity, and get an enter and exit pair
Duration scaleFreeFor designers and developers
25/day
free runs a day, no sign-in.
Before: what you give it
The example input, as typed in. You type in numbers or values.
distance_px: 240 size: medium complexity: simple kind: enter allow_long: false
After: what comes back
The first lines of a real run on that input. Nothing here is edited by hand.
Recommended: 240 ms (enter) Enter 240 ms, exit 180 ms Why: - Distance: 240px adds 154.4 ms on top of a 90 ms floor. Longer travel needs more time to read, but the gain flattens (logarithmic), so doubling distance does not double time. - Size: medium scales the result by 1. Big surfaces look faster at the same ms because more of the screen moves. - Complexity: simple adds 0 ms so several moving parts can be followed. - Entrances get the full time; exits are 25% shorter (convention). Token scale to snap to (convention): xs 100, sm 150, md 200, lg 300, xl 400 Limits: the formula is our heuristic, not a standard. Frame rate, device and the easing used all change how long a move feels. Test on a mid-range phone.
What you get
A recommended duration, enter and exit pair, a five-step token scale, and the reasoning
What it cannot do
The formula is our own heuristic, shown in the output; treat it as a starting point to tune by eye.
Who it is for
- Designers
- Developers
Free and Pro
| Free | 25 runs a day per IP address, up to 100,000 characters a run. |
|---|---|
| Pro | No daily limit, 300 requests a minute, up to 200,000 characters a run. |
Use it from your assistant
The tool is called plan_durations. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.
claude mcp add --transport http designers https://designers.allthepossibles.com/mcpcurl -X POST https://designers.allthepossibles.com/api/duration-scale -H 'content-type: application/json' -d '{"distance_px":240,"size":"medium","complexity":"simple","kind":"enter","allow_long":"false"}'Try it here
The form starts with the same example input, so you can run it first and then swap in your own.
More in motion
- Motion check
Find autoplay, endless loops, possible flashing and long transitions, and get reduced-motion CSS to paste.
- Easing designer
Turn an easing name, cubic-bezier or spring into CSS timing functions with sampled progress and feel notes
- Motion CSS audit
Find animations in your CSS that force layout, ignore reduced motion or run forever without a pause
- Stagger planner
Plan staggered reveal delays for a list so the whole sequence fits a time budget
- Animation principles review
Review a described animation against the twelve animation principles and get a question for each one
- Lottie JSON lint
Lint a Lottie file for size, expressions, embedded images and features that break on mobile players