I'm Florent, a front-end dev. I build Kodza, a free library of UI components in plain HTML, CSS and JS. 111 of them so far: a menu that swings the page open like a trapdoor, cards that stack as you scroll, a carousel you can throw.

Zero dependencies. Not "lightweight". Zero.

The question I get most: "So what do you animate with?" The honest answer is boring. The browser already ships an animation engine, a pinning system and a frame loop. Here is how each one does the job, with code taken from the components (trimmed a little).

1. Long sequences: the Web Animations API

Press Menu on Trapdoor Menu and the page tips back on its bottom edge. Each link rises from its mask as the edge uncovers it, a hairline draws in above it, the image uncovers. A couple dozen animations, one timeline.

element.animate() gives you keyframes, easing, delay and duration per element. What it doesn't give you is a timeline. The trick: give every animation the same total length with endDelay .…