I can't get the polyfill to work

[raphaelgoetter]

Hello,

I designed a scroll-timeline animation to create horizontal scroll indicators on a list of tabs.

Here's the result : https://codepen.io/raphaelgoetter/pen/vYvMaOZ

Code is working fine on Chrome, but I don't understand what's preventing the polyfill from working on Firefox or Safari.

@supports (animation-timeline: view()) {
  .nav-tabs {
    &::after {
      content: "";
      position: sticky;
      right: 0;
      flex-shrink: 0;
      align-self: stretch;
      animation: fade-right linear both;
      animation-timeline: scroll(nearest inline);
      animation-range: 0 50px;
      transform-origin: right;
      background-image: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.5) 50%,
        #fff 80%
      );
    }
  }
}
@keyframes fade-right {
  from {
    width: 100px;
    scale: 1 1;
  }
  to {
    scale: 0 1;
  }
}

Did I do something wrong?

[bramus]

You are using animation-range with a ScrollTimeline. Currently this is not supported.

Duplicate of https://github.com/flackr/scroll-timeline/issues/151

[raphaelgoetter]

Makes sense, thank you!

[raphaelgoetter]

Well, I tried the polyfill with View() animations on these Codepen :

• https://codepen.io/raphaelgoetter/pen/VwqjGav
• https://codepen.io/raphaelgoetter/pen/wvReGKK

I added the Polyfill this way :

But none of these showcases is working on Firefox or Safari.

[raphaelgoetter]

This Codepen is applying ScrollTimeline without animation-range and Polyfill doesn't seem to work on Firefox neither:

https://codepen.io/raphaelgoetter/pen/QWzRXgZ

Note : I love scroll-driven animations and all the great stuffs you do, @bramus and @flackr !

[bramus]

@raphaelgoetter I see a few problems with that last demo you shared:

1. You are including the polyfill twice: once via the head (Pen Settings > JS) and once in the HTML. This explains the error you’re seeing on the console.
2. You are using CSS Nesting. The polyfill’s CSS Parser can’t deal with CSS Nesting.

Fixing these two issues already gets me somewhere, as demonstrated in this fork: the top element does something driven by scroll in Safari (but not in Chrome for some reason … 🤔)

Unfortunately I don’t have time right now to investigate this further, but this should already get you on track …

[raphaelgoetter]

Thank you for these clues !

the top element does something driven by scroll in Safari (but not in Chrome for some reason … 🤔)

Actually it's weirder than ever, your fork :

• is OK on Safari
• is very strange on Firefox (background jumps at the end of the scroll)
• isn't working at all in Chrome

(testing on MacOs)

[Crispi27]

Hi!

Does someone know if the polyfill works with next js? I have tried multiple configurations but have not been able to make it.