I'm trying to add animation to my web page title using anime.js and jQuery, but it throws an error

Question

I have an About us web page and I need to animate this title:

I found this one, that uses anime.js and jQuery.

Here's my About.js:

import React from 'react';
import '../css/About.css'
import '../scripts/aboutAnimation'
import AboutInfo from "../components/AboutInfo";


const About = () => {
    return (
        <div className="containerAbout">
            <div className="title-container">
                <p className="title">About us...</p>
            </div>
            <div className="forest">
                <AboutInfo
                    name="Vasiliy Pupkin"
                    number="+375 29 973 79 43"
                    email="[email protected]"
                    position="top"
                />
                <AboutInfo
                    name="Aleksey Smirnov"
                    number="+375 29 337 91 07"
                    email="[email protected]"
                    position="middle"
                />
                <AboutInfo
                    name="Ivan Karpovski"
                    number="+375 29 655 74 25"
                    email="[email protected]"
                    position="down"
                />
            </div>
        </div>
    );
}

export default About;

Here's my aboutAnimation.js:

import anime from 'animejs/lib/anime.es.js';


let textWrapper = document.getElementsByClassName('title');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
    .add({
        targets: '.title .letter',
        translateX: [40,0],
        translateZ: 0,
        opacity: [0,1],
        easing: "easeOutExpo",
        duration: 1200,
        delay: (el, i) => 500 + 30 * i
    }).add({
    targets: '.title .letter',
    translateX: [0,-30],
    opacity: [1,0],
    easing: "easeInExpo",
    duration: 1100,
    delay: (el, i) => 100 + 30 * i
});

This is an error I get:

TypeError: Cannot read property 'replace' of undefined

I've deleted the 5th line and checked if textWrapper exists through console.log() command, and console shows something like this:

By the way: if I type those 2 lines in Chrome console, I get this:

Answer 1

You should use,

let textWrapper = document.getElementsByClassName('title')[0];
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

Because getElementsByClassName returns an array-like object of all child elements which have all of the given class names.

Try assigning some id to p tag and try using getElementById

let textWrapper = document.getElementById('title');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

Am Adding new Functional Component Solution! I think this might help you.

import React from 'react';
import '../css/About.css';
import AboutInfo from "../components/AboutInfo";

// THE PACKAGE I HAVE USED
import anime from 'animejs';

export default function App() {
  const animationRef = React.useRef(null);
  React.useEffect(() => {
    let textWrapper = document.getElementsByClassName('title');
    textWrapper[0].innerHTML = textWrapper[0].textContent.replace(/\S/g, "<span className='letter'>$&</span>");

    animationRef.current =
      anime.timeline({ loop: true })
        .add({
          targets: document.querySelectorAll('.title, .letter'),
          translateX: [40, 0],
          translateZ: 0,
          opacity: [0, 1],
          easing: "easeOutExpo",
          duration: 1200,
          delay: (el, i) => 500 + 30 * i
        }).add({
          targets: document.querySelectorAll('.title, .letter'),
          translateX: [0, -30],
          opacity: [1, 0],
          easing: "easeInExpo",
          duration: 1100,
          delay: (el, i) => 100 + 30 * i
        });
  }, []);
  return (
    <div className="containerAbout">
        <div className="title-container">
            <p className="title">About us...</p>
        </div>
        <div className="forest">
            <AboutInfo
                name="Vasiliy Pupkin"
                number="+375 29 973 79 43"
                email="[email protected]"
                position="top"
            />
            <AboutInfo
                name="Aleksey Smirnov"
                number="+375 29 337 91 07"
                email="[email protected]"
                position="middle"
            />
            <AboutInfo
                name="Ivan Karpovski"
                number="+375 29 655 74 25"
                email="[email protected]"
                position="down"
            />
        </div>
    </div>
);
}