- From: Olga Gerchikov via GitHub <sysbot+gh@w3.org>
- Date: Thu, 30 Jan 2020 18:14:44 +0000
- To: public-css-archive@w3.org
This post addresses scroll timeline current time in BeforeStart and AfterEnd states with examples. The examples are provided for both proposals - infinity and (0, time range) values. Based on @birtles comments the latter is preferable. Please review the code snippets to make sure we are on the same page.
```
scroll_timeline = new ScrollTimeline({
scrollSource: scroller,
orientation: "vertical",
startScrollOffset: "20%",
endScrollOffset: "80%",
timeRange: 2000
});
anim_fill_none = new Animation(new KeyframeEffect(
target_fill_none,
[ {opacity: '0.2'}, {opacity: '0.7'} ],
{ duration: 2000, fill: none}),
scroll_timeline);
anim_fill_both = new Animation(new KeyframeEffect(
target_fill_both,
[ {opacity: '0.2'}, {opacity: '0.7'} ],
{ duration: 2000, fill: 'both'}),
scroll_timeline);
anim_fill_none.play();
anim_fill_both.play();
await anim_fill_none.ready;
await anim_fill_both.ready;
```
1. ScrollTimeline.currentTime returns Infinity values for BeforeStart and AfterEnd states.
1. BeforeStart
```
scroller.scrollTop = “1px”; // corresponds to 1%
console.log(scroll_timeline.currentTime); // -Infinity
console.log(scroll_timeline.state); // BeforeStart
console.log(anim_fill_none.currentTime); // -Infinity
console.log(anim_fill_none.effect.getComputedTiming().localTime); // -Infinity
console.log(
window.getComputedStyle(target_fill_none, null).getPropertyValue("opacity")); // 0
console.log(anim_fill_both.currentTime); // -Infinity
console.log(anim_fill_both.effect.getComputedTiming().localTime); // -Infinity
console.log(
window.getComputedStyle(target_fill_both, null).getPropertyValue("opacity")); // 0.2
```
1. InRange, zero current time
```
scroller.scrollTop = “200px”; // corresponds to 20%
console.log(scroll_timeline.currentTime); // 0
console.log(scroll_timeline.state); // InRange
console.log(anim_fill_none.currentTime); // 0
console.log(anim_fill_none.effect.getComputedTiming().localTime); // 0
console.log(
window.getComputedStyle(target_fill_none, null).getPropertyValue("opacity")); // 0.2
console.log(anim_fill_both.currentTime); // 0
console.log(anim_fill_both.effect.getComputedTiming().localTime); // 0
console.log(
window.getComputedStyle(target_fill_both, null).getPropertyValue("opacity")); // 0.2
```
1. AfterEnd
```
scroller.scrollTop = “999px”; // corresponds to 99%
console.log(scroll_timeline.currentTime); // Infinity
console.log(scroll_timeline.state); // AfterStart
console.log(anim_fill_none.currentTime); // Infinity
console.log(anim_fill_none.effect.getComputedTiming().localTime); // Infinity
console.log(
window.getComputedStyle(target_fill_none, null).getPropertyValue("opacity")); // 0
console.log(anim_fill_both.currentTime); // Infinity
console.log(anim_fill_both.effect.getComputedTiming().localTime); // Infinity
console.log(
window.getComputedStyle(target_fill_both, null).getPropertyValue("opacity")); // 0.7
```
**_Cons: Infinity values complicate calculations of start time and might complicate script calculations._**
1. ScrollTimeline.currentTime returns zero afor BeforeStart and time range for AfterEnd states.
1. BeforeStart
```
scroller.scrollTop = “1px”; // corresponds to 1%
console.log(scroll_timeline.currentTime); // 0
console.log(scroll_timeline.state); // BeforeStart
console.log(anim_fill_none.currentTime); // 0
console.log(anim_fill_none.effect.getComputedTiming().localTime); // 0
console.log(
window.getComputedStyle(target_fill_none, null).getPropertyValue("opacity")); // 0
console.log(anim_fill_both.currentTime); // 0
console.log(anim_fill_both.effect.getComputedTiming().localTime); // 0
console.log(
window.getComputedStyle(target_fill_both, null).getPropertyValue("opacity")); // 0.2
```
1. InRange, zero current time
```
scroller.scrollTop = “200px”; // corresponds to 20%
console.log(scroll_timeline.currentTime); // 0
console.log(scroll_timeline.state); // InRange
console.log(anim_fill_none.currentTime); // 0
console.log(anim_fill_none.effect.getComputedTiming().localTime); // 0
console.log(
window.getComputedStyle(target_fill_none, null).getPropertyValue("opacity")); // 0.2
console.log(anim_fill_both.currentTime); // 0
console.log(anim_fill_both.effect.getComputedTiming().localTime); // 0
console.log(
window.getComputedStyle(target_fill_both, null).getPropertyValue("opacity")); // 0.2
```
1. AfterEnd
```
scroller.scrollTop = “999px”; // corresponds to 99%
console.log(scroll_timeline.currentTime); // 2000
console.log(scroll_timeline.state); // AfterStart
console.log(anim_fill_none.currentTime); // 2000
console.log(anim_fill_none.effect.getComputedTiming().localTime); // 2000
console.log(
window.getComputedStyle(target_fill_none, null).getPropertyValue("opacity")); // 0
console.log(anim_fill_both.currentTime); // 2000
console.log(anim_fill_both.effect.getComputedTiming().localTime); // 2000
console.log(
window.getComputedStyle(target_fill_both, null).getPropertyValue("opacity")); // 0.7
```
**_Cons: It’s confusing that at animation current time of 0 effect value is different (see cases i and ii, fill mode none)._**
--
GitHub Notification of comment by ogerchikov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2066#issuecomment-580384210 using your GitHub account
Received on Thursday, 30 January 2020 18:14:45 UTC