- From: Bramus via GitHub <sysbot+gh@w3.org>
- Date: Tue, 12 Dec 2023 23:53:36 +0000
- To: public-css-archive@w3.org
> 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