Design Atlas
한국어
↝ Motion

Slow in and slow out

슬로우 인 슬로우 아웃

The principle of clustering drawings near the start and end of a move and spacing them wider in the middle, so the action accelerates and decelerates — the direct ancestor of CSS's ease-in-out.

Also known as: Ease in / ease out (traditional animation)
···
html
<div class="rows">
  <div class="row">
    <span class="tag">Linear</span>
    <div class="track" id="trackLin"><i class="ball"></i></div>
  </div>
  <div class="row">
    <span class="tag">Slow in / slow out</span>
    <div class="track" id="trackEase"><i class="ball ease"></i></div>
  </div>
</div>
css
.rows{position:absolute;inset:12% 8%;display:flex;flex-direction:column;justify-content:space-around}
.row{display:flex;flex-direction:column;gap:8px}
.tag{font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.track{position:relative;height:20px}
.track::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;background:var(--line)}
.tick{position:absolute;top:50%;width:2px;height:10px;margin-top:-5px;background:var(--muted);opacity:.55}
.ball{position:absolute;top:50%;left:0;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,.2);animation:moveTrack 2.2s linear infinite}
.ball.ease{background:var(--accent-3);animation:moveTrack 2.2s ease-in-out infinite}
@keyframes moveTrack{from{left:0}to{left:calc(100% - 20px)}}
js
function easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; }
const linTrack = document.getElementById('trackLin');
const easeTrack = document.getElementById('trackEase');
for (let i = 0; i <= 8; i++) {
  const fLin = i / 8;
  const fEase = easeInOutQuad(i / 8);
  const t1 = document.createElement('i');
  t1.className = 'tick';
  t1.style.left = 'calc((100% - 20px) * ' + fLin + ' + 9px)';
  linTrack.appendChild(t1);
  const t2 = document.createElement('i');
  t2.className = 'tick';
  t2.style.left = 'calc((100% - 20px) * ' + fEase + ' + 9px)';
  easeTrack.appendChild(t2);
}

Almost nothing in the real world moves at constant speed. A hand reaching for a cup, an arm opening a door — both start slow, speed up, and slow down again before stopping. Animators captured that feeling through spacing: pack the drawings close together where the motion is slow, and spread them apart where it's fast.

Plot dots at equal time intervals and the idea becomes visible: linear motion produces evenly spaced dots; slow-in/slow-out clusters them at both ends and spreads them in the middle. In CSS this became the easing curve directly — ease, ease-in-out, cubic-bezier().

Both tracks below cover the same distance in the same time. The top one is linear, so its dots are evenly spaced and the motion reads as mechanical. The bottom one is ease-in-out, so its dots bunch up at both ends — the start and stop feel soft.

When to use

Use slow-in/slow-out for anything the user just triggered — clicks, drag releases. For an endless loop like a loading spinner, linear is usually the better, less distracting choice.