personal-site/layouts/general_layout/BG.tsx

"use client";

import React from "react";
import { gsap } from "gsap";
// import scrollTrigger from "gsap/ScrollTrigger";

const BG = () => {
    React.useEffect(() => {
        // gsap.registerPlugin(scrollTrigger);

        gsap.to("#bg-blurred-image", {
            scrollTrigger: {
                scrub: 5,
            },
            y: 50,
            scale: 0.8,
        });

        gsap.to("#bg-image", {
            scrollTrigger: {
                scrub: 2,
            },
            y: 50,
            opacity: 0,
        });
    }, []);

    return (
        <React.Fragment>
            <img
                src="/images/rm378-07c-min.png"
                alt="bg-image"
                className="fixed top-0 left-0 w-full h-full object-cover z-[-2] p-[100px] opacity-20 blur-sm"
                id="bg-blurred-image"
            />
            <img
                src="/images/rm378-07c-min.png"
                alt="bg-image"
                className="fixed top-0 left-0 w-full h-full object-cover z-[-1] p-[150px] opacity-5"
                id="bg-image"
            />
        </React.Fragment>
    );
};

export default BG;