Range with --index

Using --index (child number) in range calculations allows you to stagger animation start times.
For example:
rangeStart: contain calc(20% + var(--index) * 10%);
rangeEnd: contain calc(40% + var(--index) * 10%);
• The first child (--index = 0) starts at contain calc(20%) and ends at contain calc(40%).
• The second child (--index = 1) starts at contain calc(30%) and ends at contain calc(50%).

Each subsequent child follows this pattern, with the start and end points shifting accordingly.