Fade Animation

Fade animation is a popular visual effect used in graphical user interfaces and multimedia applications. It transitions an element's opacity from one value to another. This transition creates a fading effect, where the element gradually appears or disappears from view.

To implement fade animations, use the below basic code:

⚠️

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

Use

import { useRef } from "react";
 
// gsap
import { useGSAP } from "@gsap/react";
import hasFadeAnim from "@/lib/animation/hasFadeAnim";
 
const containerRef = useRef<HTMLDivElement>(null!);
 
useGSAP(
  () => {
    hasFadeAnim();
  },
  { scope: containerRef }
);
 
<div ref={containerRef}>
  <div className="has_fade_anim">...content</div>
  <div className="has_fade_anim">...content</div>
  <div className="has_fade_anim">...content</div>
</div>

Word Animation Image Reveal Animation