Text Move Animation

This animation brings text to life by splitting it into lines and animating each line individually as it scrolls into view. Elements with the .has_text_mov_anim class animate with a smooth fade-in and 3D upward rotation effect, creating a layered reveal from top to bottom. The animation is customizable via the data-delay attribute and adds depth and motion to headings or key content sections for a more engaging user experience.

Here is some basic code for Text Move Animation:

Use

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

Customize Animation

<div ref={containerRef}>
  <h1 className="has_text_mov_anim" data-delay="0.5"></h1>
</div>