{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"slug":"how-long-should-it-take","title":"How long an animation should take","url":"https://addaly.com/learn/motion-and-audio/how-long-should-it-take","position":11,"of":72,"minutes":9,"answer":"Durations come from a small named set rather than from feel, exits run at roughly three-quarters of entrance time, and distance scales duration sub-linearly.","keyIdea":"Durations come from a small named set rather than from feel, exits run at roughly three-quarters of entrance time, and distance scales duration sub-linearly, but perceived length is set by the shape of the curve's tail more than by the number."},"body":{"format":"markdown","text":"## The question everybody guesses at\n\n\"How long should this animation be?\" gets answered by feel, and feel drifts. The person who has watched their own transition four hundred times finds it too slow at 250ms and cuts it to 120ms, at which point it is a flicker for everybody who has never seen it before.\n\nThere are defensible numbers. They come from two facts: the eye needs a minimum exposure to register that something moved, and attention has a budget.\n\n## Working durations\n\nThese ranges match what the large design systems publish, and more importantly they match what survives testing.\n\n- **70 to 120ms**: a small element changing in place. A checkbox filling, a button's background shifting on press, an icon swapping. Below about 60ms the change is perceived as instantaneous rather than as a movement, which is often exactly what you want for a press state.\n- **150 to 250ms**: a small element entering or leaving. A tooltip, a dropdown, a toast.\n- **250 to 350ms**: a panel, sheet, or dialogue crossing a meaningful part of the screen.\n- **350 to 500ms**: a full-screen transition, a page change, something covering most of the viewport.\n- **Above 500ms**: reserve for something the user is watching deliberately: an onboarding illustration, a data visualisation building, a celebration. Not for anything that sits between a person and their task.\n\nTwo adjustments that matter more than the base number:\n\n**Exits are faster than entrances.** Roughly 70 to 80 per cent of the entry duration. An arriving element is new information and the eye needs time to find it. A leaving element is already understood; lingering just makes the interface feel sticky.\n\n> Figure: Durations that survive testing. Bars (ms): A small element changing in place 100; A tooltip or toast entering 200; A sheet crossing the screen 300; A full-screen transition 420; Something watched deliberately 700. Two adjustments matter more than the base number. Exits run at roughly three-quarters of the entrance, because a leaving element is already understood. And distance scales duration sub-linearly (about 1.4 times the time for each doubling of travel), so an 800-pixel move at 500 ms feels the same speed as a 200-pixel move at 250 ms.\n\n**Distance scales the duration, but not linearly.** Doubling the travel distance does not mean doubling the time: that produces a crawl on large screens. Material Design's published approach is a distance-based curve where duration grows roughly with the square root of distance; in practice, scaling time by about 1.4× for each doubling of distance keeps perceived speed constant. A 200px move at 250ms and a 800px move at 500ms feel like the same speed even though the second one is four times the distance at half the speed-per-pixel.\n\n## Why the same number feels wrong on different screens\n\nA 300ms sheet transition tested on a 6-inch phone can feel sluggish on a 27-inch monitor and frantic on a television across a room. The reason is angular, not physical: what your eye tracks is degrees of visual field per second, and the same pixel distance subtends a very different angle at arm's length than at three metres.\n\nThis is why published duration guidance almost always names a device class. Material's numbers are phone numbers. Apple's are tuned per platform, and tvOS motion is noticeably slower and larger than iOS motion for exactly this reason. Take any table of durations as calibrated for the screen it was measured on, then re-test.\n\n## Perceived duration is not measured duration\n\nTwo animations of identical length can feel different lengths.\n\n- An animation with a **long slow tail** (a curve that spends its last third creeping the final few pixels) reads as longer than its clock time, because the end is the part you wait for. This is the single most common cause of \"it feels slow\" on a transition that measures 250ms.\n- An animation that **starts immediately** reads as shorter, because the response latency is what people actually judge. A 300ms transition that begins on the same frame as the tap feels faster than a 200ms one that begins 100ms later.\n- An animation **you have seen before** feels longer. Repeat exposure is why the durations you love on day one feel slow on day thirty, and why you should not trust your own judgement on something you have built.\n\nThe practical consequence: cut the tail before you cut the duration. Changing the curve so the last 10 per cent of the distance happens in the last 15 per cent of the time rather than the last 40 per cent will fix most \"too slow\" complaints without touching the number.\n\n## How to set your own numbers\n\n1. Pick three durations, not twenty. Something like 150, 250 and 400ms covers nearly everything.\n2. Write them down as named values, not as literals scattered through the code.\n3. Test each on the slowest device you support, over a throttled connection, with someone who has not seen the product.\n4. Record the result at 60fps and count frames. A 250ms transition is 15 frames at 60fps; if you count 28, something in your stack is adding time you did not budget for.\n\n## The free path\n\n- **ffmpeg** will pull a screen recording apart into numbered frames so you can count: `ffmpeg -i capture.mp4 -vf fps=60 frame_%04d.png`. Counting frames is the only way to know the real duration rather than the intended one.\n- **Chrome DevTools** and **Firefox Profiler** both show animation timing directly, free.\n- **OBS Studio** records the screen at a known frame rate on Linux, Windows and macOS, free, and is the standard tool for this.\n\n## The limitation\n\nNone of these numbers are laws. They are a starting point calibrated on handheld screens for people with typical vision and typical reaction times, and they say nothing about a user with a motor impairment who needs more time to track a moving target, or about a power user who runs the same flow two hundred times a day and wants everything instant. A configurable speed multiplier serves both better than a perfect single value, and almost nobody ships one."},"check":{"question":"A 250ms panel transition is reported as feeling sluggish. Measuring confirms it really is 250ms and begins on the same frame as the tap. What is the most likely cause and fix?","options":[{"text":"The device is dropping frames, so the animation takes longer in practice than the specification claims; the fix is to promote the panel to its own compositor layer.","correct":false,"tempting":"Reaches for a performance explanation when the measurement has already confirmed the duration is correct."},{"text":"250ms is simply above the perceptual limit for a panel; the fix is to cut it to around 120ms so it lands inside the window where responses feel instantaneous.","correct":false,"tempting":"Applies the sub-100ms instantaneity threshold to a large moving element, where it produces a flicker rather than a transition."},{"text":"The easing curve has a long slow tail, so the last few pixels take a disproportionate share of the time; compress the tail before touching the duration.","correct":true},{"text":"The exit duration has been set equal to the entrance duration, and an exit that matches its entrance always reads as slow regardless of what the entrance does.","correct":false,"tempting":"Correct that exits should be shorter, but the complaint here is about the entrance, and the rule is a refinement rather than a cause of perceived sluggishness."}]},"prev":{"slug":"motion-as-feedback","title":"The three jobs an animation can do","url":"https://addaly.com/learn/motion-and-audio/motion-as-feedback"},"next":{"slug":"transition-as-explanation","title":"The transition is the explanation","url":"https://addaly.com/learn/motion-and-audio/transition-as-explanation"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'How long an animation should take', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/how-long-should-it-take (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"How long an animation should take","courseTitle":"Motion, Sound and Music","module":{"index":2,"slug":"motion-that-carries-meaning","title":"Motion that carries meaning"},"answer":null,"keyIdea":"Durations come from a small named set rather than from feel, exits run at roughly three-quarters of entrance time, and distance scales duration sub-linearly, but perceived length is set by the shape of the curve’s tail more than by the number.","hero":{"kind":"figure","figure":{"t":"figure","label":"Figure","figure":{"type":"bars","unit":"ms","title":"Durations that survive testing","series":[{"label":"A small element changing in place","value":100},{"label":"A tooltip or toast entering","value":200},{"label":"A sheet crossing the screen","value":300},{"label":"A full-screen transition","value":420},{"label":"Something watched deliberately","value":700}],"caption":"Two adjustments matter more than the base number. Exits run at roughly three-quarters of the entrance, because a leaving element is already understood. And distance scales duration sub-linearly (about 1.4 times the time for each doubling of travel), so an 800-pixel move at 500 ms feels the same speed as a 200-pixel move at 250 ms."},"alt":"Figure: Durations that survive testing. Bars (ms): A small element changing in place 100; A tooltip or toast entering 200; A sheet crossing the screen 300; A full-screen transition 420; Something watched deliberately 700. Two adjustments matter more than the base number. Exits run at roughly three-quarters of the entrance, because a leaving element is already understood. And distance scales duration sub-linearly (about 1.4 times the time for each doubling of travel), so an 800-pixel move at 500 ms feels the same speed as a 200-pixel move at 250 ms."}},"blocks":[{"t":"h2","id":"the-question-everybody-guesses-at","runs":[{"text":"The question everybody guesses at"}]},{"t":"p","runs":[{"text":"“How long should this animation be?” gets answered by feel, and feel drifts. The person who has watched their own transition four hundred times finds it too slow at 250ms and cuts it to 120ms, at which point it is a flicker for everybody who has never seen it before."}]},{"t":"p","runs":[{"text":"There are defensible numbers. They come from two facts: the eye needs a minimum exposure to register that something moved, and attention has a budget."}]},{"t":"h2","id":"working-durations","runs":[{"text":"Working durations"}]},{"t":"p","runs":[{"text":"These ranges match what the large design systems publish, and more importantly they match what survives testing."}]},{"t":"ul","items":[[{"text":"70 to 120ms","b":true},{"text":": a small element changing in place. A checkbox filling, a button’s background shifting on press, an icon swapping. Below about 60ms the change is perceived as instantaneous rather than as a movement, which is often exactly what you want for a press state."}],[{"text":"150 to 250ms","b":true},{"text":": a small element entering or leaving. A tooltip, a dropdown, a toast."}],[{"text":"250 to 350ms","b":true},{"text":": a panel, sheet, or dialogue crossing a meaningful part of the screen."}],[{"text":"350 to 500ms","b":true},{"text":": a full-screen transition, a page change, something covering most of the viewport."}],[{"text":"Above 500ms","b":true},{"text":": reserve for something the user is watching deliberately: an onboarding illustration, a data visualisation building, a celebration. Not for anything that sits between a person and their task."}]]},{"t":"p","runs":[{"text":"Two adjustments that matter more than the base number:"}]},{"t":"p","runs":[{"text":"Exits are faster than entrances.","b":true},{"text":" Roughly 70 to 80 per cent of the entry duration. An arriving element is new information and the eye needs time to find it. A leaving element is already understood; lingering just makes the interface feel sticky."}]},{"t":"p","runs":[{"text":"Distance scales the duration, but not linearly.","b":true},{"text":" Doubling the travel distance does not mean doubling the time: that produces a crawl on large screens. Material Design’s published approach is a distance-based curve where duration grows roughly with the square root of distance; in practice, scaling time by about 1.4× for each doubling of distance keeps perceived speed constant. A 200px move at 250ms and a 800px move at 500ms feel like the same speed even though the second one is four times the distance at half the speed-per-pixel."}]},{"t":"h2","id":"why-the-same-number-feels-wrong-on-different-screens","runs":[{"text":"Why the same number feels wrong on different screens"}]},{"t":"p","runs":[{"text":"A 300ms sheet transition tested on a 6-inch phone can feel sluggish on a 27-inch monitor and frantic on a television across a room. The reason is angular, not physical: what your eye tracks is degrees of visual field per second, and the same pixel distance subtends a very different angle at arm’s length than at three metres."}]},{"t":"p","runs":[{"text":"This is why published duration guidance almost always names a device class. Material’s numbers are phone numbers. Apple’s are tuned per platform, and tvOS motion is noticeably slower and larger than iOS motion for exactly this reason. Take any table of durations as calibrated for the screen it was measured on, then re-test."}]},{"t":"h2","id":"perceived-duration-is-not-measured-duration","runs":[{"text":"Perceived duration is not measured duration"}]},{"t":"p","runs":[{"text":"Two animations of identical length can feel different lengths."}]},{"t":"ul","items":[[{"text":"An animation with a "},{"text":"long slow tail","b":true},{"text":" (a curve that spends its last third creeping the final few pixels) reads as longer than its clock time, because the end is the part you wait for. This is the single most common cause of “it feels slow” on a transition that measures 250ms."}],[{"text":"An animation that "},{"text":"starts immediately","b":true},{"text":" reads as shorter, because the response latency is what people actually judge. A 300ms transition that begins on the same frame as the tap feels faster than a 200ms one that begins 100ms later."}],[{"text":"An animation "},{"text":"you have seen before","b":true},{"text":" feels longer. Repeat exposure is why the durations you love on day one feel slow on day thirty, and why you should not trust your own judgement on something you have built."}]]},{"t":"p","runs":[{"text":"The practical consequence: cut the tail before you cut the duration. Changing the curve so the last 10 per cent of the distance happens in the last 15 per cent of the time rather than the last 40 per cent will fix most “too slow” complaints without touching the number."}]},{"t":"h2","id":"how-to-set-your-own-numbers","runs":[{"text":"How to set your own numbers"}]},{"t":"ol","start":1,"items":[[{"text":"Pick three durations, not twenty. Something like 150, 250 and 400ms covers nearly everything."}],[{"text":"Write them down as named values, not as literals scattered through the code."}],[{"text":"Test each on the slowest device you support, over a throttled connection, with someone who has not seen the product."}],[{"text":"Record the result at 60fps and count frames. A 250ms transition is 15 frames at 60fps; if you count 28, something in your stack is adding time you did not budget for."}]]},{"t":"h2","id":"the-free-path","runs":[{"text":"The free path"}],"role":"free"},{"t":"ul","items":[[{"text":"ffmpeg","b":true},{"text":" will pull a screen recording apart into numbered frames so you can count: "},{"text":"ffmpeg -i capture.mp4 -vf fps=60 frame_%04d.png","code":true},{"text":". Counting frames is the only way to know the real duration rather than the intended one."}],[{"text":"Chrome DevTools","b":true},{"text":" and "},{"text":"Firefox Profiler","b":true},{"text":" both show animation timing directly, free."}],[{"text":"OBS Studio","b":true},{"text":" records the screen at a known frame rate on Linux, Windows and macOS, free, and is the standard tool for this."}]]},{"t":"h2","id":"the-limitation","runs":[{"text":"The limitation"}],"role":"limit"},{"t":"p","runs":[{"text":"None of these numbers are laws. They are a starting point calibrated on handheld screens for people with typical vision and typical reaction times, and they say nothing about a user with a motor impairment who needs more time to track a moving target, or about a power user who runs the same flow two hundred times a day and wants everything instant. A configurable speed multiplier serves both better than a perfect single value, and almost nobody ships one."}]}],"check":{"question":[{"text":"A 250ms panel transition is reported as feeling sluggish. Measuring confirms it really is 250ms and begins on the same frame as the tap. What is the most likely cause and fix?"}],"options":[{"text":[{"text":"The device is dropping frames, so the animation takes longer in practice than the specification claims; the fix is to promote the panel to its own compositor layer."}],"correct":false,"tempting":[{"text":"Reaches for a performance explanation when the measurement has already confirmed the duration is correct."}]},{"text":[{"text":"250ms is simply above the perceptual limit for a panel; the fix is to cut it to around 120ms so it lands inside the window where responses feel instantaneous."}],"correct":false,"tempting":[{"text":"Applies the sub-100ms instantaneity threshold to a large moving element, where it produces a flicker rather than a transition."}]},{"text":[{"text":"The easing curve has a long slow tail, so the last few pixels take a disproportionate share of the time; compress the tail before touching the duration."}],"correct":true,"tempting":null},{"text":[{"text":"The exit duration has been set equal to the entrance duration, and an exit that matches its entrance always reads as slow regardless of what the entrance does."}],"correct":false,"tempting":[{"text":"Correct that exits should be shorter, but the complaint here is about the entrance, and the rule is a refinement rather than a cause of perceived sluggishness."}]}],"order":[1,3,2,0],"why":null},"prev":{"slug":"motion-as-feedback","title":"The three jobs an animation can do","minutes":9},"next":{"slug":"transition-as-explanation","title":"The transition is the explanation","minutes":10}}}