GSAP 3D Effect in Reactjs

Here some Basic step to follow while create animation in GSAP.

1 : Register scrollTrigger plugin. while trigger element on scroll.
2 : Create React Hooks and write gsap code inside it.
3 : Use gsap.context(), Collects all GSAP animations and ScrollTrigger that are created within the supplied function so that you can easily revert() or kill()ALL of them at once.
4 : Create timeline and scrollTrigger base on your requirements.

3D animation using GSAP and reactjs.

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

HTML

GSAP 3D effect animation with use of reactjs

CSS

body {
    background-color: #202020;
    color: white;
    font-size: 18px;
    overflow-x: hidden;
}

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 96px;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 5vh 5%;
}

.panel {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1200px;
    height: 466px;
    user-select: none;
    pointer-events: none;   
}

.panelBlock {
    flex-basis: 25%;
}

.content {
    position: absolute;
    top: 26%;
    left: 0;
    z-index: 2;
    width: 100%;
}

.text {
    display: inline-block;
    text-align: right;
}

.imgCol {
    width: 100%;
}

.imgContent {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imgCol {
    flex-basis: 70%;
    box-shadow: 0px 20px 100.28px 8.72px rgba(0, 0, 0, 0.35);
}


.title {
    margin: 0;
}

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

create useRef() to access DOM elements.

let panelContent = useRef(null);
let panelImgCol = useRef(null);

useEffect(() => {

        let ctx = gsap.context(() => {

            var body = document.getElementsByTagName("body");
            initTilt();
            function initTilt() {
                console.log("Call init");
                TweenMax.set([panelContent, panelImgCol], 
                { transformStyle: "preserve-3d" });

                body[0].addEventListener("mousemove", (e) => {
                    animi(e.pageX, e.pageY)
                });
            };

            function animi(cx, cy) {
                console.log("x,y", cx, cy);
                var sxPos = (cx / window.innerWidth * 100 - 50) * 2;
                var syPos = (cy / window.innerHeight * 100 - 50) * 2;

                console.log("sx,sx", sxPos, syPos);
                TweenMax.to(panelContent, 2, {
                    rotationY: -0.03 * sxPos,
                    rotationX: 0.03 * syPos,
                    transformPerspective: 500,
                    transformOrigin: "center center -400",
                    ease: Expo.easeOut
                });
                TweenMax.to(panelImgCol, 2, {
                    rotationY: -0.03 * sxPos,
                    rotationX: 0.03 * syPos,
                    transformPerspective: 500,
                    transformOrigin: "center center -200",
                    ease: Expo.easeOut
                });
            }

            body[0].addEventListener("mouseleave", () => {
                animi(window.innerWidth / 2, window.innerHeight / 2);
            });

        });
        return () => ctx.revert();
    }, [])

Locomotive scroll landing page design

https://drmaniya.github.io/agency/

GSAP 3D Effect in Reactjs