Add index variables for animating using CSS

[flayks]

I just discovered the lib recently, it works great and is very lightweight, thanks for all the work 🙌

In order to animate characters, words and lines using CSS, it would be amazing to have some variables attached to each span, like so:

<!-- for chars -->
<span class="word" style="--index-word: 0; display: inline-block;">
    <span class="char" style="--index-char: 0; display: inline-block;">W</span>
    <span class="char" style="--index-char: 1; display: inline-block;">o</span>
    <span class="char" style="--index-char: 2; display: inline-block;">r</span>
    <span class="char" style="--index-char: 3; display: inline-block;">d</span>
</span>

<!-- for words -->
<span class="word" style="--index-word: 0; display: inline-block;">Word1</span>
<span class="word" style="--index-word: 1; display: inline-block;">Word2</span>

<!-- for lines: "--index-line: x;" -->
…

That way, it would really help animate text using pure CSS transitions and add a stagger effect with a simple transition-delay: calc(50ms * var(--index-word)), then trigger visibility classes with an IntersectionObserver for instance.

I've implemented it in a similar way with a rusty function that only splits words and chars independently: (using Svelte each loop, adding the index to it)

<span class="word">
    {#each split as char, i}
        <span class="char" style:--i-c={i}>{char}</span>
    {/each}
</span>

[lukePeavey]

Yes, we could probably add this feature.

Would nth child selectors not work?

[flayks]

They would definitely work but depending on each text, that would need a lot of CSS code for either 4 or 17 characters for instance. That's why a CSS variable is probably the best way imo as it will not impact the CSS selectors and allow quick calcs.

[lukePeavey]

Sorry, I didn't read this carefully... I thought you were talking about incremented classnames.

Indexed css variables is an interesting idea. This would make it possible to calculate duration, delay, etc for each element based on its index, with pure css. Is that correct?

I'm on board for adding this feature

[flayks]

That's it! It would be very versatile and lightweight for people wanting to avoid js libraries to animate everything 😁