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

@flackr: 

> It's probably worth putting together a slide in from left, slide out to right example to explore how easily that is supported. I'm imagining it should look something like this:
>
> ```css
> @keyframes slide-in-from-left {
>   0% { transform: translateX(-100vw); }
> }
> @keyframes slide-out-to-right {
>   100% { transform: translateX(100vw);
> }
> .target {
>   animation: 
>       /* slide-in-from-left should be active producing -100vw initially */
>       slide-in-from-left 500ms backwards,
>       /* slide-out-right is active after it triggers keeping the element at 100vw. */
>       slide-out-to-right 500ms forwards;
>   animation-trigger:
>       /* Slide in at entry 100% (note [1], overlaps when slide-out is triggered). */
>       view() alternate entry 100%,
>       /* Slide out at exit 0%. */
>       view() alternate exit 0%;
> }
> ```

In the above case I guess it would probably make more sense to use the behavior of `alternate` as is with exit.
Although this case is also valid, if I'm not mistaken, it should be done better with `repeat`.

> E.g. we've been assuming that a single named range does some internal magic to extend to the end of the scroll range, but if I want an animation that is triggered when you're scrolled less than contain 100%, I have to extend the range far enough to pass the start scroll, e.g.

You could use a named timeline, or extend the `view()` with `inset`s, or even use `scroll()`. I guess you have many options for that.

> When inspecting the animation trigger it's end value is supposed to be the end of the scroll, not `cover 100%`.

I'm not following you here, why don't we want to get back `cover 100%`? I think it's consistent to keep `normal` as is and have the default set to `cover 100%` instead of `scroll 100%`.
You think it's a problem?

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


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

Received on Thursday, 14 December 2023 12:49:03 UTC