Polyfill skipped because browser supports Scroll Timeline - Safari

[sorcamarian]

Safari Version 18.0 (20619.1.26.11.3)

I have a simple CSS animation placed as inline CSS

[data-section-id="66d153c7fa59f85ae17bdd36"] video {
    position : absolute;
    top : 0;
    height: 66vh!important;
    translate: 0 0vh;
    animation: parallax 1s linear both;
    animation-timeline: scroll(root);
    animation-range: cover 30% cover 66%;
}

@keyframes parallax {
    from {
        translate : 0 0vh;
    }
    to {
        translate: 0 -33vh;
    }
}

I inject

I get this console message from the polyfill "Polyfill skipped because browser supports Scroll Timeline - Safari"

I tried to modify the source code where the support is checked to allow the code execution but the CSS parallax animation that I created does not work in Safari.

The site https://flackr.github.io/scroll-timeline/demo/parallax/ works in Safari but is written with JavaScript

[bramus]

Do you happen to have any feature flags enabled? There is one for Scroll-Driven Animations in Safari Technology Preview but AFAIK it doesn’t actually do anything other than claiming “yes, we do support these CSS properties and what not”

(I don’t have access to Safari 18 yet, as it’s a pre-release)

[sorcamarian]

Thank you for your quick response.

I downloaded Firefox for Mac and I get this error: Uncaught TypeError: Invalid time range or unsupported time range format.

I am working on this page https://lipkind.squarespace.com/new-landing-page and the CSS for the animation is inline

[sorcamarian]

Now it works in firefox. The error was from my configuration for the animation.

I came to this stage

     var videoElement = document.querySelector('[data-section-id="66d339fcaa91932c1202ad7e"] video');

      var scrollTimeline2 = new ScrollTimeline({
  			source: document.documentElement,
         	axis: "block",
        	orientation: 'block'
	});

    videoElement.animate(
        { transform: ["translateY(0)", "translateY(-33vh)"]},
        {
            duration: 1000, 
            fill: 'both',
            timeline: scrollTimeline2

        }
    );

But I try to use rangeStart and rangeEnd on the .animate but I get an error

    rangeStart: "cover 30%",
    rangeEnd: "cover 66%",

Uncaught DOMException: An invalid or illegal string was specified Se numeric-values.js:827 parse proxy-cssom.js:53 yt proxy-animation.js:1075 bt proxy-animation.js:1943 debugger eval code:9 numeric-values.js:827:26

[sorcamarian]

This works in Chrome but not on Firefox when the polyfill is used

var videoElement = document.querySelector('[data-section-id="66d339fcaa91932c1202ad7e"] video');

    var scrollTimeline2 = new ScrollTimeline({
  			source: document.documentElement,
         	axis: "block",
        	orientation: 'block'
	});

    videoElement.animate(
        { transform: ["translateY(0)", "translateY(-33vh)"]},
        {
            duration: 1000, 
            fill: 'both',
            timeline: scrollTimeline2,
            rangeStart: {
              rangeName: 'cover',
              offset: CSS.percent('70')
            },
		    rangeEnd: {
              rangeName: 'cover',
              offset: CSS.percent('100')
            }
        }
    );

[sorcamarian]

This one did the job

    var videoElement = document.querySelector('[data-section-id="66d339fcaa91932c1202ad7e"] video');

var scrollTimeline2 = new ScrollTimeline({
          source: document.documentElement,
         axis: "block",
        orientation: 'block'
});

videoElement.animate(
    { transform: ["translateY(0)", "translateY(-33vh)"]},
    {
        duration: 1000, 
        fill: 'both',
        timeline: scrollTimeline2,
        rangeStart: new CSSUnitValue(70, 'percent'),
        rangeEnd: new CSSUnitValue(100, 'percent')
    }
);

https://stackoverflow.com/questions/78942230/convert-css-animation-timeline-to-javascript-cross-browser

[bramus]

Glad you got your Firefox problem (which could have used its own issue in this repo) sorted. The culprit is that you were using the wrong offsets: the cover, contain, entry, exit, etc. ranges can only be used with ViewTimeline, not ScrollTimeline.

There is an argument to be made that the polyfill should mimic the native API here so that it ignores the incorrect offsets instead of throwing an Error (@flackr WDYT?)

[bramus]

Closing this one as the original problem is solved.