Design Atlas
한국어
▣ Presentation & slides

Build Animation

빌드 애니메이션

Bringing a slide's elements in one at a time, timed to what you are saying, instead of showing everything at once.

Also known as: PowerPoint buildAnimate inEntrance animation (slides)
···
html
<div class="slide">
  <span class="tag" id="tag"></span>
  <div class="items">
    <div class="item" id="i0"><span class="dot"></span><span id="t0"></span></div>
    <div class="item" id="i1"><span class="dot"></span><span id="t1"></span></div>
    <div class="item" id="i2"><span class="dot"></span><span id="t2"></span></div>
  </div>
</div>
css
.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:9vmin 10vmin;display:flex;flex-direction:column;justify-content:center}
.tag{position:absolute;top:4%;left:4%;font:700 clamp(9px,2.2vmin,12px)/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.items{display:flex;flex-direction:column;gap:clamp(8px,2.4vmin,16px)}
.item{display:flex;align-items:center;gap:clamp(6px,1.6vmin,10px);opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.item.show{opacity:1;transform:translateY(0)}
.dot{width:clamp(7px,1.8vmin,11px);aspect-ratio:1;border-radius:50%;background:var(--accent-3);flex:none}
.item span:last-child{font:650 clamp(11px,2.8vmin,15px)/1.3 -apple-system,sans-serif;color:var(--fg)}
js
const el = (id) => document.getElementById(id);
const items = [el('i0'), el('i1'), el('i2')];
const L = {
  ko: { tag: '빌드 재생 중', t: ['문제를 정의한다', '해결책을 제시한다', '다음 단계를 제안한다'] },
  en: { tag: 'Build playing', t: ['Define the problem', 'Present the solution', 'Propose next steps'] },
};
let lang = 'ko';
function paintText() {
  const t = L[lang];
  el('tag').textContent = t.tag;
  t.t.forEach((v, i) => { document.getElementById('t' + i).textContent = v; });
}
function showN(k) { items.forEach((it, idx) => it.classList.toggle('show', idx < k)); }
function loop() {
  paintText();
  showN(1);
  setTimeout(() => showN(2), 700);
  setTimeout(() => showN(3), 1400);
  setTimeout(() => { lang = lang === 'ko' ? 'en' : 'ko'; }, 3300);
  setTimeout(() => showN(0), 3400);
  setTimeout(loop, 3600);
}
loop();

A build is the "animate" feature in PowerPoint or Keynote — bullets, images, or shapes appear one at a time, on a click or on a timer. It keeps the audience from reading ahead and drifting away from what the presenter is saying.

The demo builds three sentences in — each line fades in while sliding up slightly. Compared with showing all three at once, a build visually tells the audience which sentence the presenter is on right now.

Checklist: is the entrance direction and speed consistent across the whole deck, did you keep it to a fade plus a small shift instead of a flashy spin, does the animation's timing match when the presenter actually moves to the next line.

When to use

Use it only when a slide walks through several points in order — building every slide makes the whole talk feel slower, not clearer.