Re: [csswg-drafts] [scroll-animations-1] CSS @scroll-timeline: Allow `<element-offset>` selector() to point to self (#5884)

This is crucial for the proposal to succeed. Building one `@scroll-timeline` per animated element is not feasible. 
But it is not enough to only reference the animated element (self).

**Problem: Multiple choreographed animations**
The "Scrollable picture-story" use case in the draft showcases the need for choreographing multiple elements together sharing one timeline: https://drafts.csswg.org/scroll-animations-1/#scrollable-animation-usecase

In the example this is solved by having a `@scroll-timeline` with a container based offset. This only works if there is no more than one "scrollable picture-story", or if it is possible to build a timeline for each story individually. 

In the real world one page would contain many similar "scrollable picture stories", often user/author generated. We don't build unique selectors for component instances, and we should not have to build unique timelines for component instances.

(For an example of a page with multiple animated picture-stories check the yellow dotted lines here: https://www.nrk.no/norge/xl/pa-innsiden-av-hagens-hus-1.15206175) 

**Referencing the animated element (self)**
The timeline must be able to reference the animated element. 

This solves part of the problem. But for multiple element animations to be coordinated, it is necessary to reference a common parent of the animated elements.

In the "scrollable picture story" the circles might not be placed in the same location, and if the timeline reference each individual animated element, they will end up with different timelines. The choreography will break. 

**Referencing a common parent**
We need to reference a common parent of the animated elements. Let's say both the circles are children of a `figure`, as illustrated by the black outline in the example, then we will reference the figure in the common timeline.

We could do this using the relational pseudo-class:

`figure:has(> self)`

A simplified version of the extended use case could then be solved as follows:
```
@media (prefers-reduced-motion: no-preference) {
  .circle {
    animation-timeline: collision-timeline;
  }
  
  .left-circle {
    animation-name: left-circle;
  }

  .right-circle {
    animation-name: right-circle;
  }

   /* Timeline must be able to reference a common parent of the animated elements to choreograph multiple elements */
  @scroll-timeline collision-timeline {
    source: selector(#container);
    scroll-offsets: selector(figure:has(> self)) end, selector(figure:has(> self)) start;
  }

  @keyframes left-circle {
    to { transform: translateX(300px); }
  }

  @keyframes right-circle {
    to { transform: translateX(-300px); }
  }
}
```



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


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

Received on Monday, 15 February 2021 19:38:41 UTC