Re: [csswg-drafts] [scroll-animations] Support series of scroll offsets (#4912)

Thanks @ogerchikov for making me realize that the thresholds also has a conflict! On naming decision, I tried to summarized my thoughts based on latest suggestion.

My perspective is the the CSS syntax of scroll-timeline is the one that will be used more often so we should optimize for that if there is no good option for both. And so far *nothing proposed is great in both JS and CSS*.

With this premise, my initial concern about the property name conflicting with others is not as important since we don't spell out either `offset` or `threshold` in the CSS syntax. Instead the double "scroll" issues is more jarring in CSS syntax.

```css
@scroll-timeline {
    scroll-offsets: 10% 90%;
}
```

Based on above my preference would be:
 1. offsets
 1. thresholds
 1. scrollOffsets
 1. ranges

Another alternative is to have different names in css and js but I like to avoid that.

Here are all the suggested options in multiple real examples in JS and CSS with my opinion on pros and cons.

## offsets

Pros:
 - Avoids double "scroll" in the name issue. (Mainly an issue CSS syntax)

Cons:
 - Possibly confusing if element-based scroll offsets have threshold of their own. (Only an issue in JS syntax)
 - Not immediately obvious what is the value unit i.e., scroll dimensions.


```js
  const scrollTimeline = new ScrollTimeline({
      source: scroller,
      offsets: [CSS.percent(20), CSS.percent(50), CSS.percent(80)]
  });

  const scrollTimelineWithOffset = new ScrollTimeline({
      source: scroller,
      offsets: [{value: CSS.percent(20), offset: 0} , {value: CSS.percent(50), offset: 0.5}, {value: CSS.percent(80), offset:1}]
  });

  const scrollTimelineWithElements = new ScrollTimeline({
      source: scroller,
      offsets: [{target: image, threshold: 0}, {target: image, threshold: 0.8}, {target: image, threshold: 1}]
  });

  console.log(scrollTimeline.offsets);
```

```css

@scroll-timeline basic {
  source: selector(#scroller);
  offsets: 20, 50, 80; 
}


@scroll-timeline with-offsets {
  source: selector(#scroller);
  offsets: 20 0%, 50 50%, 80 100%; 
}

@scroll-timeline with-elements {
  source: selector(#scroller);
  offsets: selector(#image) 0, selector(#image) 0.8, selector(#image) 1; 
}
```

## scrollOffsets

Pros:
 - Immediately obvious what is the value unit i.e., scroll dimensions.

Cons:
 - Double "scroll" which is more jarring in css syntax. (Mainly an issue in CSS syntax)
 - Possibly confusing if scroll offsets have offsets of their own.  (Only an issue in JS syntax)  


```js
  const scrollTimeline = new ScrollTimeline({
      source: scroller,
      scrollOffsets: [CSS.percent(20), CSS.percent(50), CSS.percent(80)]
  });

  const scrollTimelineWithOffset = new ScrollTimeline({
      source: scroller,
      scrollOffsets: [{value: CSS.percent(20), offset: 0} , {value: CSS.percent(50), offset: 0.5}, {value: CSS.percent(80), offset:1}]
  });

  const scrollTimelineWithElements = new ScrollTimeline({
      source: scroller,
      scrollOffsets: [{target: image, threshold: 0}, {target: image, threshold: 0.8}, {target: image, threshold: 1}]
  });

  console.log(scrollTimeline.scrollOffsets);
```

```css

@scroll-timeline basic {
  source: selector(#scroller);
  scroll-offsets: 20, 50, 80; 
}


@scroll-timeline with-offsets {
  source: selector(#scroller);
  scroll-offsets: 20 0%, 50 50%, 80 100%; 
}

@scroll-timeline with-elements {
  source: selector(#scroller);
  scroll-offsets: selector(#image) 0, selector(#image) 0.8, selector(#image) 1; 
}
```


## thresholds

Pros:
 - Avoids double "scroll" in the name issue. (Mainly an issue in CSS syntax)

Cons:
 - Possibly confusing if element-based scroll offsets have threshold of their own.  (Only an issue in JS syntax)
 - Not immediately obvious what is the value unit (i.e., scroll dimensions).



```js
  const scrollTimeline = new ScrollTimeline({
      source: scroller,
      thresholds: [CSS.percent(20), CSS.percent(50), CSS.percent(80)]
  });

  const scrollTimelineWithOffset = new ScrollTimeline({
      source: scroller,
      thresholds: [{value: CSS.percent(20), offset: 0} , {value: CSS.percent(50), offset: 0.5}, {value: CSS.percent(80), offset:1}]
  });

  const scrollTimelineWithElements = new ScrollTimeline({
      source: scroller,
      thresholds: [{target: image, threshold: 0}, {target: image, threshold: 0.8}, {target: image, threshold: 1}]
  });

  console.log(scrollTimeline.thresholds);
```

```css

@scroll-timeline basic {
  source: selector(#scroller);
  thresholds: 20, 50, 80; 
}


@scroll-timeline with-offsets {
  source: selector(#scroller);
  thresholds: 20 0%, 50 50%, 80 100%; 
}

@scroll-timeline with-elements {
  source: selector(#scroller);
  thresholds: selector(#image) 0, selector(#image) 0.8, selector(#image) 1; 
}
```


## ranges

Pros:
 - No conflict with threshold or offset. (Only an issue in JS syntax)
 - Avoids double scroll in the name issue. (Mainly an issue in CSS syntax)

Cons:
 - IMHO not semantically correct as we are not specifying ranges.
 - Not immediately obvious what is the value unit i.e., scroll dimensions.


```js
  const scrollTimeline = new ScrollTimeline({
      source: scroller,
      ranges: [CSS.percent(20), CSS.percent(50), CSS.percent(80)]
  });

  const scrollTimelineWithOffset = new ScrollTimeline({
      source: scroller,
      ranges: [{value: CSS.percent(20), offset: 0} , {value: CSS.percent(50), offset: 0.5}, {value: CSS.percent(80), offset:1}]
  });

  const scrollTimelineWithElements = new ScrollTimeline({
      source: scroller,
      ranges: [{target: image, threshold: 0}, {target: image, threshold: 0.8}, {target: image, threshold: 1}]
  });

  console.log(scrollTimeline.thresholds);
```

```css

@scroll-timeline basic {
  source: selector(#scroller);
  ranges: 20, 50, 80; 
}


@scroll-timeline with-offsets {
  source: selector(#scroller);
  ranges: 20 0%, 50 50%, 80 100%; 
}

@scroll-timeline with-elements {
  source: selector(#scroller);
  ranges: selector(#image) 0, selector(#image) 0.8, selector(#image) 1; 
}
```





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

Received on Monday, 27 July 2020 16:22:31 UTC