I recently followed a tutorial on text reveal animation and attempted to implement it in Next.Js. Unfortunately, I encountered an error message stating "TypeError: Cannot read properties of null (reading 'textContent')".
Here is the video tutorial link for reference: https://www.youtube.com/watch?v=_0yjWtaajgw
Additionally, when trying to use useRef, I still couldn't resolve the issue.
'use client';
import { useState, useRef, useEffect } from "react";
import styles from './title.module.css';
import anime from "animejs";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
export default function Title() {
useEffect(() => {
textWrapper = document.querySelector(`.${styles.title}`);
textWrapper.innerHTML = textWrapper.textContent.replace(
/\S/g,
"<span className={styles.letter}>$&</span>"
);
anime.timeline().add({
targets: ".${styles.title} .${styles.letter}",
translateY: [-200, 0],
easing: "easeOutExpo",
duration: 1500,
});
}, [])
return (
<section>
<h1 className={styles.title}>Web Designer</h1>
</section>
)
}