Animation GSAP laggy

animation.gsap.js

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

const carouselVertical = document.querySelector('.carousel-vertical')

if (carouselVertical) {
    gsap.registerPlugin(ScrollTrigger)

    //  Pin Carousel Arrow
    const carouselArrow = carouselVertical.querySelector('.carousel-vertical__arrow')
    ScrollTrigger.create({
        trigger: carouselVertical,
        start: 'top top',
        end: 'bottom bottom',
        pin: carouselArrow,
    })

    //  Pin Header
    const header = document.querySelector('.header')
    ScrollTrigger.create({
        trigger: carouselVertical,
        start: 'top top',
        end: 'bottom 50%',
        onToggle: (self) => {
            self.isActive ? header.classList.remove('unfixed') : header.classList.add('unfixed')
        }
    })

    /**
     * Carousel Navigation
     */

    const carouselNavigation = carouselVertical.querySelector('.carousel-vertical__nav')
    const carouselButtons = carouselNavigation.querySelectorAll('.carousel-vertical__nav-button')
    const buttonsCount = carouselButtons.length

    //  Pin Carousel Navigation
    ScrollTrigger.create({
        trigger: carouselVertical,
        start: 'top top',
        end: 'bottom bottom',
        pin: carouselNavigation,
    })

    let currentButton = null
    carouselButtons.forEach((button, index) => {
        const slide = document.querySelector(button.attributes.href.value)
        const slideImage = slide.querySelector('.carousel-vertical-slide__image')
        const slideText = slide.querySelector('.carousel-vertical-slide__text')

        //  Activate Slide Menu Button on scroll
        ScrollTrigger.create({
            trigger: slide,
            start: 'top center',
            end: 'bottom center',
            onToggle: (self) => {setActive(self, button)}
        });

        //  Pin Slide image
        ScrollTrigger.create({
            trigger: slide,
            start: 'top top',
            end: 'bottom ' + (index === buttonsCount - 1 ? 'bottom' : '25%'),
            pin: slideImage,
        })

        //  Animate Slide Text
        gsap
            .from(slideText, {
                y: (index === 0 ? 0 :'30vh'),
                duration: 1,
                scrollTrigger: {
                    trigger: slide,
                    start: 'top 25%',
                    scrub: true,
                },
            })

        //  Scroll to slide on click
        button.addEventListener('click', (evt) => {
            evt.preventDefault()
            const targetCoordinates = slide.getBoundingClientRect()

            window.scrollTo({
                top: targetCoordinates.top + window.scrollY,
                left: 0,
                behavior: 'smooth',
            })
        })
    })

    carouselArrow.addEventListener('click', (evt) => {
        if (currentButton.nextSibling) {
            currentButton.nextSibling.click()
        }
    })

    const setActive = (self, button) => {
        if (self.isActive) {
            if (currentButton) {
                currentButton.classList.remove('current')
            }

            button.classList.add('current')
            currentButton = button
        }
    }
}