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

> There's been a lot of discussion on this issue, can someone summarize where it's at?

What @flackr suggested [here](https://github.com/w3c/csswg-drafts/issues/8942#issuecomment-1723794817) is what’s currently suggested. The values `once`, `repeat`, `alternate` are explained [in this comment](https://github.com/w3c/csswg-drafts/issues/8942#issuecomment-1719800170).

---

Here’s a few tests I created using Rob’s polyfill. These should help you better understand what these values do:

- Test with `once`: [CodePen](https://cdpn.io/pen/debug/KKJxVKM?css=dmlldygpCiAgICBvbmNlCiAgICBlbnRyeSAxMDAl)
- Test with `alternate`: [CodePen](https://cdpn.io/pen/debug/KKJxVKM?css=dmlldygpCiAgICBhbHRlcm5hdGUKICAgIGVudHJ5IDEwMCUgZXhpdCAwJQ==)
- Test with `alternate` with exit-range: [CodePen](https://cdpn.io/pen/debug/KKJxVKM?css=dmlldygpCiAgICBhbHRlcm5hdGUKICAgIGVudHJ5IDEwMCUgZXhpdCAwJQogICAgZW50cnkgNTAlIGV4aXQgNTAl)
- Test with `repeat`: [CodePen](https://cdpn.io/pen/debug/KKJxVKM?css=dmlldygpCiAgICByZXBlYXQKICAgIGVudHJ5IDEwMCUgZXhpdCAwJQ==)
- Test with `repeat` with exit-range: [CodePen](https://cdpn.io/pen/debug/KKJxVKM?css=dmlldygpCiAgICByZXBlYXQKICAgIGVudHJ5IDEwMCUgZXhpdCAwJQogICAgZW50cnkgNTAlIGV4aXQgNTAl)

_(Note the page sometimes needs a refresh to work correctly. Also requires a browser that does scroll-driven animations)_:

And here’s some practical demos:

1. Fly-in text: [CodePen](https://codepen.io/bramus/pen/xxMyKqN/caf0db0208f5fc3eec6b13af754949da)
    - This is a typical use-case for scroll-triggered animations: the paragraphs animate in. Each paragraph has its own view-timeline.
    - Ideally I would want all elements to trigger at the very same line, e.g. a fixed line at `75vh` measured from the top of the viewport. I thought this would be possible by setting the range to `entry calc(0% + 25vh)` but I couldn’t get this to work. The trigger point is wrong. Maybe this is simply a limitation of the polyfill.
2. Animated Sticky Element: [CodePen](https://codepen.io/bramus/pen/yLZxQVm/7eea0e149606cc511e0108bc7158113e)
    - The item on the left gets animated as items on the right slide across the viewport. When element `#p1` is at `cover 50%`, the red ball changes color.
    - Can be reused for a carousel navigation indicator.
    - Multiple animations on the ball triggered by different elements also possible (e.g. change color when `#p1` is in view, grow with `#p2`, shrink with `#p3`, …), but currently not supported by the polyfill.
3. Gallery: [CodePen](https://codepen.io/bramus/pen/GRzXVXR/c267245bb912b9e2165256177277a98f)
    - This demo animates the images on the left, tracking the `view-timeline` of the relevant paragraphs.

---

My findings with doing these tests and building these demos are that:

- `once` and `alternate` work as expected and the ranges allow me to finely control what should happen when.
- `repeat` is a bit weird as it doesn’t animate but jumps when not defining a `animation-exit-range` (or when that value is not `cover`). I think it’s better to use `alternate` here.
- While the order of `<animation-trigger-range-start>` to `<animation-trigger-range-end>` and `<animation-exit-range-start>` to `<animation-exit-range-end>` makes sense on paper, it’s a bit hard to mentally wrap yourself around this as the values are crossed when looking at it in terms of scroll direction.
    - Yes, you are defining two ranges: the trigger range pair _(values 1 and 2)_ and the exit range pair _(values 3 and 4)_, but:
      - When scrolling to the bottom, the lines at `<animation-trigger-range-start>` and `<animation-exit-range-end>` _(values 1 and 4)_ are used.
      - When scrolling to the top, the lines at `<animation-exit-range-start>` and `<animation-trigger-range-end>` _(values 2 and 3)_ are used.
- This property can take a bunch of arguments, but how many you actually need depends on whether you are using `once`, `repeat`, or `alternate`. 
    - This feels weird, as if the property is overloaded.


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


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

Received on Tuesday, 12 December 2023 23:53:38 UTC