I’m trying to re create this codepen but with horizontal scrolling instead of the vertical scrolling in the codepen. The thing is, I can’t even make it work. I copied the pen, but it’s not working in my react project.

This is the pen in question:

This is what I have tried so far:

"use client";
import { FC, useLayoutEffect, useRef } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import { Link } from "@root/i18n.config";
import { StaticImageData } from "next/image";
import { Stack, Typography } from "@mui/material";


gsap.registerPlugin(ScrollTrigger);

const TestComp: FC<{ styles: any; }> = ({ styles }) => {

    const component = useRef(null);
    // const bg = useRef(null);
    // const content = useRef(null);
    // const slider = useRef<HTMLDivElement>(null);


    useLayoutEffect(() => {
        const ctx = gsap.context(() => {
            let container = document.querySelector(".slides"),
                slides = gsap.utils.toArray(".slide"),
                getRatio = (el: any) => window.innerHeight / (window.innerHeight + el.offsetHeight);

            slides.forEach((slide: any, i) => {
                let bg = slide.querySelector(".background"),
                    content = slide.querySelector(".content"),
                    tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: slide,
                            start: () => i ? "top bottom" : "top top",
                            end: "bottom top",
                            scrub: true,
                            invalidateOnRefresh: true
                        }
                    });

                tl.fromTo(bg, {
                    y: () => i ? -window.innerHeight * getRatio(slide) : 0
                }, {
                    y: () => window.innerHeight * (1 - getRatio(slide)),
                    ease: "none"
                });
                tl.fromTo(content, {
                    y: () => i ? window.innerHeight * -getRatio(slide) * 2 : 0
                }, {
                    y: () => window.innerHeight * getRatio(slide) * 2,
                    ease: "none"
                }, 0);
            });
        }, component);
        return () => ctx.revert();
    });


    return (
        <section className={styles.slides} ref={component}>
            <ul className={styles.list}>
                <li className={styles.slide}>
                    <div
                        className={styles.background}
                        style={{ backgroundImage: "url('https://placedog.net/1920?id=1')" }}
                    />
                    <div className={styles.content}>
                        SLIDE 1
                    </div>
                </li>
                <li className={styles.slide}>
                    <div
                        className={styles.background}
                        style={{ backgroundImage: "url('https://placedog.net/1920?id=2')" }}
                    />
                    <div className={styles.content}>
                        SLIDE 2
                    </div>
                </li>
                <li className={styles.slide}>
                    <div
                        className={styles.background}
                        style={{ backgroundImage: "url('https://placedog.net/1920?id=3')" }}
                    />
                    <div className={styles.content}>
                        SLIDE 3
                    </div>
                </li>
                <li className={styles.slide}>
                    <div
                        className={styles.background}
                        style={{ backgroundImage: "url('https://placedog.net/1920?id=4')" }}
                    />
                    <div className={styles.content}>
                        SLIDE 4
                    </div>
                </li>
            </ul>
        </section>
    );
};

export default TestComp;

My question is: How can I make this a horizontal scrolling parallax, instead of vertical in react.js?

Thanks in advance…