[csswg-drafts] Split CSS event bindings from application (#4343)

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

== Split CSS event bindings from application ==
My ideal scenario would be to have animations handle more arbitrary input other than time. This can already be achieved with some of the code below, but there are ways to make things more elegant that would make life easier both in animations and outside of animations.

1. Similar to gradient stops, keyframes that take arbitrary units not just %. So if you want to trigger something 300px down the page, you set the keyframe at 300px.
2. Expose scroll position as a CSS unit or function. This would be handy for numerous things people add event listeners in JS to, not just scroll.
3. Allow binding to increments other than time. Having an animation duration in a length value would have the animation run across length, not time.

What this might look like for scroll:

```css
.newspaper {
  animation: progress 100px linear;
  animation-timeline: scroll(element(#body), vertical, "0px", "100px");
}
@keyframes {
  0px {
    opacity: 0;
    transform: rotate(-720deg);
  }
  100px {
    opacity: 1;
  }
}
```

This also frees you up to bind to other things, like viewport width, element width, device orientation, ambient light, video progress, range sliders, etc…

### What is the output of scroll functions and how can they be isolated from animations?

with something like this: `scroll(element(#container), vertical, "300px", "500px")`

Can this be used outside of a timeline? For example, could I attach this to a property inside of `calc()` and at `400px` have it return `.5`? What are the advantages of making this a new thing vs attaching these bindings to animation delay? I see a lot of value here for things beyond animations and animations themselves can already handle rebinding of timeline. The timeline syntax is much nicer but I’m curious if there are going to be conflicts within the animation value. 

### Binding keyframes to scroll in today’s CSS:

It’s exciting to see this spec as I have prototyped a lot of this functionality in today’s CSS. Here is what scroll depth would look like with 
`animation: keyframes 1s linear 1 calc(-1s*var(--depth)/var(--max-depth)) paused;`

And this library surfaces JS events to CSS so you can feed them into things like the animation above: https://github.com/scottkellum/momentum

typetura.js binds to the viewport, and with a slight modification it can bind to scroll depth: https://github.com/typetura/typetura.js#starting-with-the-basics

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

Received on Thursday, 19 September 2019 05:41:57 UTC