GSAP parallax Slider animation in Reactjs

GSAP parallax Slider animation in Reactjs

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

HTML 

   

<div className="wrapper">

            <div className="container">

                <div className="blockofimages">

                    <div className="img"></div>

                    <div className="img"></div>

                    <div className="img"></div>

                    <div className="img"></div>

                    <div className="img"></div>

                    <div className="img"></div>

                    <div className="img"></div>

                    <div className="img"></div>

                    <div className="img"></div>

                    <div className="img"></div>

                </div>

            </div>

        </div>

CSS

html, body, .blockofimages, .img {

    width:100%;

    height: 100%;

    transform-style: preserve-3d;

    user-select:none;

  }

  .wrapper{

    width:100vw;

    height: 100vh;

    transform-style: preserve-3d;

    user-select:none;

  }

  

  html, body, .wrapper {

    overflow:hidden;

    background:#000;  

  }

  

  div, svg {

    position: absolute;

  }

  

  .container {

    perspective: 2000px;

    width: 300px;

    height: 400px;  

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

  }

Use GSAP Method to create loader animation. Different Method of GSAP you can check below link
https://www.codeforinfo.com/2023/06/useful-gsap-method-to-create-gsap.html

GSAP animation

useEffect(() => {

        const img = document.getElementsByClassName('img');

        let xPos = 0;

  

 function dragStart(e) {

            console.log("e", e);

            if (e.touches) e.clientX = e.touches[0].clientX;

            xPos = Math.round(e.clientX);

            gsap.set('.blockofimages', { cursor: 'grabbing' })

            window.addEventListener('mousemove', drag(e));

}

function drag(e) {

            console.log("drag", e);

            if (e.touches) e.clientX = e.touches[0].clientX;

            gsap.to('.blockofimages', {

                rotationY: '-=' + ((Math.round(e.clientX) - xPos) % 360),

                onUpdate: () => { gsap.set('.img', 

            { backgroundPosition: (i) => getBgPos(i) }) }

            });

            xPos = Math.round(e.clientX);

        }