Re: [csswg-drafts] [css-animations-2] Add animation-trigger for triggering animations when an element is in a timeline's range (#8942)

@ydaniv I addressed the exit case https://github.com/w3c/csswg-drafts/issues/8942#issuecomment-1720905866 by parsing up to 4 range triggers. The syntax in the polyfill is currently:

```css
animation-trigger:
    <single-animation-timeline>
    <once | repeat | alternate>
    <animation-trigger-range-start>
    <animation-trigger-range-end>?
    <animation-exit-range-start>?
    <animation-exit-range-end>?
```

If exit range is unspecified it uses the same as the trigger range. The exit range provides a different range outside of which will cancel / restart `repeat` animations or reverse `alternate` animations.

The repeat example in the [demo](https://flackr.github.io/web-demos/scroll-triggered/) makes use of this to avoid seeing the flash away:
```css
.repeat {
  animation-trigger:
      view() /* A view timeline on the element itself. */
      repeat /* Triggers the animation every time the trigger range is entered */
      contain 0% contain 100% /* Triggers the animation on entering the contain range. */
      cover; /* Cancels and prepares to trigger again on leaving the cover range. */
}
```


-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8942#issuecomment-1723794817 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 18 September 2023 15:56:16 UTC