How to repeat a timeline scope with CSS Scroll-driven animations

Question

I've been playing with CSS scroll-driven animations (currently only in Chromium browsers) but one thing I'm really struggling to wrap my head around is how to use timeline-scope to crawl up the DOM and repeatedly apply an effect.

With the below snippet for example… let's say I want to change the colour of the header when a slide is in view. I can get this to work with the first slide, but not on subsequent slides.

I'd be very grateful if someone could point out how I can achieve this. Many thanks in advance.

body {
  timeline-scope: --myScroller;
}

main {
  border: 3px solid blue;
  display: grid;
  place-items: center;
  height: 500vh;
}

.site-header {
  width: 100%;
  position: fixed;
  background: blue;
  top: 0;
  animation-name: change-colour;
  animation-timeline: --myScroller;
  animation-range: exit 0% exit 100%;
}

@keyframes change-colour {
  to {
    background: red;
  }
}

.slide {
  border: 3px solid green;
  height: 50vh;
  display: grid;
  place-items: center;
  &:nth-child(1) {
    view-timeline-name: --myScroller;
  }
}

<div class="site-header">Header</div>

<main tabindex="-1" id="main">
  <div class="slide">
    Lorem ipsum ius kasd cibo utroque an, eum eu populo percipitur, his in equidem posidonium concludaturque. No eam deserunt salutatus, fastidii conceptam consectetuer no vim, sea paulo takimata ei. Tation sadipscing nec ei, cum graeci ancillae et. Modus
    dicit altera nec ad, nostro civibus epicurei et pro. Errem numquam interesset mel at, cu unum illum vim, ius quot splendide disputando in.
  </div>
  <div class="slide">
    Lorem ipsum ius kasd cibo utroque an, eum eu populo percipitur, his in equidem posidonium concludaturque. No eam deserunt salutatus, fastidii conceptam consectetuer no vim, sea paulo takimata ei. Tation sadipscing nec ei, cum graeci ancillae et. Modus
    dicit altera nec ad, nostro civibus epicurei et pro. Errem numquam interesset mel at, cu unum illum vim, ius quot splendide disputando in.
  </div>
</main>

Answer 1

You can keep one animation but I think you are obliged to define two timineline-scope. One for each slide

body {
  timeline-scope: --myScroller1,--myScroller2;
}

main {
  border: 3px solid blue;
  display: grid;
  place-items: center;
  height: 500vh;
}

.site-header {
  width: 100%;
  position: fixed;
  background: blue;
  top: 0;
  animation-name: change-colour,change-colour;
  animation-timeline: --myScroller1,--myScroller2;
  animation-range: exit 0% exit 100%;
}

@keyframes change-colour {
  to {
    background: red;
  }
}

.slide {
  border: 3px solid green;
  height: 50vh;
  display: grid;
  place-items: center;   
  &:nth-child(1) {
    view-timeline-name: --myScroller1;
  }
  &:nth-child(2) {
    view-timeline-name: --myScroller2;
  }
}

<div class="site-header">Header</div>

<main tabindex="-1" id="main">
  <div class="slide">
    Lorem ipsum ius kasd cibo utroque an, eum eu populo percipitur, his in equidem posidonium concludaturque. No eam deserunt salutatus, fastidii conceptam consectetuer no vim, sea paulo takimata ei. Tation sadipscing nec ei, cum graeci ancillae et. Modus
    dicit altera nec ad, nostro civibus epicurei et pro. Errem numquam interesset mel at, cu unum illum vim, ius quot splendide disputando in.
  </div>
  <div class="slide">
    Lorem ipsum ius kasd cibo utroque an, eum eu populo percipitur, his in equidem posidonium concludaturque. No eam deserunt salutatus, fastidii conceptam consectetuer no vim, sea paulo takimata ei. Tation sadipscing nec ei, cum graeci ancillae et. Modus
    dicit altera nec ad, nostro civibus epicurei et pro. Errem numquam interesset mel at, cu unum illum vim, ius quot splendide disputando in.
  </div>
</main>