Convert CSS animation-timeline to JavaScript cross-browser

Question

I have written a CSS animation/parallax effect that works with animation-timeline and I like the result.

This is the code

[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;
    }
}

The video element is in a container with 33vh and when you scroll from top to bottom it should animate the position with translate to reach the end of the screen.

Because it does not work at the moment in Safari and Mozilla I want to use this pollyfill https://github.com/flackr/scroll-timeline to make it cross browser.

The info of the plugin suggests that I can make the CSS animation work cross-browser but from my tests it works only with the JavaScript way. Therefore I want to convert my above CSS scroll animation in JavaScript.

This is where I am now

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
    }
);

This creates a small parallax effect but not like the CSS code does. I think that I need to specify rangeStart and rangeEnd to the second argument(object) of .animate but I can not figure the format.

I tried this but it prevents the entire parallax effect from working.

videoElement.animate(
    { transform: ["translateY(0)", "translateY(-33vh)"]},
    {
        duration: 1000, 
        fill: 'both',
        timeline: scrollTimeline2,
        rangeStart: "cover 30%",
        rangeEnd: "cover 66%",
    }
);

From the docs of animate https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#rangeend the format should be valid.

Can someone help please?

Answer 1

After many trials and errors and going through docs, I ended up with this

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: (function() {
            if( new ScrollTimeline() instanceof AnimationTimeline ) {
                return {
                    rangeName: 'cover',
                    offset: CSS.percent('70'),
                }
            } else {
                return new CSSUnitValue(70, 'percent')
            }
        })(),
        rangeEnd: (function() {
            if( new ScrollTimeline() instanceof AnimationTimeline ) {
                return {
                    rangeName: 'cover',
                    offset: CSS.percent('100'),
                }
            } else {
                return new CSSUnitValue(100, 'percent')
            }
        })()
    }
);

In browsers that support ScrollTimeline I used an Object for rangeStart and rangeEnd. These don't work with the polyfill.

For browsers that need the polyfill I used CSSUnitValue() function which is also comes from the polyfill but is present in browsers that support it.

The reason why I check if the polyfill is used with new ScrollTimeline() instanceof AnimationTimeline is because when I use CSSUnitValue for native support it behaves differently in the end result. In my case very small parallax effect