Design Atlas
한국어
↝ Motion

Pinning

피닝

Locking a section in place on screen while the user keeps scrolling, and advancing only the content inside it — the technique behind "stay on one screen while several steps play out" in scrollytelling.

Also known as: Section pinningScroll pinSticky scrollytelling
···
html
<div class="page" id="page">
  <div class="pin">
    <span class="tag">PINNED</span>
    <div class="steps" id="steps">
      <div class="step">1<b>Intro</b></div>
      <div class="step">2<b>Detail</b></div>
      <div class="step">3<b>Compare</b></div>
      <div class="step">4<b>Done</b></div>
    </div>
    <div class="dots" id="dots"><i></i><i></i><i></i><i></i></div>
  </div>
</div>
css
.page{position:absolute;inset:0;overflow:hidden}
.pin{position:absolute;inset:8% 10%;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.tag{position:absolute;top:8px;left:12px;font:700 9px/1 ui-monospace,monospace;letter-spacing:.08em;color:var(--accent-3);z-index:2}
.steps{position:relative;flex:1;display:flex;width:400%}
.step{flex:none;width:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font:800 clamp(26px,9vmin,44px)/1 sans-serif;color:var(--accent)}
.step b{font:600 12px/1 sans-serif;color:var(--muted)}
.dots{display:flex;justify-content:center;gap:8px;padding:10px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--accent)}
js
const steps = document.getElementById('steps');
const dots = [...document.getElementById('dots').children];
let i = 0;
function render() {
  steps.style.transform = 'translateX(-' + (i * 25) + '%)';
  dots.forEach((d, idx) => d.classList.toggle('on', idx === i));
}
render();
setInterval(() => {
  i = (i + 1) % 4;
  render();
}, 1400);

Ordinary scroll carries page content upward continuously; pinning briefly interrupts that flow for one section. Short pins use position: sticky; longer, multi-step pins switch the element to position: fixed via JS and reserve extra scroll height on the page for the duration of the pin. From the user's side, the wheel keeps turning but the screen holds still — only the artwork or text inside advances to the next step.

The length of a pinned section is chosen as (number of steps shown inside it) × (scroll distance needed per step) — to show four steps you might reserve roughly four viewport-heights of extra scroll space, then map that 0–1 progress to each step the same way scroll scrub does. GSAP ScrollTrigger's pin: true option is what popularized this pattern.

A pin that runs too long reads as "scrolling stopped working," and users bail. Keeping it to roughly 3–5 steps and 3–5 viewport-heights, with a visual hint that the next section is coming (its edge peeking in), keeps the exit honest.

When to use

Use it when several steps need to be explained in sequence on one screen — product feature walkthroughs, data stories. For a single element just appearing, scroll reveal is enough and pinning is overkill.