Stagger props

[argyleink]

Extracted from here https://codepen.io/jh3y/pen/OJzJGee, made into reusables OP style down below:

Stagger

html {
  --stagger-1: calc(var(--index, 0) * 0.05s);
  --stagger-2: calc(var(--index, 0) * 0.1s);
  --stagger-3: calc(var(--index, 0) * 0.15s);
  --stagger-4: calc(var(--index, 0) * 0.25s);
  --stagger-5: calc(var(--index, 0) * 0.5s);
}

.el {
  animation-delay: var(--stagger-2);
}

.el:nth-of-type(1) { --index: 0 }
.el:nth-of-type(2) { --index: 1 }
.el:nth-of-type(3) { --index: 2 }
.el:nth-of-type(4) { --index: 3 }
.el:nth-of-type(5) { --index: 4 }

Reverse Stagger

html {
  --reverse-stagger-1: calc((var(--delay) - var(--index, 0)) * 0.05s);
  --reverse-stagger-2: calc((var(--delay) - var(--index, 0)) * 0.1s);
  --reverse-stagger-3: calc((var(--delay) - var(--index, 0)) * 0.15s);
  --reverse-stagger-4: calc((var(--delay) - var(--index, 0)) * 0.25s);
  --reverse-stagger-5: calc((var(--delay) - var(--index, 0)) * 0.5s);
}

.rev-el {
  --delay: 4;
  animation-delay: var(--reverse-stagger-2);
}

.rev-el:nth-of-type(1) { --index: 0 }
.rev-el:nth-of-type(2) { --index: 1 }
.rev-el:nth-of-type(3) { --index: 2 }
.rev-el:nth-of-type(4) { --index: 3 }

@jh3y, thoughts!?

[WebMechanic]

Nice :) and the bears, too :D
The timings are (still) "static", could they also be based off the --index to calculate the timings?
Maybe have a base multiplier / factor to get a proper scale?
(...need to give this a go and play with it.)

[jh3y]

Hey y'all! 👋

I do really like this idea of introducing stagger props through the different behavior styles ❤️

Wonder if there is a way that we could provide an override for the delay step? For example, the default step is a fraction of the delay depending on the number of items, right?

But, how do we scale that whilst making it flexible enough? In the demo, I've been using initial-delay, animation-duration, stagger-step, coefficient (For negative delay), and an offset. It's hard to know exactly how many elements there will be unless you could do some form of JIT or build step. Looping and the use of custom properties in selectors 🙏

Semi-related to animation, I've been exploring animation-repeat-delay which is another funky use case which would be great.

@jh3y

[argyleink]

if we had sibling-index() and sibling-count() all of this would be trivial w3c/csswg-drafts#4559

maybe this feature has some js we ship with it, that fills out the props based on children?

[jh3y]

Yeah, I love those ideas. They would be rad functions to have access too. This could be relatively "trivial" to implement as a polyfill. I'm thinking along the lines of how SplitingJS does things. User attaches some attribute that tells it that you want sibling prop enhancement so we don't do a huge tree traversal 😅

document.querySelectorAll(`[data-sibling-prop-enhance]`).forEach(el => el.style.setProperty('--sibling-count', el.children.length))

[argyleink]

we could just recommend or integrate with splitting?

or

we do the work to crawl stylesheets, hunting for usage of the stagger vars, then query the dom for that selector owning the stagger, find the siblings and give them the inline props required? would mean no additional markup needed on elements and it'd be mostly "magical"

all this sounds like documentation that should exist around the props

[jh3y]

I really like that second option 💙

A little more overhead than the explicit attribute but has the ✨ magic ✨ that would make for a cool experience when dropped in.