Character Animation

Character animation involves bringing characters to life through movement in various forms of media. It typically incorporates creating a sequence of images or frames that depict the character moving in a fluid and vibrant manner.

Here is some basic code for character animation:

⚠️

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

Use

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

Customize Animation

This are optional.

<div ref={containerRef}>
  <h1 
  className="has_char_anim"  
  data-stagger="0.05"
  data-on-scroll="1"  // 1, 0
  data-translateX="45" 
  data-translateY="10"
  data-delay="0.5"
  data-duration="1"
  data-ease="power2.out"></h1>
</div>

Use Content Word Animation