The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 2

Performant CSS Animations: Transform vs. Left

This demo illustrates the performance difference between animating an element's 'left' property and its 'transform: translateX()' property. Animating 'left' forces the browser to re-calculate layout on every frame, leading to a 'janky' or stuttering effect. In contrast, 'transform: translateX()' allows the browser to offload the animation directly to the GPU, skipping layout and paint, resulting in a smooth 60fps animation.

animationcsslayoutperformancetransformgpu

2 / 2

CSS Scroll-Driven Progress Bar & Reveals

This snippet demonstrates two powerful CSS scroll-driven animations: a reading progress bar that fills as the user scrolls the page (using `animation-timeline: scroll(root)`) and individual cards that fade and lift into view as they enter the viewport (using `animation-timeline: view()`), all achieved with pure CSS, no JavaScript.

animationcssscrollrevealprogress barperformance