Convert CSS animation-timeline to JavaScript cross-browser

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?