The Old NetISSUE #54 of 60

animations the dhtml way · setInterval + style

Pixel PeteVSQuirks Mode

Pixel Pete saysClassic DHTML animation changed style values on a setInterval loop — CSS/rAF replaced it.

Before CSS transitions, DHTML animated by nudging style.left or style.opacity every few milliseconds with setInterval. It worked but was janky and CPU-heavy. Today, CSS transitions/animations handle most motion declaratively, and requestAnimationFrame drives JS animation smoothly. Knowing the old way explains why the new tools exist.

Power-ups you unlock

Old way: setInterval + style nudges
Janky and CPU-heavy
CSS transitions/animations replaced most of it
requestAnimationFrame for smooth JS motion

Quirks Mode attacks — common mistakes

Animating layout properties (left/top) — reflow-heavy
Using setInterval instead of rAF for motion
Hand-animating what CSS transitions do for free

Boss battleMove a box with a setInterval loop, then note how a CSS transition would do it better.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;padding:20px"><div id="b" style="width:30px;height:30px;background:#b388ff;position:relative"></div>
<script>let x=0;const b=document.getElementById('b');const id=setInterval(()=>{x+=4;b.style.left=x+'px';if(x>=200)clearInterval(id);},20);</script></body></html>

▶ Open the interactive comic issue

‹ Toggle Patterns · ClassList.Toggle Drag And Drop · Mousedown · Mousemove · Mouseup ›