Index

The CSS variable --index is automatically made available and represents the current child of the Animation Group. It can be used in calculations to perform complex animations.

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.

The End