12 — For Developers
Scroll and interaction patterns.
Fifteen canonical patterns in two tiers, all vanilla CSS and minimal JavaScript. Patterns 1 through 7 are the core tier, open to every deliverable. Patterns 8 through 15 are the flagship tier: scroll-scrubbed moves reserved for showcase pieces, used two or three at a time, never all at once. No GSAP, no Lottie, no scroll libraries. Motion at Parcion is scroll-driven and quiet: things arrive, they do not perform. Every pattern is additive, which means a page with JavaScript disabled is still a complete page.
Do
- Copy these blocks verbatim. The timing values are decisions, not suggestions.
- Keep real content in the HTML: finished numbers, visible charts, readable sections. JS replays; it never reveals.
- Respect
prefers-reduced-motion. The block at the end of this section handles it; include it in every deliverable.
- Fire each animation once. A chart that redraws on every scroll-by is begging for attention.
Avoid
- Click-triggered animation. Clicks navigate; scrolling reveals.
- Easing with personality: no bounce, elastic, or overshoot curves.
- Durations over 1.2s. Past that, motion stops feeling like arrival and starts feeling like waiting.
- Threshold observers for deck nav dots. They fail on tall slides; pattern 1 explains the fix.
- More than three flagship-tier patterns in one deliverable. Past three, the deck is performing, and the reader can tell.
1. Deck kit: scroll snap, nav dots, and the midpoint rule
The three pieces every paginated deck needs, in one block. Snap handles pagination. Dots handle orientation. The active dot tracks the viewport midpoint, not an IntersectionObserver threshold, because a threshold of 0.6 can never fire on a slide three viewports tall (a sticky-story slide, for instance). The midpoint method works on every slide height and costs one passive scroll listener.
html { scroll-snap-type: y mandatory; }
.slide { scroll-snap-align: start; }
.deck-nav {
position: fixed; right: 18px; top: 50%;
transform: translateY(-50%);
display: flex; flex-direction: column; gap: 10px; z-index: 100;
}
.deck-dot {
width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0;
background: var(--pp-mid-gray); cursor: pointer;
transition: background 200ms ease, transform 200ms ease;
}
.deck-dot.active { background: var(--pp-gold); transform: scale(1.5); }
<nav class="deck-nav" aria-label="Slides">
<button class="deck-dot" data-slide="s1" aria-label="Slide 1"></button>
<button class="deck-dot" data-slide="s2" aria-label="Slide 2"></button>
</nav>
<script>
document.querySelectorAll('.deck-dot').forEach(dot => {
dot.addEventListener('click', () =>
document.getElementById(dot.dataset.slide)
.scrollIntoView({ behavior: 'smooth' }));
});
(function () {
const slides = Array.from(document.querySelectorAll('.slide'));
const dots = Array.from(document.querySelectorAll('.deck-dot'));
function setActive() {
const mid = window.innerHeight / 2;
let active = 0;
slides.forEach((s, i) => {
const r = s.getBoundingClientRect();
if (r.top <= mid && r.bottom > mid) active = i;
});
dots.forEach((d, i) => d.classList.toggle('active', i === active));
}
window.addEventListener('scroll', setActive, { passive: true });
setActive();
})();
</script>
2. Reading progress indicator
A one-pixel gold bar fixed to the top of the page. One element, two rules, one listener. Use it on long-form documents and decks. Never thicker than 1px: at 2px it becomes a feature, and it is not a feature.
<!-- immediately after <body> -->
<div class="pp-progress"></div>
<style>
.pp-progress {
position: fixed; top: 0; left: 0; height: 1px;
background: var(--pp-gold); width: 0%; z-index: 9999;
transition: width 60ms linear;
}
</style>
<script>
window.addEventListener('scroll', () => {
const p = window.scrollY / (document.body.scrollHeight - window.innerHeight);
document.querySelector('.pp-progress').style.width = (Math.min(p, 1) * 100) + '%';
}, { passive: true });
</script>
3. Section reveal on enter
Sections fade up 16 pixels as they enter the viewport. A quiet arrival, once, and done. Because sections start invisible, the two fallbacks are mandatory. Skip them and you will ship blank pages to printers and old browsers.
.section {
opacity: 0;
translate: 0 16px;
transition: opacity 500ms ease, translate 500ms ease;
}
.section.visible { opacity: 1; translate: 0 0; }
@media print { .section { opacity: 1; translate: 0 0; } }
@supports not (selector(:focus-visible)) { .section { opacity: 1; translate: 0 0; } }
const revealObs = new IntersectionObserver(entries =>
entries.forEach(e => {
if (e.isIntersecting) { e.target.classList.add('visible'); revealObs.unobserve(e.target); }
}), { threshold: 0.08 });
document.querySelectorAll('.section').forEach(el => revealObs.observe(el));
4. KPI count-up on scroll
Big numbers count from zero when half visible, once. The finished value lives in the HTML text, so screen readers, search, and no-JS environments see the real number. The script replays what is already there.
<!-- HTML: the real value is the text content -->
<span data-countup data-target="3.2" data-prefix="$" data-suffix="B" data-decimals="1">$3.2B</span>
<script>
function countUp(el) {
const target = parseFloat(el.dataset.target);
const prefix = el.dataset.prefix || '';
const suffix = el.dataset.suffix || '';
const decimals = el.dataset.decimals || 0;
const duration = 900;
const start = performance.now();
function step(now) {
const p = Math.min((now - start) / duration, 1);
const ease = 1 - Math.pow(1 - p, 3);
el.textContent = prefix + (target * ease).toFixed(decimals) + suffix;
if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const countObs = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
if (!reduceMotion) countUp(e.target);
countObs.unobserve(e.target);
}
});
}, { threshold: 0.5 });
document.querySelectorAll('[data-countup]').forEach(el => countObs.observe(el));
</script>
5. Chart path draw-on-scroll
SVG lines draw themselves as the chart enters view, using stroke-dasharray. The dasharray must be at least the true path length: 1000 covers guide-scale charts, and getTotalLength() gives the exact figure when a long path falls short. Lines stay visible without JavaScript because the class that hides them is only applied by script.
.chart-line.pending {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.chart-line {
transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart-line.drawn { stroke-dashoffset: 0; }
const lines = document.querySelectorAll('.chart-line');
const reduceDraw = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!reduceDraw) {
lines.forEach(l => l.classList.add('pending'));
const drawObs = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.querySelectorAll('.chart-line').forEach(l => l.classList.add('drawn'));
drawObs.unobserve(e.target);
}
});
}, { threshold: 0.4 });
document.querySelectorAll('.pp-chart, .chart-frame').forEach(c => drawObs.observe(c));
}
6. Native scroll-driven animation (no JS)
The native API ties animation progress directly to scroll position. Supported in Chromium 115+, Safari 18+, and Firefox 132+. Always wrap it in @supports: outside the wrapper, the element simply sits there, fully visible, which is exactly the right fallback.
@keyframes reveal {
from { opacity: 0; translate: 0 20px; }
to { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
.section {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 25%;
}
}
7. Click-to-copy color swatches
Every hex value in §04 and §06b is clickable. Click copies the value and shows a two-second toast. Inline handlers are acceptable in a self-contained guide file; in a production page, bind listeners instead.
function copySwatch(hex, el) {
if (!navigator.clipboard) return;
navigator.clipboard.writeText(hex).then(() => {
const t = document.createElement('div');
t.textContent = hex + ' copied';
t.style.cssText =
'position:fixed;bottom:80px;right:24px;' +
'background:var(--pp-off-black);color:var(--pp-gold);' +
'font-family:var(--pp-font-ui);font-size:11px;letter-spacing:0.18em;' +
'text-transform:uppercase;padding:10px 16px;' +
'border:1px solid var(--pp-gold);z-index:9999;pointer-events:none;';
document.body.appendChild(t);
setTimeout(() => t.remove(), 2000);
});
}
The flagship tier
Eight further patterns for showcase deliverables: the flagship deck, the annual outlook, anything a prospect sees before they meet us. They share one mechanic: progress is scrubbed to scroll position, so the page moves exactly as fast as the reader. The register stays quiet. These are not eight effects to stack; pick the two or three the content calls for.
One gate governs the whole tier. Every hidden-start effect lives behind an fx class that JavaScript adds to the html element only when motion is allowed. No-JS, print, and reduced-motion readers always get the finished page, because nothing was ever hidden from them.
var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!reduceMotion) {
document.documentElement.classList.add('fx');
document.documentElement.classList.add('fx-crossfade');
}
8. Gold thread spine
A fixed one-pixel vertical hairline at the left edge whose gold fill grows with scroll progress. The brand's thin gold thread, made literal: progress becomes spatial instead of abstract. Hide it below 900px, where it crowds the content.
<div class="pp-spine" aria-hidden="true"><div class="fill"></div></div>
<style>
.pp-spine {
position: fixed; left: 24px; top: 0; bottom: 0;
width: 1px; background: var(--pp-hairline-dark); z-index: 90;
}
.pp-spine .fill {
position: absolute; top: 0; left: 0;
width: 1px; height: 0%;
background: var(--pp-gold);
}
@media (max-width: 900px) { .pp-spine { display: none; } }
@media print { .pp-spine { display: none !important; } }
</style>
<script>
(function () {
var fill = document.querySelector('.pp-spine .fill');
window.addEventListener('scroll', function () {
var p = Math.min(window.scrollY / (document.body.scrollHeight - window.innerHeight), 1);
fill.style.height = (p * 100) + '%';
}, { passive: true });
})();
</script>
9. Scroll-scrubbed chart draw
The flagship upgrade of pattern 5. Instead of drawing once on entry, the lines draw in proportion to scroll position: the data moves exactly as fast as the reader. Scrub back and the line recedes. Kill the transition; a scrubbed line that also eases fights the hand on the wheel.
(function () {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
var host = document.getElementById('story-slide');
var lines = host.querySelectorAll('.chart-line');
lines.forEach(function (l) {
l.style.strokeDasharray = '1000';
l.style.transition = 'none';
});
function scrub() {
var r = host.getBoundingClientRect();
var p = Math.min(Math.max((window.innerHeight - r.top) / (window.innerHeight * 1.2), 0), 1);
lines.forEach(function (l) { l.style.strokeDashoffset = String(1000 * (1 - p)); });
}
window.addEventListener('scroll', scrub, { passive: true });
scrub();
})();
10. Surface cross-fade
The background dissolves between light and dark as the deck crosses slide boundaries, instead of hard-cutting. The body carries the surface color and transitions it; the slides go transparent, but only when JavaScript declares the effect live. With JS off, slides keep their solid backgrounds and the cuts are hard, which is the correct fallback.
html.fx-crossfade body { transition: background-color 600ms ease; }
html.fx-crossfade .slide-light,
html.fx-crossfade .slide-dark { background: transparent; }
@media print {
html.fx-crossfade .slide-light { background: #F5F4F0 !important; }
html.fx-crossfade .slide-dark { background: var(--pp-off-black) !important; }
}
if (document.documentElement.classList.contains('fx-crossfade')) {
document.body.style.backgroundColor =
slides[active].classList.contains('slide-light') ? '#F5F4F0' : '#0B0B0B';
}
11. Pinned phrase reveal
The closing statement stays pinned while its lines arrive one at a time as the reader scrolls. Reversible by design: scrub back and the lines recede. Reserve it for the one statement the whole piece was building toward, and keep it to three or four lines. Five is a speech.
<div class="slide slide-dark slide--pin" id="s5">
<div class="pin-stage">
<h1>
<span class="pin-line" style="display: block;">The plan was built</span>
<span class="pin-line" style="display: block;">for a year like this.</span>
</h1>
<p class="pin-line">Supporting paragraph.</p>
<p class="pin-line"><a class="pp-btn" href="...">Call to action</a></p>
</div>
</div>
<style>
.slide--pin { height: auto; min-height: 240vh; display: block; padding: 0; }
.slide--pin .pin-stage {
position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column;
padding: 2.8% 4.5%; box-sizing: border-box;
}
html.fx .pin-line { opacity: 0; translate: 0 14px; transition: opacity 600ms ease, translate 600ms ease; }
html.fx .pin-line.in { opacity: 1; translate: 0 0; }
@media print {
.slide--pin { min-height: 0; }
.slide--pin .pin-stage { position: static; height: auto; }
html.fx .pin-line { opacity: 1 !important; translate: 0 0 !important; }
}
</style>
<script>
(function () {
var host = document.getElementById('s5');
var lines = host.querySelectorAll('.pin-line');
function update() {
var r = host.getBoundingClientRect();
var scrollable = r.height - window.innerHeight;
if (scrollable <= 0) return;
var p = Math.min(Math.max(-r.top / scrollable, 0), 1);
lines.forEach(function (el, i) {
el.classList.toggle('in', p > 0.10 + i * 0.16);
});
}
window.addEventListener('scroll', update, { passive: true });
update();
})();
</script>
12. Odometer digits
KPI digits roll like a mechanical counter instead of interpolating. Quieter and more precise than the count-up, and the right voice for a firm that deals in exact numbers. Each digit is a strip of 0 through 9 that translates into place, staggered 80ms per digit. The markup is built by JavaScript from the same data-countup attributes as pattern 4, so the finished value stays in the HTML for everyone else.
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo > span,
.odo .odo-col { display: block; height: 1.04em; line-height: 1.04em; overflow: hidden; }
.odo .odo-strip { display: block; translate: 0 0; transition: translate 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.odo .odo-strip span { display: block; height: 1.04em; line-height: 1.04em; text-align: center; }
function odometerBuild(el) {
var text = (el.dataset.prefix || '')
+ parseFloat(el.dataset.target).toFixed(el.dataset.decimals || 0)
+ (el.dataset.suffix || '');
el.textContent = '';
el.classList.add('odo');
var strips = [];
text.split('').forEach(function (ch) {
if (/[0-9]/.test(ch)) {
var col = document.createElement('span'); col.className = 'odo-col';
var strip = document.createElement('span'); strip.className = 'odo-strip';
for (var d = 0; d <= 9; d++) {
var sp = document.createElement('span'); sp.textContent = d; strip.appendChild(sp);
}
col.appendChild(strip);
el.appendChild(col);
strips.push({ strip: strip, digit: +ch });
} else {
var st = document.createElement('span'); st.textContent = ch; el.appendChild(st);
}
});
return strips;
}
function odometerRun(strips) {
strips.forEach(function (o, i) {
o.strip.style.transitionDelay = (i * 80) + 'ms';
o.strip.style.translate = '0 ' + (-o.digit * 1.04) + 'em';
});
}
var odoObs = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (!e.isIntersecting) return;
if (e.target._odo) requestAnimationFrame(function () { odometerRun(e.target._odo); });
odoObs.unobserve(e.target);
});
}, { threshold: 0.5 });
document.querySelectorAll('[data-countup]').forEach(function (el) {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
el._odo = odometerBuild(el);
odoObs.observe(el);
});
13. Table row cascade
Table rows arrive in a fast stagger, 40 milliseconds apart, as the table enters view. At that speed it reads as assembly, not animation. Opacity only: transforms on table rows are unreliable across browsers, and the cascade does not need them.
html.fx .pp-table tbody tr { opacity: 0; transition: opacity 400ms ease; }
html.fx .pp-table tbody tr.in { opacity: 1; }
@media print { html.fx .pp-table tbody tr { opacity: 1 !important; } }
(function () {
var table = document.querySelector('.pp-table');
if (!table || !('IntersectionObserver' in window)) return;
var rows = table.querySelectorAll('tbody tr');
var obs = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (!e.isIntersecting) return;
rows.forEach(function (r, i) {
setTimeout(function () { r.classList.add('in'); }, i * 40);
});
obs.unobserve(e.target);
});
}, { threshold: 0.3 });
obs.observe(table);
})();
14. Cover slow zoom
The cover photograph scales from 1.00 to 1.05 across the first viewport of scroll while the gradient holds still. A Ken Burns the reader drives, not a video that plays at them. The image moves to a ::before layer so the transform never touches the content.
.slide-cover { position: relative; background: var(--pp-off-black); }
.slide-cover::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background:
linear-gradient(to bottom, rgba(11,11,11,0.30) 0%, rgba(11,11,11,0.78) 100%),
url('HERO_URL_FROM_MANIFEST') center / cover no-repeat,
var(--pp-off-black);
transform: scale(var(--cover-zoom, 1));
transform-origin: center;
will-change: transform;
}
.slide-cover > * { position: relative; z-index: 1; }
(function () {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
var cover = document.querySelector('.slide-cover');
window.addEventListener('scroll', function () {
var p = Math.min(window.scrollY / window.innerHeight, 1);
cover.style.setProperty('--cover-zoom', String(1 + 0.05 * p));
}, { passive: true });
})();
15. Chart point hover detail
Hover or focus a data point: a dot appears and the value with it. Information on demand, no motion spent. The hit area is an invisible eleven-pixel circle so fingers and imprecise mice both land; the visible dot is 3.5 pixels. Keyboard users reach every point through tabindex.
<!-- One group per data point, inside the chart SVG -->
<g class="pt" tabindex="0">
<circle cx="160" cy="148" r="11" fill="transparent"/>
<circle class="pt-dot" cx="160" cy="148" r="3.5" style="fill: var(--pp-slate-blue)"/>
<text class="pt-label" x="160" y="136" text-anchor="middle"
font-family="Aptos, Inter, sans-serif" font-size="10" font-weight="600"
style="fill: var(--pp-off-white)">28%</text>
</g>
<style>
.pt { cursor: default; outline: none; }
.pt .pt-dot, .pt .pt-label { opacity: 0; transition: opacity 150ms ease; }
.pt:hover .pt-dot, .pt:focus .pt-dot,
.pt:hover .pt-label, .pt:focus .pt-label { opacity: 1; }
@media print { .pt .pt-dot, .pt .pt-label { opacity: 0 !important; } }
</style>
Reduced motion, globally
Include this block in every deliverable that uses any pattern above. Readers who ask for less motion get the finished page immediately. Nothing is lost, because nothing was ever hidden.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
