Open flayks opened 1 year ago
Yes, we could probably add this feature.
Would nth child selectors not work?
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.
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
That's it! It would be very versatile and lightweight for people wanting to avoid js libraries to animate everything 😁
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:
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 anIntersectionObserver
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)