How to stop a section reloading after Greensock animation is complete

I’ve got a website sectio pinned while image scroll up as the user scrolls. After the animaiton is complete the section seems to reload in to position. Can someone point to me what my mistake is. – here’s a link to the dev site http://ant.mhwddev.co.uk/

Here’s the HTML

<section id="landing-hero" class="full-height">
            <div class="container">
                <h1>A<span class="text-behind">n</span>t<br />S<span class="text-behind">t</span>e<span class="text-behind">e</span>l</h1>
                <img id="landing-hero-image-one" src="<?php echo esc_url( $image_1['url'] ); ?>" alt="<?php echo esc_attr( $image_1['alt'] ); ?>" />
                <img id="landing-hero-image-two" src="<?php echo esc_url( $image_2['url'] ); ?>" alt="<?php echo esc_attr( $image_2['alt'] ); ?>" />
                 <img id="landing-hero-image-three" src="<?php echo esc_url( $image_3['url'] ); ?>" alt="<?php echo esc_attr( $image_3['alt'] ); ?>" />
 
            </div>
        </section>

Here’s the GSAP

gsap.registerPlugin(ScrollTrigger);

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '#landing-hero',
    start: 'top top',
    end: '+=500', // Adjust this value as needed to ensure images move up before scrolling down
    scrub: 0.1, // Smaller scrub value for smoother animation
  },
});

// Set initial positions of the images off-screen
gsap.set(['#landing-hero-image-one', '#landing-hero-image-two', '#landing-hero-image-three'], { y: '200%' });

// Animate all images simultaneously with smaller increments
tl.to(['#landing-hero-image-one', '#landing-hero-image-two', '#landing-hero-image-three'], {
  duration: 150, // Increase duration for slower animation
  y: '-90%', // Smaller increment for smoother animation
});

// Pin the #landing-hero section and set endTrigger to #landing-hero-image-three
ScrollTrigger.create({
  trigger: '#landing-hero',
  start: 'top top',
  pin: true,
  endTrigger: '#landing-hero-image-three',
  end: 'top+=90', // Adjust this value as needed to match the height of the images
  scrub: 0.1, // Smaller scrub value for smoother pinning
});

// Scroll down the page after the images have reached the top
ScrollTrigger.create({
  trigger: '#landing-hero-image-three',
  start: 'top top',
  end: 'top+=90', // Adjust this value as needed to match the offset of your content
  scrub: 0.1, // Smaller scrub value for smoother scrolling
  onEnter: () => {
    window.scrollTo(0, window.scrollY + 1);
  },
});

I’m expecing the page to scroll as normal once the animations are over, Instead the section seems to reload.