Make this Stacked Card Scrolling Effect/Animation in Elementor

				
					<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
if (!MDWNonce100) {

    var MDWNonce100 = true;

    $(document).ready(function () {

        var previousScrollTop = [],
            cards = [],
            cardScrollHeight = [],
            cardRotate = [],
            cardContainer = [],
            stickyTop = [],
            stickyCon = [];

        // Sliding cards on scroll
        function cardSlideUp() {
            $('.my-stacked-card-area').each(function (i) {

                var $this = $(this),
                    scrollTop = $(document).scrollTop(),
                    cardAreaTop = $this.offset().top,
                    index = Math.floor((scrollTop - cardAreaTop - stickyTop[i]) / cardScrollHeight[i]),
                    totalCards = cards[i].length;

                cards[i].removeClass('my-active-card');
                cards[i].each(function (j) {
                    if (j <= index) {
                        $(this).addClass('my-active-card');
                    }
                    if (index >= -1 && index < totalCards - 1) {
                        $(this).css({
                            'transform': `rotate(${ -1 * j * cardRotate[i] + (index + 1) * cardRotate[i] }deg)`
                        });
                    }
                });

                previousScrollTop[i] = scrollTop;
            });
        }

        function setValues() {
            $('.my-stacked-card-area').each(function (i) {

                var $this = $(this);

                stickyTop[i] = 0;

                if (stickyCon[i].outerHeight() > $(window).height()) {
                    stickyTop[i] = cardContainer[i].offset().top - stickyCon[i].offset().top - $(window).height() / 2;
                }
                stickyCon[i].css('top', -1 * stickyTop[i]);

                cardScrollHeight[i] = $this.css('--card-scroll-height') ? parseInt($this.css('--card-scroll-height').trim()) : 400;
                cardRotate[i] = $this.css('--card-rotate') ? parseInt($this.css('--card-rotate').trim()) : 9;

                // Rotating cards
                cards[i].each(function (j) {
                    $(this).css({
                        'transform': `rotate(-${j * cardRotate[i]}deg)`,
                        'z-index': cards[i].length - j
                    });
                });

                // Card area height
                $this.css('height', stickyCon[i].outerHeight() + ((cards[i].length - 1) * cardScrollHeight[i]) + 'px');
            });
        }

        $(document).on('scroll', cardSlideUp);
        $(window).on('resize', function () {
            setValues();
            cardSlideUp();
        });

        function init() {
            $('.my-stacked-card-area').each(function (i) {

                var $this = $(this);

                cards[i] = $this.find('.my-stacked-cards > .e-con, .my-stacked-cards > .e-container, .my-stacked-cards > .e-con-inner > .e-con, .my-stacked-cards > .e-con-inner > .e-container');
                stickyCon[i] = $this.children('.e-con, .e-container').eq(0);

                stickyCon[i].parents().each(function () {
                    if (!$(this).is('html')) { $(this).css('overflow', 'visible'); }
                });

                previousScrollTop[i] = $(document).scrollTop();
                cardContainer[i] = $this.find('.my-stacked-cards');
            });

            setValues();
            cardSlideUp();
        }

        init();

    });
}
</script>