[csswg-drafts] [css-animations-2][scroll-animations-1] should we be able to tell the scroll direction? (#8401)

brechtDR has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animations-2][scroll-animations-1] should we be able to tell the scroll direction? ==
It's a small suggestion with a big impact, but I was wondering if there will be a way to target the scroll direction of a `scroll-timeline` by using CSS.

I know this is still in early stages, but playing around with this I created a little chicken running across the screen while scrolling and was wondering what could be the best way to prevent it from "moonwalking" when scrolling back up and instead use a different animation.

[demo can be found on codepen using Chrome Canary](https://codepen.io/utilitybend/pen/bGjQqXg)

An idea for this is to anchor the animation to the `animation-timeline` direction.

```
.chicky {
  animation-timeline: chicken;
  animation-timeline-direction: AnimationNameOfForward forwards; /* animation name + direction */
}

.chicky {
  animation-timeline: chicken;
  animation-timeline-direction: AnimationNameOfBackwards backwards;
}
```

I am aware that this current idea needs multiple animation names on one element, which might be problematic. I've searched the issues, but maybe there is something I missed that could potentially be used for this.

So yes, a small idea with probably a big impact. I'm curious to hear possible solutions and other ideas, or things I missed. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8401 using your GitHub account


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

Received on Monday, 6 February 2023 08:17:12 UTC