Create Horizontal smooth scroll using GSAP and reactjs

Create Horizontal smooth scroll using GSAP and Reactjs

Check Youtube video to see animation

GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

Create reactjs project and install gsap using npm install gsap command.

 <div ref={(el) => (body = el)} className="Headd">

    <div className="wrapper">

     <div className="panel">

      <div className="img-wrap">

       <img

        src="http://static.showit.co/800/XuvRR5ZKQ52a4R_B89WixA/59514/

        macbookpreview-8.jpg"

        alt="img-11" />

       <h2>SEO READY</h2>

      </div>

     </div>

     <div className="panel black">

      <div className="img-wrap">

       <img

        src="http://static.showit.co/800/R35-FqP9QASNbupmBSK7Iw/59514/

        macbookpreview-7.jpg"

        alt="img-12" />

       <h2>SMOOTH ANIMATION</h2>

      </div>

     </div>

     <div className="panel ">

      <div className="img-wrap">

       <img

        src="http://static.showit.co/800/KrKfX6KHTeu7iOs6wxOQMA/59514/

        macbookpreview-5.jpg"

        alt="img-13" />

       <h2>MODERN LAYOUTS</h2>

      </div>

     </div>

     <div className="panel black">

      <div className="img-wrap">

       <img

        src="http://static.showit.co/800/peoh1XDRTVat5KqUv7P6GQ/59514/

        macbookpreview-3.jpg"

        alt="img-14" />

       <h2>SEO FRIENDLY</h2>

      </div>

     </div>

     <div className="panel">

      <div className="img-wrap">

       <img

        src="http://static.showit.co/800/YyTYQlGLROOIJ5MqHIpKXQ/59514/

        macbookpreview-2.jpg"

        alt="img-15" />

       <h2>EASY TO USE</h2>

      </div>

     </div>

    </div>

   </div>

GSAP animation CODE

gsap.context();

Collects all GSAP animations and ScrollTriggers that are created within the supplied function so that you can easily revert() or kill() ALL of them at once.

GSAP Method for Animation examples already shared here, please check 
https://www.codeforinfo.com/2023/06/useful-gsap-method-to-create-gsap.html

Css 

.wrapper {

    width: 500%;

    height: 100vh;

    display: flex;

    flex-wrap: nowrap;

  }

  .panel {

     width: 100%;

    height: 100%;

    font-weight: 600;

    font-size: 1.5em;

    color: white;

    position: relative;

    box-sizing: border-box;

  }

  .panel h1 {

    font-size: 1.8em;

    color: white;

    font-weight: 300;

    margin: 0 auto;

  }

  .black {

    background-color: #000;

  }

  .img-wrap{

      height:100%;

      display: flex;

      align-items: center;

  }

Hope you like it