Facing issue of start marker starting from above the section when it's set to top top for second animation on the page

Question

I am creating a gsap scroll trigger animation of my homepage but facing issue for second animation start point. For second animation start marker is showing above the start point I have set in code.If I remove first animation code from the HTML then it's work fine.

here is my gsap code

$(document).ready(function() {
        gsap.registerPlugin(ScrollTrigger);
        
        let tll = gsap
        .timeline({
            scrollTrigger: {
            trigger: ".view-instruction-sec",
            pin: true,
            start: "top top",
            scrub: 0.01,
            markers: true,
            end: "bottom+=600%",
          }
        })
        
        .to(".zero-slide-animation", {xPercent: -100, ease:"none", })
        .to(".first-image-animation-banner", {xPercent: -100, ease:"none", })
        .to(".first-image-animation-banner img.image-opacity", {opacity: 1, ease:"none", })
        .to(".first-image-animation-banner img.image-opacity", {opacity: 1, ease:"none", })
        .to(".first-image-animation-banner img.image-opacity", {opacity: 0, ease:"none", })
        .to(".first-image-animation-banner", {xPercent: -200, ease:"none", })
        .to(".second-image-animation-banner", {xPercent: -200, ease:"none", })
        .to(".second-image-animation-banner img.image-opacity", {opacity: 1, ease:"none", })
        .to(".second-image-animation-banner img.image-opacity", {opacity: 1, ease:"none", })
        .to(".second-image-animation-banner img.glasses-img", {scale: 1.3, ease:"none", })

        



gsap.set(".single-animation-plane", { opacity: 1, scale:1 });

let tl = gsap
  .timeline({
    scrollTrigger: {
      trigger: ".animation-plane-outer",
      start: "top top",
      scrub: 0.1,
      pin: true,
      end: "bottom+=300%",
      markers: true
    }
  })
  .to(".single-animation-plane", { opacity: 0, scale:1.5, xPercent:-20, })
  .to(".second-animation-planes", { opacity: 1, scale:1 })
  .to(".second-animation-planes", { opacity: 0.75, scale:1.2 })
  .to(".third-animation-plane", { opacity: 1 });

});


        </script>

Thank you

I have tried some RND for the issue but found nothing positive.