Image Reveal Animation

This animation reveals images with a smooth sliding effect from the left as they scroll into view. Elements with the .has_image_reveal class become visible and slide in horizontally based on a customizable data-start position. The effect adds a dynamic visual entrance to images, enhancing user engagement as they navigate through the page.

Here is some basic code for image reveal animation:

⚠️

It will work only on Client Site Rendaring (CSR).

Use

import { useRef } from "react";
 
// gsap
import { useGSAP } from "@gsap/react";
import hasImageReveal from "@/lib/animation/hasImageReveal";
 
const containerRef = useRef<HTMLDivElement>(null!);
 
useGSAP(
  () => {
    hasImageReveal();
  },
  { scope: containerRef }
);
 
<div ref={containerRef}>
  <div className="has_image_reveal">
    <ImageComponent
      src={''}
      darkSrc={''}
      width={266}
      height={515}
      alt=""
    />
  </div>
</div>

Fade Animation Pin Content