Gsap scroll trigger , pin property makes whitespace and hide the section in the web page

Question

I am doing horizontal scroll in gsap by pin property, if i scroll from top to bottom, the images and everything is hidden but if i go to the bottom of the website and scroll bottom to top, it is working?

I am using nextjs

import { gsap } from "gsap";
import React, { useLayoutEffect } from "react";

const GallerySection = () => {
  useLayoutEffect(() => {
    const horizontal = document.querySelector("#container");
    const totalWidth = horizontal.offsetWidth * 4 - window.innerWidth;
    console.log(totalWidth);

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: "#container",
        markers: true,
        start: "top top",
        scrub: true,
        pin: true,
        pinSpacing: false,
        pinnedContainer: false,
        pinSpacer: false,
      },
    });

    tl.to("#wrapper", { x: -totalWidth });
    // tl.kill();
    () => tl.kill();
  }, []);
  return (
    <div id="container" className="h-[100vh] w-full">
      <div
        id="wrapper"
        className="h-[100vh] w-full bg-green-500 flex justify-between items-center "
      >
        {/* 1 */}
        <div>
          <div className="h-[100vh]  flex-col bg-green-500 w-[100vw] flex items-center justify-center relative">
            <div
              className="w-[840px]  h-[600px] "
              style={{
                objectFit: "contain",
              }}
            >
              <img
                className="w-full h-full "
                style={{
                  objectFit: "fill",
                }}
                src="https://images.unsplash.com/photo-1566204773863-cf63e6d4ab88?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1345&q=100"
                alt=""
              />
            </div>

            <div className="absolute left-[10%] bottom-[25%]">
              <h1 className="text-[50px] ">Dracaena Trifasciata</h1>
              <h2 className="text-[30px] ">Live the Beauty</h2>
            </div>
          </div>
        </div>
        {/* 2 */}
        <div>
          <div className="h-[100vh]  flex-col bg-green-500 w-[100vw] flex items-center justify-center relative">
            <div
              className="w-[840px]  h-[600px] "
              style={{
                objectFit: "contain",
              }}
            >
              <img
                className="w-full h-full "
                style={{
                  objectFit: "fill",
                }}
                src="https://images.unsplash.com/photo-1558603668-6570496b66f8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1300&q=100"
                alt=""
              />
            </div>

            <div className="absolute left-[10%] bottom-[25%]">
              <h1 className="text-[50px] ">Cereus Penuvianus</h1>
              <h2 className="text-[30px] ">Live the Beauty</h2>
            </div>
          </div>
        </div>
        {/* 3 */}
        <div>
          <div className="h-[100vh]  flex-col bg-green-500 w-[100vw] flex items-center justify-center relative">
            <div
              className="w-[840px]  h-[600px] "
              style={{
                objectFit: "contain",
              }}
            >
              <img
                className="w-full h-full "
                style={{
                  objectFit: "fill",
                }}
                src="https://images.unsplash.com/photo-1567225557594-88d73e55f2cb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=934&q=100"
                alt=""
              />
            </div>

            <div className="absolute left-[10%] bottom-[25%]">
              <h1 className="text-[50px] ">Calliope</h1>
              <h2 className="text-[30px] ">Live the Beauty</h2>
            </div>
          </div>
        </div>
        {/* 4 */}
        <div>
          <div className="h-[100vh]  flex-col bg-green-500 w-[100vw] flex items-center justify-center relative">
            <div
              className="w-[840px]  h-[600px] "
              style={{
                objectFit: "contain",
              }}
            >
              <img
                className="w-full h-full "
                style={{
                  objectFit: "fill",
                }}
                src="https://images.unsplash.com/photo-1611145367651-6303b46e4040?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2006&q=100"
                alt=""
              />
            </div>

            <div className="absolute left-[10%] bottom-[25%]">
              <h1 className="text-[50px] ">Golden Pothos</h1>
              <h2 className="text-[30px] ">Live the Beauty</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default GallerySection;

this image is if i scroll from top to bottom , Not working

this image is if i scroll from bottom to top , working

Answer 1

Attempt to input "end" in the available options.

scrollTrigger: {
  trigger: container,
  scrub: true,
  start: "top 80%",
  end: "top 55%",
  immediateRender: false,
  markers: true,
},