Re: [csswg-drafts] Element-based start and end offsets (#4337)

In the OP I see an example that uses two @​scroll-timeline blocks.

```css
@timeline reveal-scroll-timeline {
  timeline-type: scroll; 
  timeline-source: element(scroller) ;
  scroll-direction: block;
  /* start when target has entered scrollport */
  scroll-offset-start: intersection(element(:animation-target), start, 0);
  /* end when target is fully within scrollport */
  scroll-offset-end: intersection(element(:animation-target), start, 100); 
}

@timeline unreveal-scroll-timeline {
  timeline-type: scroll; 
  timeline-source: element(scroller) ;
  scroll-direction: block;
  scroll-offset-start: intersection(element(:animation-target), end, 100);
  scroll-offset-end: intersection(element(:animation-target), end, 0); 
}

@keyframes reveal {
 from { opacity: 0;}
 to { opacity: 1;}
}

@keyframes unreveal {
 from { opacity: 1;}
 to { opacity: 0;}
}


.image {
  animation-name: reveal, unreveal;
  animation-duration: 1000;
  animation-timeline: reveal-scroll-timeline, unreveal-scroll-timeline;
  animation-fill-mode: both;
}
```

Is that still allowed (albeit with an updated syntax)? It's that [I've been fiddling with it in this CodePen demo](https://codepen.io/bramus/pen/VwKNgmW) _(Chrome Canary with “Experimental Web Platform Features” enabled required)_, and cannot seem to get that to work.

Don't know if this is because the implementation is still in development, or if the spec disallows it. If it's the latter then a note on this in the spec would be needed _(or I overlooked it)_.

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


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

Received on Tuesday, 26 January 2021 22:04:00 UTC