Home Problem in visualizing the correct number of items on the horizontal scroll on the ScrollTrigger

Questions

Problem in visualizing the correct number of items on the horizontal scroll on the ScrollTrigger

December 29, 2023

I need help. I’m trying to create a horizontal scroll with GSAP and NextJS, so that when I reach the section where the event start, I can see one item instead of two. I don’t know where I went wrong. I’m using GSAP and Tailwind.

What I want in the projects section is I want to see al projects in the horizontal scroll but as of now, I’m not able to see more than one project although I have two projects.

TSX + Tailwind

import React, { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import comingSoon from "../image/coming_soon.jpg";
import Image from "next/image";
import "../css/portfolio.css";

export default function Portfolio() {
  const sectionRef = useRef(null);
  const triggerRef = useRef(null);

  gsap.registerPlugin(ScrollTrigger);

  useEffect(() => {
    const pin = gsap.fromTo(
      sectionRef.current,
      {
        translateX: 0,
      },
      {
        translateX: "-=100%",
        ease: "inOut",
        duration: 9,
        scrollTrigger: {
          trigger: triggerRef.current,
          start: "top top",
          end: "+=100%",
          scrub: 1,
          pin: true,
        },
      }
    );
    return () => {
      pin.kill();
    };
  }, []);


  return (
    <section className="py-12 h-screen" id="Portfolio" ref={triggerRef}>
      <h1 className="font-heading text-6xl md:text-10xl tracking-tightest about-me text-center">
        Latest Projects
      </h1>
      <div className="horizontal_scroll_container"  ref={sectionRef}>
        <div className="scroll_section py-12 md:py-20" >
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
        <div className="scroll_section py-12 md:py-20">
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

CSS

.horizontal_scroll_container{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow: hidden;
    scroll-behavior: smooth;
}
.scroll_section{
    flex: 0 0 auto;
    display: inline-flex;
}

>Solution :

Consider removing the from the overflow-x and overflow declarations from the .horizontal_scroll_container rule:

.horizontal_scroll_container{
    …
    overflow-x: auto;
    overflow: hidden;
    …
}

const { useRef, useEffect } = React;
const comingSoon = 'https://picsum.photos/1920/1080';
const Image = (...props) => <img {...props}/>

function Portfolio() {
  const sectionRef = useRef(null);
  const triggerRef = useRef(null);

  gsap.registerPlugin(ScrollTrigger);

  useEffect(() => {
    const pin = gsap.fromTo(
      sectionRef.current,
      {
        translateX: 0,
      },
      {
        translateX: "-=100%",
        ease: "inOut",
        duration: 9,
        scrollTrigger: {
          trigger: triggerRef.current,
          start: "top top",
          end: "+=100%",
          scrub: 1,
          pin: true,
        },
      }
    );
    return () => {
      pin.kill();
    };
  }, []);


  return (
    <section className="py-12 h-screen" id="Portfolio" ref={triggerRef}>
      <h1 className="font-heading text-6xl md:text-10xl tracking-tightest about-me text-center">
        Latest Projects
      </h1>
      <div className="horizontal_scroll_container"  ref={sectionRef}>
        <div className="scroll_section py-12 md:py-20" >
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
        <div className="scroll_section py-12 md:py-20">
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


ReactDOM.createRoot(document.getElementById('app')).render(<Portfolio/>);

.horizontal_scroll_container{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
}
.scroll_section{
    flex: 0 0 auto;
    display: inline-flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js" integrity="sha512-EZI2cBcGPnmR89wTgVnN3602Yyi7muWo8y1B3a8WmIv1J9tYG+udH4LvmYjLiGp37yHB7FfaPBo8ly178m9g4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js" integrity="sha512-OzC82YiH3UmMMs6Ydd9f2i7mS+UFL5f977iIoJ6oy07AJT+ePds9QOEtqXztSH29Nzua59fYS36knmMcv79GOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.0"></script>

<div id="app"></div>