# Scale Duration With Travel Distance
**SHOULD** · **ID:** `animations-lottie-distance-duration` · **Category:** animations
**Source:** [LottieFiles](https://github.com/lottiefiles/motion-design-skill)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/animations-lottie-distance-duration
> SHOULD: Derive duration from travel distance, sublinearly — 100px = base, 200px = 1.3x, 400px = 1.6x — then clamp to a ~140ms floor and ~400ms ceiling. One `--duration-md` cannot serve an 8px tooltip nudge and a full-height sheet. This is a third axis, not a duplicate: `animations-proportional-values` scales transform AMPLITUDE, `animations-emil-duration-budget` assigns duration by element TYPE, and distance is what reconciles them (it is why drawers are the one type allowed past 300ms — a drawer is not special, it is far).
Derive duration from how far the element actually travels, sublinearly — one token cannot serve 8px and 200px
Spend a single --duration-md: 200ms on both an 8px tooltip nudge and a full-height bottom sheet and the same number is wrong in both directions at once: the tooltip crawls the last few pixels of a journey the eye finished instantly, and the sheet covers 200px faster than the eye can track, so it reads as a teleport. Derive it instead: factor = 1 + 0.3 * log2(px / 100), giving 100px = 1×, 200px = 1.3×, 400px = 1.6× — sublinear, because doubling the distance must not double the duration or long journeys feel like wading — then clamp to a floor (~140ms) and a ceiling (~400ms). On a 250ms base that puts the sheet at ~325ms and the tooltip at 140ms. THIS IS A THIRD AXIS, not a duplicate: animations-proportional-values (Rauno) scales the AMPLITUDE of a transform to the trigger SIZE — how far to move — and animations-emil-duration-budget assigns duration by element TYPE (press 100–160ms, tooltip 125–200ms, dropdown 150–250ms, drawer 200–500ms). Distance is what reconciles them, and it is precisely why that budget lists drawers as the one type allowed past the 300ms ceiling: a drawer is not special, it is simply far.
## Rule snippet
```tsx
const factor = 1 + 0.3 * Math.log2(px / 100); // 100px=1x, 200px=1.3x, 400px=1.6x
const duration = Math.min(400, Math.max(140, 250 * factor));
```
## Bad — do not do this
`animations-lottie-distance-duration-bad`
```tsx
import { useState } from 'react';
const EASE = 'cubic-bezier(0.23, 1, 0.32, 1)';
/** One "medium" duration token, spent on everything that moves. */
const DURATION_MD_MS = 200;
const TOOLTIP_TRAVEL_PX = 8;
const SHEET_TRAVEL_PX = 200;
/**
* Bad: the tooltip travels 8px and the bottom sheet travels 200px, and both are
* given the same `--duration-md: 200ms`. The tooltip crawls the last few pixels
* of a journey the eye finished instantly; the sheet covers a quarter of the panel
* in the same time and reads as a teleport.
*/
export function LottieDistanceDurationBad() {
const [tooltipOpen, setTooltipOpen] = useState(false);
const [sheetOpen, setSheetOpen] = useState(false);
return (
{TOOLTIP_TRAVEL_PX}px in {DURATION_MD_MS}ms
Anchor
Bottom sheet
{SHEET_TRAVEL_PX}px in {DURATION_MD_MS}ms — 25× the distance, same duration.
One duration token for a 8px nudge and a 200px surface. The tooltip feels sluggish for what it is, and the
sheet arrives faster than the eye can track it — the same number is wrong in both directions at once.
);
}
```
## Good — do this
`animations-lottie-distance-duration-good`
```tsx
import { useState } from 'react';
import { ReducedMotionSwitch } from '@/components/demo-kit/ReducedMotionSwitch';
import { useSimulatedReducedMotion } from '@/hooks/useSimulatedReducedMotion';
const EASE = 'cubic-bezier(0.23, 1, 0.32, 1)';
const BASE_PX = 100;
const BASE_MS = 250; // a 100px journey
const MIN_MS = 140; // interaction-feedback floor: below this, motion stops reading as motion
const MAX_MS = 400; // ceiling: nothing on this surface may take longer
/**
* Duration grows with travel distance, but sublinearly: 100px = 1x, 200px = 1.3x,
* 400px = 1.6x. Doubling the distance must NOT double the duration, or long
* journeys feel like wading. Clamp both ends so the formula cannot produce a
* duration that is imperceptible or interminable.
*/
function durationFor(distancePx: number): number {
const factor = 1 + 0.3 * Math.log2(Math.max(distancePx, 1) / BASE_PX);
return Math.round(Math.min(MAX_MS, Math.max(MIN_MS, BASE_MS * factor)));
}
const TOOLTIP_TRAVEL_PX = 8;
const SHEET_TRAVEL_PX = 200;
const TOOLTIP_MS = durationFor(TOOLTIP_TRAVEL_PX);
const SHEET_MS = durationFor(SHEET_TRAVEL_PX);
/**
* Good: same tooltip, same sheet, same easing — the only change is that each
* duration is derived from how far the element actually travels. The tooltip snaps
* across its 8px; the sheet takes long enough for the eye to follow 200px of
* surface, which is exactly why drawers are the exception in a per-element budget.
*/
export function LottieDistanceDurationGood() {
const [tooltipOpen, setTooltipOpen] = useState(false);
const [sheetOpen, setSheetOpen] = useState(false);
const reduced = useSimulatedReducedMotion();
return (
{TOOLTIP_TRAVEL_PX}px in {TOOLTIP_MS}ms
Anchor
Bottom sheet
{SHEET_TRAVEL_PX}px in {SHEET_MS}ms — 25× the distance, only {(SHEET_MS / TOOLTIP_MS).toFixed(1)}× the
duration.
durationFor(px) scales sublinearly: 100px = 1×, 200px = 1.3×, 400px = 1.6×, clamped to 140–400ms.
The tooltip lands in {TOOLTIP_MS}ms, the sheet in {SHEET_MS}ms — one rule, two right answers.