W3C home > Mailing lists > Public > public-css-archive@w3.org > January 2021

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

From: Bramus! via GitHub <sysbot+gh@w3.org>
Date: Tue, 26 Jan 2021 22:03:57 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-767857263-1611698636-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:25 UTC