i am using scrollTrigger to make horizontal scroll animation but its glitching weirdly

Question

[when i start scrolling the project cards should scroll to the right but it gives me a white space then the white space disappears when i reach the end of the projects

before the animations starts:enter image description here

at the end of animation

mid animation]

    <section class="projects">

        <div class="text">
            <p>featured projects</p>
            <h2>With our passion, we design every project we call it home.</h2>
        </div> 
      <div class="project-container">
           
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA REHAB</div>
            </div>
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA MADINATY</div>
            </div>
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA OCTOBER</div>
            </div>
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA SHEROUK</div>
            </div>
            <div class="project">
                <img src="assets/Modern Living VillaF42.png" alt="">
                <div class="overlay-text">VILLA ALEXANDRIA</div>
            </div>
      </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js"></script>
    
    <script src="script.js"></script>

const projects = document.querySelector(".project-container");
console.log(projects.offsetWidth)

function getScrollAmount() {
    let projectsWidth = projects.scrollWidth;
    return -(projectsWidth - window.innerWidth);
}

const tween = gsap.to(projects, {
    x: getScrollAmount,
    duration: 3,
    ease: "none",
});


ScrollTrigger.create({
    trigger:".projects",
    start:"top 20%",
    end: () => `+=${getScrollAmount() * -1}`,
    pin:true,
    animation:tween,
    scrub:1,
    invalidateOnRefresh:true,
    markers:true
})