Как использовать `.animate ()` в сочетании с `window.scrollY ||window.pageYOffset`?

Question

Как использовать .animate() в сочетании с window.scrollY || window.pageYOffset?

Я хочу использовать такие же эффекты прокрутки карт, как на веб-сайте Apple Music, но он построен на node.js исложно понять.Я предпочитаю простой ванильный javascript.

Apple Music: https://www.apple.com/apple-music/

Codepen - мой код (дрянной, но работает).

https://codepen.io/Danny1897/full/MRrLVN

Ниже приведен фрагмент кода Apple node.js.

// NOTE: they number all script blocks (405) and run it like that
405: [function(t, e, i) {
    "use strict";

    // NOTE: call function
    l = function(t) {
        function e(t) {
            r(this, e);
            var i = n(this, (e.__proto__ || Object.getPrototypeOf(e)).call(this, t));

            // NOTE: gets elements
            return i.options = t, i.headline = t.el.querySelector(".headline"), i.cards = t.el.querySelectorAll("ul li"), i.cardsWrapper = t.el.querySelector(".cards-wrapper"), i.currentBreakpoint = t.pageMetrics.breakpoint, i.cardIndex = i.cards.length - 1, i.cards[i.cardIndex].classList.add("last-card"), i.cardHeight = {

                // NOTE: sets sizes of cards depend on device
                L: 530,
                M: 420,
                S: 456
            }, i.itemHeight = {
                L: 800,
                M: 600,
                S: 620
            }, i.topOffset = {
                L: 270,
                M: 170,
                S: 170

                // NOTE: IMPORTANT : get top position of window and cards (MATH)
                // ALSO : calls to add/update/change 'keyframes'
            }, i.topPosition = window.getComputedStyle(i.cards[0], null).getPropertyValue("top"), i.focusHandler = i.focusHandler.bind(i), document.addEventListener("focus", i.focusHandler, !0), i.addKeyframes(), i.addAirpodKeyframes(), i.positionCards(t.pageMetrics), i
        },


        //
        }, {
        key: "_getTopPosition",
        value: function(t) {
            var e = 0;
            do isNaN(t.offsetTop) || (e += t.offsetTop); while (t = t.offsetParent);
            return e
        },


        //
        }, {
        key: "addKeyframes",
        value: function() {
            var t = this;
            this.cards.forEach(function(e, i) {
                i < t.cardIndex && (t.anim.addKeyframe(e, {
                    start: "0rh - " + t.topPosition + " + " + (t.topOffset.L + t.itemHeight.L * i) + "px",
                    end: "0rh - " + t.topPosition + " + " + (t.topOffset.L + t.cardHeight.L + t.itemHeight.L * i) + "px",
                    scale: [1, .95],
                    y: ["0px", "-40px"],
                    ease: .9,
                    relativeTo: ".cards-wrapper",
                    breakpointMask: "XL",
                    disabledWhen: "card-flow"
                }), ...

<i>This code is not mine. Text was cut to better understand.</i>

Мои ожидания: https://www.loom.com/share/be083a2e653e41a1b8197a57a54d3bd5

(экран, записанный с использованием ткацкого станка) ▲

Аналогично решенные проблемы: Анимированная анимация в зависимости от положения прокрутки

(стек переполнение ) ▲