60fps-animation

Performant Web Animation Eliminate the #1 cause of janky web animation: animating properties that force the browser to recalculate layout (reflow) or repaint on every frame. The browser renders in stages — layout → paint → composite . Animating width , height , top , left , margin , padding , box-shadow , or filter re-runs layout and/or paint each frame, blocking the main thread. Animating transform and opacity runs entirely on the compositor (often the GPU), skipping layout and paint, which is what makes animation smooth at 60/120fps. When to use Use when an animation stutters or drops frames, when a hover/scroll effect feels heavy, when animating size/position/shadow, when a layout change needs to animate smoothly (cards reordering, an element moving between containers), when animating height: auto , or when reviewing animation code for performance. Core rule: animate only transform and opacity Map every "expensive" animation to a cheap equivalent. Show more Installs 1.1K Repository iart-ai/web-ani…n-skills GitHub Stars 25 First Seen Jun 23, 2026 Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Pass