Ошибки со Swiper + GSAP анимацией?

Question

[Danila232]

У меня есть слайдер и на каждом слайде при прокрутке на каждый слайд - отрисовывается GSAP-анимация

<div class="layout__content-top" id="layout-slider">
                            <div class="layout__wrapper swiper-wrapper">

                                <div class="layout__slide swiper-slide">
                                    <div class="layout__text layout__text--1">
                                        <h1>Software Monetization</h1>
                                        <p>We help software developers monetize their products with unique and non-intrusive advertisement options.</p>
                                        <a href="#!" class="layout__slide-btn btn">Read More</a>
                                    </div>
                                    <svg> // svg-элементы </svg>                                       
                                </div>

                                <div class="layout__slide swiper-slide">
                                    <div class="layout__text layout__text--2">
                                        <h1>Reach the best users</h1>
                                        <p>Multiple ad formats and dedicated support combined with an advanced anti-fraud system will guarantee a good ROl. We work with CPA, CPI, CPS and PPI offers for desktop and mobile platforms.</p>
                                        <a href="#!" class="layout__slide-btn btn">Read More</a>
                                    </div>
                                    <svg> // svg-элементы </svg>                                                                                     
                                </div>
                               // остальные слайды

const layoutSlider = new Swiper('#layout-slider', {
    navigation: {
        prevEl: '.layout .swiper-button-prev',
        nextEl: '.layout .swiper-button-next',
        enabled: false,       
    },

    on: {
        init: function() {
            getlayoutAnimation__1()
        },
        slideChange: function () {
            switch (this.realIndex) {
                // case 0:
                //     getlayoutAnimation__1()
                //     break;
                case 1:
                    getlayoutAnimation__2()
                    break;
                case 2:
                    getlayoutAnimation__3()
                    break;
                case 3:
                    getlayoutAnimation__4()
                    break;           
                case 4:
                    getlayoutAnimation__5()
                    break;           
                case 5:
                    getlayoutAnimation__6()
                    break;           
                default:
                    break;
            }
        },
    },
})

// Layout-Animation
function getlayoutAnimation__1(){
    const layoutAnimation__1 = gsap.timeline()
    layoutAnimation__1
        .from('.layout__text--1 h1, .layout__text--1 p, .layout__text--1 a', {
            xPercent: -100,
            autoAlpha: 0,
            stagger: .3,
            duration: .8,
            delay: .6,
        })
        .from('.svg-1__10k', {
            yPercent: 70,
            autoAlpha: 0,
        })
        .from('.svg-1__top-diagram', {
            yPercent: -60,
            autoAlpha: 0,
        })
        .fromTo('.svg-1__wavy-lines path', {
            strokeDashoffset: 365,
            strokeDasharray: 365,
            stagger: .2,
            duration: .6,
        }, {
            strokeDashoffset: 0,
            duration: .6,
        })
        .call(svgMooving, [1])
}

function getlayoutAnimation__2(){
    const layoutAnimation__2 = gsap.timeline()
    layoutAnimation__2
        .from('.layout__text--2 h1, .layout__text--2 p, .layout__text--2 a', {
            yPercent: 100,
            autoAlpha: 0,
            stagger: .3,
            duration: .8,
            delay: .6,
        })
        .fromTo('.svg-2__graph-line path', {
            strokeDashoffset: 540,
            strokeDasharray: 540,
            duration: .6,
        }, {
            strokeDashoffset: 0,
            duration: .6,
        })
        .call(svgMooving, [2])
}


// Mooving
function svgMooving(num){
    document.querySelector('.layout').addEventListener('mousemove', (e) => {
        const mainSvg = document.querySelector(`.svg-${num}`)
        mainSvg.querySelectorAll('.svg-mooving').forEach((item, index) => {
            let moveX = (e.clientX - window.innerWidth / 2) * .008;
            let moveY = (e.clientY - window.innerHeight / 2) * .08;
            item.style.cssText = `transform: matrix(1, 0, 0, 1, ${moveX}, ${moveY})`
            // item.style.cssText = `transform: rotateX(${moveY}) rotateY(${moveX})`
            })
    })
    return
}

В целом у меня всё работает, но есть 2 неприятных ошибки:
1) Логику я сделал так - у Swiper-a есть события, и я добавил два события: init, slideChange(через switch). При on: init я отрисовываю 1й слайд, при slideChange я беру this.realIndex(который показывает индекс каждого слайда) и рисую все остальные. И сейчас у меня проблема в том, что почему то при

switch (this.realIndex) {
                 case 0:
                    getlayoutAnimation__1()
                    break;

анимация 1го слайда не работает. Точнее работает с багами. И это проблема именно в первой позиции, а не в конкретно этом слайде, почему то при "case 0:" анимация ломается в любом случае. Сейчас при открытии сайта анимация 1го слайда отрабатывает из-за события init, но если переключить на 2й слайд, и потом вернуться назад на 1й- анимации уже не будет. Думаю тут проблема со Swiper-ом, а не Gsap

2) Gsap-анимации я делаю в функциях getlayoutAnimation__1(), getlayoutAnimation__2() и тд. И в каждую такую функцию в конец я добавил функцию svgMooving(), чтобы отрисованные элементы двигались при движении мыши. И двигался конкретно тот слайд, на который переключили и двигался только после полной отработки анимации(поэтому вызываю svgMooving через .call() в самом конце). Но проблема в том, что мне нужно чтобы после каждого переключения слайда старый svgMooving() прекращал работу, а новый запускался. А сейчас например, если я переключился на 3й слайд - отработал svgMooving(3) и так и остался работать. И если начать переключать слайды по 2му кругу и снова прийти на 3й слайд - svgMooving() работает сразу, а не после отрисовки анимации. И всё ломается

ссылка: https://installvip.netlify.app.
Буду благодарен, если поможете с какой-то из проблем