{"id":9759,"date":"2026-06-08T08:50:05","date_gmt":"2026-06-08T13:50:05","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=9759"},"modified":"2026-06-08T08:50:06","modified_gmt":"2026-06-08T13:50:06","slug":"scrubbable-staggered-animation-with-css-function","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/scrubbable-staggered-animation-with-css-function\/","title":{"rendered":"Scrubbable Staggered Animation with CSS @function"},"content":{"rendered":"\n

Everyone who has spent time creating staggered effects with CSS has reached for animation-delay<\/code> or transition-delay<\/code> at some point. Vary the delay slightly for each item, and you get that satisfying cascading effect. It works. But it’s not transferable. You can’t scrub through it, tie it to scroll, or link it to any external progress value. Each element lives in its own isolated timeline.<\/p>\n\n\n\n

There’s a different way to think about staggered animation \u2014 not as a collection of independently timed objects, but as a single predictable, holistic effect driven by one progress value. You can then easily connect that progress value to an animation, scroll progress, or any other input to drive the staggering.<\/p>\n\n\n\n

In this article, we will learn how this can be done using a mathematical formula, which I’ll call the stagger formul<\/em>a<\/span>. We’ll build it step by step, understand exactly how it works, and implement it in CSS using the new @function<\/code> rule. Plus, have some fun.<\/p>\n\n\n\n

A Quick Note on Browser Support<\/strong>
Examples in this article use newer CSS features like @function<\/code> rule and if()<\/code>, sibling-index()<\/code>, sibling-count()<\/code> functions. These currently work best in the latest Chrome\/Edge (as of May 2026), while support in Firefox and Safari is still limited or missing.<\/p>\n\n\n\n

A Brief Intro to the Stagger Formula<\/h2>\n\n\n\n

Imagine m<\/mi>m<\/annotation><\/semantics><\/math> as the animation progress of the staggered animation. It’s not the animation progress of an individual object. It’s the progress of the whole animation. And you can update m<\/mi>m<\/annotation><\/semantics><\/math>‘s value to drive the animation in a particular direction, somewhat like scrubbing the timeline in a video editor. You can link m<\/mi>m<\/annotation><\/semantics><\/math> to @keyframes<\/code>, transition, scroll-driven animations, or any other kind of motion. It opens up a lot of possibilities that are not possible with thinking in terms of individual objects separately.<\/p>\n\n\n\n

The stagger formula makes it possible. You give it m<\/mi>m<\/annotation><\/semantics><\/math> and a few more bits of data, it gives you back the animation progress of an individual object you are interested in. It looks like this:<\/p>\n\n\n\n
p<\/mi>i<\/mi><\/msub>=<\/mo>clamp<\/mtext><\/mspace>(<\/mo>0<\/mn>,<\/mo> <\/mtext>lerp<\/mtext><\/mspace>(<\/mo>x<\/mi>+<\/mo>u<\/mi>k<\/mi><\/mfrac>,<\/mo> <\/mtext>y<\/mi>+<\/mo>v<\/mi>k<\/mi><\/mfrac>,<\/mo> <\/mtext>m<\/mi>)<\/mo><\/mrow>\u2212<\/mo>i<\/mi>k<\/mi><\/mfrac>,<\/mo> <\/mtext>1<\/mn>)<\/mo><\/mrow><\/mrow>p_i = \\text{clamp}\\!\\left(0,\\ \\text{lerp}\\!\\left(x + \\frac{u}{k},\\ y + \\frac{v}{k},\\ m\\right) – \\frac{i}{k},\\ 1\\right)<\/annotation><\/semantics><\/math><\/div>\n\n\n\n

In the following CodePen, you can play with different parameters to get a feel for them.<\/p>\n\n\n\n