[css-animations-2][scroll-animations-1] should we be able to tell the scroll direction?

[brechtDR]

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 animation-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

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.

[argyleink]

direction is 1 or -1 in greensock

[bramus]

Closing this one in favor of #6400, which als requests exposing the scroll direction. Using that possibility, you could add an extra scaleX(-1) to get the wanted result.