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

InventingWithMonster has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations] Support series of scroll offsets ==
Inspired by [the proposal](https://github.com/w3c/csswg-drafts/issues/4337) to allow Element-based offsets, I propose we can simplify the `startScrollOffset` and `endScrollOffset` props into a single `scrollOffsets` array.

This would allow us to leverage `KeyframeEffect`'s ability to accept more than two keyframes in an animation.

# Example

The "Example 1. Reveal / Unreveal" example in the above ticket shows the definition of two `ScrollTimeline`s, like this:

```javascript
const revealTimeline = new ScrollTimeline({
  startScrollOffset: { target: image, edge: 'start', threshold: 0 },
  endScrollOffset: { target: image, edge: 'start', threshold: 100 },
});

const unrevealTimeline = new ScrollTimeline({
  startScrollOffset:{ target: image, edge: 'end', threshold: 100}
  endScrollOffset:{ target: image, edge: 'end', threshold:0}
});
```

To create one conceptually unique effect (fade in while on screen), we create two timelines, two effects, and two animations.

Instead, we can half this to just one, with a single `scrollOffset` array:

```javascript
const timeline = new ScrollTimeline({
  source: scroller,
  scrollOffsets: [100, 200, 800, 900]
});
```

Taken from @majido's [example](https://gist.github.com/majido/45af2f8466f906722d58b29945a80ad3#file-scroll-offset-array-reaveal_unreveal-js), this would change the above to:

```javascript
const timeline = new ScrollTimeline({
  scrollOffsets: [
     { target: image, edge: 'start', threshold: 0 },
     { target: image, edge: 'start', threshold: 100 },
     { target: image, edge: 'end', threshold: 100 }, 
     { target: image, edge: 'end', threshold: 0 }
  ]
});

const effect = new KeyframeEffect(
  image,
  { opacity: [0, 1, 1, 0]},
  { duration: 1000, fill: both }
);

const revealUnrevleaAnimation = new Animation(effect, timeline);
revealUnrevleaAnimation.play();
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4912 using your GitHub account

Received on Tuesday, 31 March 2020 08:37:41 UTC