Word Animation

This animation enhances text by animating individual words as they appear in view. Elements with the .has_word_anim class are split into words and revealed one by one with optional horizontal or vertical movement, opacity fade, and staggered timing. Custom attributes like data-stagger, data-translateX, data-translateY, and data-delay allow flexible control. Words wrapped with .no-animate are excluded, ensuring precise animation for headings, intros, or key phrases.

Here is some basic code for Word animation:

Use

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

Customize Animation

<div ref={containerRef}>
  <h1 
  className="has_word_anim"  
  data-stagger="0.05"
  data-on-scroll="1"  // 1, 0
  data-translateX="45" 
  data-translateY="10"
  data-delay="0.5"></h1>
</div>