gsap and scroll trigger glitch while scrolling

Question

while scrolling it is working but there is come glitch while scrolling I know where problem is coming with the text it is going smooth but when I put image in second section it start glitching but it is working I tried to fixed it but it is glitching I don't the solution for it please fix this issue if anyone knows the solution

code

html

    <div class="support-bg"></div>
    <div class="block">
        <div id="mainCardGroup" class="mainCard">
            <div class="bestUiGroup">
                <p class="hero-text bgBestIn">demo of</p>
                <p class="hero-text classText">scale</p>
                <p class="hero-text uiText">Animation</p>
            </div>
            <div class="bestUiDesignSec">
                <div class="uisImgs">
                    <img class="uiImg1 uiImgGroup greatManImg1" src="./Assets/Shape-1.png" width="380" />
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" integrity="sha512-gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO99Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js" integrity="sha512-tHvUcUQYi35zApvAa5TNR3fNhBQkVtkmWKfacnpxmix4/VTGz1lGjIVyLMp7gLgAvg+aKJjnVKokXJNS5GZ+/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/TextPlugin.min.js" integrity="sha512-kxpzL+7fsRR+rSVOZgukbSRNHafu/lT7F1pcHrHYcEtF+3uSEgdfaoYnyuvwolK6WrGZpCsd6I5msXTsPXTk+A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./gsap.js"></script>
</body>
</html>

css section

body {
    background-color: cornflowerblue;
    height: 1550px;
}

.support-bg {
    background-color: #4299e1;
    height: 700px;
}

.mainCard {
    height: 721px !important;
    width: 510px !important;
    border-radius: 34px;
    background-color: aliceblue;
}

.block {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3000px;
}

.uiTextAm {

    text-align: center;
    font-family: 'Hachi Maru Pop', cursive;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 20px;
}


.bestUiGroup {
    text-align: center;
    position: absolute;
    top: 30%;
    left: 45%;
    margin: -50px 0 0 -50px;
}

.bgBestIn {
    font-size: 50px;
    font-weight: 700;
    font-family: 'Kaushan Script', cursive;
    color: transparent;
    --gradient-to-color: #38b2ac;
    --gradient-from-color: #4299e1;
    --gradient-color-stops: var(--gradient-from-color),var(--gradient-to-color, rgba(66, 153, 225, 0));
    background-image: linear-gradient(to right,var(--gradient-color-stops));
    background-clip: text;
}

.classText {
    margin-top: -45px;
    font-size: 50px;
    font-weight: 700;
    font-family: 'Kaushan Script', cursive;
    color: transparent;
    --gradient-to-color: #ed64a6;
    --gradient-from-color: #7f9cf5;
    --gradient-color-stops: var(--gradient-from-color),var(--gradient-to-color, rgba(127, 156, 245, 0));
    background-image: linear-gradient(to right,var(--gradient-color-stops));
    background-clip: text;
}

.uiText {
    margin-top: -42px;
    font-size: 50px;
    font-weight: 700;
    font-family: 'Kaushan Script', cursive;
    color: transparent;
    --gradient-to-color: #ed8936;
    --gradient-from-color: #e53e3e;
    --gradient-color-stops: var(--gradient-from-color),var(--gradient-to-color, rgba(229, 62, 62, 0));
    background-image: linear-gradient(to right,var(--gradient-color-stops));
    background-clip: text;
}

.greatManSvg {
    left: 30%;
}

.bestUiDesignSec {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.greatManSvg {
    margin-top: 100px;
}

.triangleElementUi {
    left: 120px;
    width: 100px;
    transform: rotate(20deg);
    position: relative;
}

.linesElementUi {
    position: relative;
    top: 216px;
    left: -10px;
}

.circleElementUi {
    position: absolute;
    z-index: -1;
    width: 350px;
    left: -50px;
    ;
}

.uisImgs {
    position: relative;
    padding-top: 33px;
    padding-left: 60px;
}

javascript section

gsap.registerPlugin(ScrollTrigger);

const tl = gsap.timeline( {
  scrollTrigger: {
    trigger: "#mainCardGroup",
    start: "top top",
    end: "bottom center",
    pin: true,
    scrub: true,
    markers: true,
  }
})
tl.fromTo(
  ".hero-text",
  { y: "50px", opacity: 0 },
  { y: "0px", opacity: 1, stagger: 0.5 },
  "+=1"
)
.to(".hero-text", { opacity: 0 }, "+=1")
.from(".greatManImg1", {scale: 5, opacity: 0, duration: 3}, "+=1")