{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"slug":"why-ease-ease-still-looks-wrong","title":"Why pressing Easy Ease still looks wrong","url":"https://addaly.com/learn/motion-and-audio/why-ease-ease-still-looks-wrong","position":5,"of":72,"minutes":10,"answer":"A keyframe handle has an angle and a length.","keyIdea":"A keyframe handle has an angle and a length, and the one-key ease sets both to a symmetric default nobody chose: dragging the outgoing handle's influence to roughly three-quarters is what turns a mushy move into one that commits and then settles."},"body":{"format":"markdown","text":"## The handle has two properties and you only used one\n\nSelect two keyframes, press the ease key, and the motion improves. It also stops improving there, and most people never find out why.\n\nA bezier handle on a keyframe has two independent properties:\n\n- **Angle**: the direction the curve leaves or arrives at the keyframe. Setting it flat is what makes the speed zero at that point.\n- **Influence, or length**: how far into the interval that flatness persists before the curve turns.\n\nPressing the ease shortcut sets both, to a symmetric default. In After Effects that default is 33.33% influence on each side. In CSS, `ease` is `cubic-bezier(0.25, 0.1, 0.25, 1)`. Neither number was chosen for your shot. They are a compromise that makes everything a little better and nothing actually good.\n\n## The asymmetry rule\n\nMost motion that reads well is asymmetric, and the reason is physical. A thing arriving has to shed energy, which takes time. A thing departing under its own power can accelerate hard and then leave the frame at speed: the deceleration happens off-screen or not at all.\n\nSo:\n\n- **Something arriving or settling**: little or no ease on the way in, a long ease on the way out. Try 10% in, 75% out.\n- **Something leaving**: a long ease in, little on the way out, because you never see it stop.\n- **Something moving between two positions and staying**: ease both, but not equally: around 30% in, 60% out reads as intentional rather than symmetrical.\n\nThe symmetric default is the one shape that never happens in the world: an object that decelerates exactly as gradually as it accelerated, having apparently decided both in advance.\n\n## Why symmetric easing feels mushy\n\nThe distance is fixed and the duration is fixed. If both ends are slow, all the travel has to be crammed into the middle. You get slow, then a burst, then slow. The eye reads that centre burst as the real motion and the slow ends as hesitation, so the whole move feels indecisive without anybody being able to say why.\n\nMove the influence to one side and the picture changes: the object commits, then relaxes. Same two keyframes, same duration, different reading.\n\n## The numbers people actually ship\n\nIf you want a starting point rather than a principle:\n\n```css\n/* browser defaults */\nease:        cubic-bezier(0.25, 0.10, 0.25, 1.00);\nease-out:    cubic-bezier(0.00, 0.00, 0.58, 1.00);\nease-in-out: cubic-bezier(0.42, 0.00, 0.58, 1.00);\n\n/* the curve most design systems converge on for UI */\nstandard:    cubic-bezier(0.40, 0.00, 0.20, 1.00);\ndecelerate:  cubic-bezier(0.00, 0.00, 0.20, 1.00);\naccelerate:  cubic-bezier(0.40, 0.00, 1.00, 1.00);\n```\n\nThe four numbers are the x and y of the two control points on a unit square: time across, progress up. `0.40, 0.00` says the curve leaves the origin flat and slightly late: a short, firm acceleration. `0.20, 1.00` says it arrives at full progress early and coasts: a long settle.\n\nNotice that the standard curve is exactly the asymmetry described above, expressed as four decimals.\n\n## Overshoot, and how much\n\nAn object that arrives and stops dead at its target looks correct and dull. An object that passes the target and comes back reads as having mass.\n\nWith bezier keyframes this needs a third keyframe: target at 105 to 110%, then back to 100%. The return should take roughly twice as long as the overshoot, because settling is slower than travelling.\n\n- **103 to 106%**: barely conscious. Right for anything you will see hundreds of times.\n- **108 to 115%**: noticeable, playful, fine for a one-off title or a logo sting.\n- **125% and up**: cartoon. Correct for cartoons.\n\nThe common failure is overshooting on scale and position together, which produces something that looks like it has been thrown at the screen.\n\n## Where beziers run out\n\nA bezier curve between two keyframes is a single smooth arc. It cannot express a bounce that decays over three or four diminishing hops without you stacking keyframes and setting each one by hand. It also cannot be interrupted: if the user taps again halfway through, a keyframed tween has to be cancelled and restarted, and the restart is visible as a jump.\n\nThose two limits (decay, and interruptibility) are the whole argument for springs, which is the next lesson. Beziers are for motion you fully control from start to finish. Springs are for motion that has to respond to somebody.\n\n## The practical move\n\nNext time an animation is nearly right, do not add a blur or a glow. Open the graph, grab the outgoing handle, and drag it from a third of the way across to about three-quarters. Watch what happens to the settle. That one drag is most of the difference between animation that looks made and animation that looks defaulted."},"check":{"question":"A designer applies symmetric easing to a card sliding 400px into place over 400ms. It reads as hesitant. Why does making both ends equally gradual produce that specific impression?","options":[{"text":"Symmetric easing halves the effective duration of the move, so the card spends only around 200ms of its 400ms actually travelling, and the eye registers the two stationary-looking stretches at either end as pauses.","correct":false,"tempting":"Invents a duration penalty; the card is in motion for the whole 400ms, just at varying speeds."},{"text":"The distance and duration are fixed, so slowing both ends forces all the travel into a fast middle: the eye reads the burst as the motion and the slow ends as indecision.","correct":true},{"text":"Symmetric curves have no overshoot, and without overshoot no motion can read as having mass.","correct":false,"tempting":"Overshoot adds weight but is not required for decisiveness; an asymmetric ease with no overshoot reads as committed."},{"text":"Cubic beziers cannot hold a constant velocity, so a symmetric curve is always accelerating or decelerating and never settles.","correct":false,"tempting":"A bezier with collinear handles produces constant velocity perfectly well; the issue is where the curve puts its fast section, not that it has one."}]},"prev":{"slug":"the-graph-editor","title":"The panel most people never open","url":"https://addaly.com/learn/motion-and-audio/the-graph-editor"},"next":{"slug":"springs-instead-of-curves","title":"Springs, and what you give up for them","url":"https://addaly.com/learn/motion-and-audio/springs-instead-of-curves"},"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) 'Why pressing Easy Ease still looks wrong', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/why-ease-ease-still-looks-wrong (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":"Why pressing Easy Ease still looks wrong","courseTitle":"Motion, Sound and Music","module":{"index":1,"slug":"how-motion-reads-as-real","title":"How motion reads as real"},"answer":null,"keyIdea":"A keyframe handle has an angle and a length, and the one-key ease sets both to a symmetric default nobody chose: dragging the outgoing handle’s influence to roughly three-quarters is what turns a mushy move into one that commits and then settles.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"the-handle-has-two-properties-and-you-only-used-one","runs":[{"text":"The handle has two properties and you only used one"}]},{"t":"p","runs":[{"text":"Select two keyframes, press the ease key, and the motion improves. It also stops improving there, and most people never find out why."}]},{"t":"p","runs":[{"text":"A bezier handle on a keyframe has two independent properties:"}]},{"t":"ul","items":[[{"text":"Angle","b":true},{"text":": the direction the curve leaves or arrives at the keyframe. Setting it flat is what makes the speed zero at that point."}],[{"text":"Influence, or length","b":true},{"text":": how far into the interval that flatness persists before the curve turns."}]]},{"t":"p","runs":[{"text":"Pressing the ease shortcut sets both, to a symmetric default. In After Effects that default is 33.33% influence on each side. In CSS, "},{"text":"ease","code":true},{"text":" is "},{"text":"cubic-bezier(0.25, 0.1, 0.25, 1)","code":true},{"text":". Neither number was chosen for your shot. They are a compromise that makes everything a little better and nothing actually good."}]},{"t":"h2","id":"the-asymmetry-rule","runs":[{"text":"The asymmetry rule"}]},{"t":"p","runs":[{"text":"Most motion that reads well is asymmetric, and the reason is physical. A thing arriving has to shed energy, which takes time. A thing departing under its own power can accelerate hard and then leave the frame at speed: the deceleration happens off-screen or not at all."}]},{"t":"p","runs":[{"text":"So:"}]},{"t":"ul","items":[[{"text":"Something arriving or settling","b":true},{"text":": little or no ease on the way in, a long ease on the way out. Try 10% in, 75% out."}],[{"text":"Something leaving","b":true},{"text":": a long ease in, little on the way out, because you never see it stop."}],[{"text":"Something moving between two positions and staying","b":true},{"text":": ease both, but not equally: around 30% in, 60% out reads as intentional rather than symmetrical."}]]},{"t":"p","runs":[{"text":"The symmetric default is the one shape that never happens in the world: an object that decelerates exactly as gradually as it accelerated, having apparently decided both in advance."}]},{"t":"h2","id":"why-symmetric-easing-feels-mushy","runs":[{"text":"Why symmetric easing feels mushy"}]},{"t":"p","runs":[{"text":"The distance is fixed and the duration is fixed. If both ends are slow, all the travel has to be crammed into the middle. You get slow, then a burst, then slow. The eye reads that centre burst as the real motion and the slow ends as hesitation, so the whole move feels indecisive without anybody being able to say why."}]},{"t":"p","runs":[{"text":"Move the influence to one side and the picture changes: the object commits, then relaxes. Same two keyframes, same duration, different reading."}]},{"t":"h2","id":"the-numbers-people-actually-ship","runs":[{"text":"The numbers people actually ship"}]},{"t":"p","runs":[{"text":"If you want a starting point rather than a principle:"}]},{"t":"code","lang":"css","label":"CSS","text":"/* browser defaults */\nease:        cubic-bezier(0.25, 0.10, 0.25, 1.00);\nease-out:    cubic-bezier(0.00, 0.00, 0.58, 1.00);\nease-in-out: cubic-bezier(0.42, 0.00, 0.58, 1.00);\n\n/* the curve most design systems converge on for UI */\nstandard:    cubic-bezier(0.40, 0.00, 0.20, 1.00);\ndecelerate:  cubic-bezier(0.00, 0.00, 0.20, 1.00);\naccelerate:  cubic-bezier(0.40, 0.00, 1.00, 1.00);"},{"t":"p","runs":[{"text":"The four numbers are the x and y of the two control points on a unit square: time across, progress up. "},{"text":"0.40, 0.00","code":true},{"text":" says the curve leaves the origin flat and slightly late: a short, firm acceleration. "},{"text":"0.20, 1.00","code":true},{"text":" says it arrives at full progress early and coasts: a long settle."}]},{"t":"p","runs":[{"text":"Notice that the standard curve is exactly the asymmetry described above, expressed as four decimals."}]},{"t":"h2","id":"overshoot-and-how-much","runs":[{"text":"Overshoot, and how much"}]},{"t":"p","runs":[{"text":"An object that arrives and stops dead at its target looks correct and dull. An object that passes the target and comes back reads as having mass."}]},{"t":"p","runs":[{"text":"With bezier keyframes this needs a third keyframe: target at 105 to 110%, then back to 100%. The return should take roughly twice as long as the overshoot, because settling is slower than travelling."}]},{"t":"ul","items":[[{"text":"103 to 106%","b":true},{"text":": barely conscious. Right for anything you will see hundreds of times."}],[{"text":"108 to 115%","b":true},{"text":": noticeable, playful, fine for a one-off title or a logo sting."}],[{"text":"125% and up","b":true},{"text":": cartoon. Correct for cartoons."}]]},{"t":"p","runs":[{"text":"The common failure is overshooting on scale and position together, which produces something that looks like it has been thrown at the screen."}]},{"t":"h2","id":"where-beziers-run-out","runs":[{"text":"Where beziers run out"}]},{"t":"p","runs":[{"text":"A bezier curve between two keyframes is a single smooth arc. It cannot express a bounce that decays over three or four diminishing hops without you stacking keyframes and setting each one by hand. It also cannot be interrupted: if the user taps again halfway through, a keyframed tween has to be cancelled and restarted, and the restart is visible as a jump."}]},{"t":"p","runs":[{"text":"Those two limits (decay, and interruptibility) are the whole argument for springs, which is the next lesson. Beziers are for motion you fully control from start to finish. Springs are for motion that has to respond to somebody."}]},{"t":"h2","id":"the-practical-move","runs":[{"text":"The practical move"}]},{"t":"p","runs":[{"text":"Next time an animation is nearly right, do not add a blur or a glow. Open the graph, grab the outgoing handle, and drag it from a third of the way across to about three-quarters. Watch what happens to the settle. That one drag is most of the difference between animation that looks made and animation that looks defaulted."}]}],"check":{"question":[{"text":"A designer applies symmetric easing to a card sliding 400px into place over 400ms. It reads as hesitant. Why does making both ends equally gradual produce that specific impression?"}],"options":[{"text":[{"text":"Symmetric easing halves the effective duration of the move, so the card spends only around 200ms of its 400ms actually travelling, and the eye registers the two stationary-looking stretches at either end as pauses."}],"correct":false,"tempting":[{"text":"Invents a duration penalty; the card is in motion for the whole 400ms, just at varying speeds."}]},{"text":[{"text":"The distance and duration are fixed, so slowing both ends forces all the travel into a fast middle: the eye reads the burst as the motion and the slow ends as indecision."}],"correct":true,"tempting":null},{"text":[{"text":"Symmetric curves have no overshoot, and without overshoot no motion can read as having mass."}],"correct":false,"tempting":[{"text":"Overshoot adds weight but is not required for decisiveness; an asymmetric ease with no overshoot reads as committed."}]},{"text":[{"text":"Cubic beziers cannot hold a constant velocity, so a symmetric curve is always accelerating or decelerating and never settles."}],"correct":false,"tempting":[{"text":"A bezier with collinear handles produces constant velocity perfectly well; the issue is where the curve puts its fast section, not that it has one."}]}],"order":[2,0,3,1],"why":null},"prev":{"slug":"the-graph-editor","title":"The panel most people never open","minutes":9},"next":{"slug":"springs-instead-of-curves","title":"Springs, and what you give up for them","minutes":10}}}