Counter Attribute for Query Loops

How To
1

What’s up?

I’m trying to create a staggered animation sequence for items in a loop created by the query.
First off, if anyone’s got a solution for that without javascript, that’d be great. I’m trying to use in-built features as much as possible.
Secondly, this got me wondering if there was a way to assign sequential information to items in a loop created by the query builder.
For instance, if I have the query creating 4 cards, maybe a way to have the cards be labeled order=“” and the value be their order in the query. Again, trying to do this without js and just using in-built features.

2

I think I found a workaround that could work here: A nth-child CSS trick • Crinkles

Essentially, you set root CSS to assign nth-child numbers to have a custom variable which you can then use in a css calc() function.

Better than JS, but still not using in-built features.