Published on: Sat Aug 31 2024
Author - Himanshu Sharma
Add amazing Parallax effect in Image with gsap!
I created this Parallax Image component with gsap. You can use whenever you want in your webapp, just import and use like this 👇
<ParallaxImage src={'/image.jpg'}/>First install the gsap library
npm i gsapIf you use in React just remove the Image import and use normal <img> tag
import React, { useRef } from "react";
import { useEffect } from "react";
import gsap from "gsap";
import Image from "next/image";
const ParallaxImage = ({ src }) => {
const imageRef = useRef();
useEffect(() => {
const ScrollTrigger = require("gsap/ScrollTrigger");
gsap.registerPlugin(ScrollTrigger);
const image = imageRef.current;
gsap.to(image, {
yPercent: 35,
ease: "none",
scrollTrigger: {
trigger: image,
start: "top bottom",
end: "bottom top",
scrub: true,
},
});
}, []);
return (
<figure className="relative isolate inset-0 overflow-hidden w-full h-full">
<Image
ref={imageRef}
className="image h-[150%] absolute object-cover bottom-0 left-0"
src={src}
blurDataURL={src}
placeholder="blur"
alt="My photo"
width={1000}
height={1000}
></Image>
</figure>
);
};
export default ParallaxImage;Chill, hehe !