How To: Use CSS Variables

Problem

Create animations that work regardless of timegroup duration. Hard-coding animation delays breaks when durations change.

Solution

Use the CSS variables ef-timegroup sets on itself and its children:

Variable	Description
--ef-duration	This element's duration in seconds (e.g. 5s)
--ef-progress	Playback progress as a number 0–1
--ef-transition-duration	Duration of the configured transition
--ef-transition-out-start	Time offset when the out-transition begins
--ef-index	Zero-based index of this element among its siblings
--ef-stagger-offset	Stagger delay for cascading animations

/* Fade-out that always starts 2s before the end */
.my-text {
  animation-delay: calc(var(--ef-duration) - 2s);
}

/* Progress bar that grows with playback */
.progress-bar {
  width: calc(var(--ef-progress) * 100%);
}

/* Out-transition driven entirely by composition timing */
.scene {
  animation: fade-out var(--ef-transition-duration) ease-in-out
    var(--ef-transition-out-start) paused;
}

---