Scroll Timeline offset examples

scroll-offset-array-reaveal_unreveal.js

// Original example is from https://github.com/w3c/csswg-drafts/issues/4337

const scroller = document.getElementById("scroller");
const image = document.getElementById("image");

const timeline = new ScrollTimeline({
  source: scroller,
  scrollOffsets: [100, 200, 800, 900]
});
// timeline progress is devided into 4 steps  [0%, 33%, 66%, 100%) which are mapped from [100, 200, 900, 1000]
// < 100     -> before
// 100 - 200 -> 0% - 33%
// 200 - 800 -> 33% - 66%
// 800 - 900 -> 66% - 100%
// >= 900    -> after
    
const effect = new KeyframeEffect(
  image,
  { opacity: [0, 1, 1, 0]},
  { duration: 1000, fill: both }
);

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


// Here is the same timeline with element-based offsets instead of static scroll offsets.
// Static and element based offset could be  mixed at will. Timeline will sort the offsets before using them.
const timeline = new ScrollTimeline({
  scrollOffsets: [
     { target: image, edge: 'start', threshold: 0 },   // image starts to enter viewport
     { target: image, edge: 'start', threshold: 100 }, // image enters completely
     { target: image, edge: 'end', threshold: 100 },   // image starts to leave viewport
     { target: image, edge: 'end', threshold: 0 },     // image exits completely 
  ]
});