Parallax image

'use client';

import Image, { StaticImageData } from 'next/image';
import React, { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { cn } from 'src/lib/utils';

type Props = {
className_?_: string;
image: StaticImageData | string;
};

const ParallaxImage = ({ className, image }: Props) => {
const imgRef = useRef<HTMLImageElement>(null);

useEffect(() => {
gsap.registerPlugin(ScrollTrigger);

const img = imgRef.current;

const tl = gsap.timeline({
scrollTrigger: {
trigger: img,
scrub: true,
pin: false,
},
});

tl.fromTo(
img,
{
yPercent: _-_10,
ease: 'none',
},
{
yPercent: 20,
ease: 'none',
},
);
}, []);
return (
<div
className={cn(
`mb-14 h-[350px] w-full overflow-hidden bg-slate-100 px-8 lg:min-h-[700px] ${className}`,
)}
>
<div className="relative h-full w-auto xl:w-full">
<Image
alt="IntelSprings image"
ref={imgRef}
src={image}
fill
className="h-full w-full origin-center scale-125 object-cover object-top"
loading="eager"
/>
</div>
</div>
);
};

export default ParallaxImage;