title: AnimeJs implementation with react doesn't work
body: <p><strong>I've implemented a simple Anime Js text animation into my react app; I have other other Anime Js projects which perform perfectly but I just don't see the issue with this one, and why it doesn't work.</strong></p>
  
  <p><strong>TextColourChangeLoader.js</strong></p>
  
  <pre><code>import React from 'react';
  
  import './styles/TextColourChangeLoader.css';
  
  import anime from 'animejs';
  
  export default class TextColourChangeLoader extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              text: "",
              play: false
          }
      }
  
      componentDidMount() {
          this.setState({
              text: this.props.textToRender,
              play: true
          })
      }
  
      componentWillUnmount() {
          this.setState({
              text: '',
              play: false
          })
      }
  
      playAnimeColourChange = () =&gt; {
          if(this.state.play) {
              anime({
                  targets: '.loader-letter',
                  delay: anime.stagger(100),
                  duration: 1000,
                  scale: anime.stagger(2, {easing: "easeInElastic"}),
                  color: '#7DE2FC',
                  direction: 'alternate',
                  easing: 'easeInOutElastic(1,.8)',
                  loop: true,
                  loopComplete: function() {
                      console.log('done')
                  }
              });
          }
      }
  
      render() {
          this.playAnimeColourChange();
          return (
              &lt;div id="loader-text-holder"&gt;
                  {this.state.text.split('').map((letter, i) =&gt; {
                      return &lt;span id={letter === " " ? "loader-letter-space" : "loader-letter"+i} key={i} className="loader-letter text"&gt;{letter}&lt;/span&gt;
                  })} 
                  {this.playAnimeColourChange()}
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p><strong>Example.js</strong></p>
  
  <pre><code>import React from 'react';
  
  import './styles/ViewLoaderWithText.css';
  import anime from 'animejs';
  
  import TextColourChangeLoader from './TextColourChangeLoader';
  
  
  export default class ViewLoaderWithText extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              play: false
          }
      }
  
      componentDidMount() {
          this.setState({
              play: true
          })
      }
  
  
      playAnime = () =&gt; {
          if(this.state.play) {
              let loaderAnime = anime({
                  targets: '.view-loader-shape',
                  delay: anime.stagger(100, {start: -100}),
                  translateY: [{value: -25, easing: 'easeInCubic'}, {value: 0, easing: 'easeOutCirc'}],
                  background: '#7DE2FC',
                  direction: 'alternate',
                  easing: 'easeInOutElastic(1,.8)',
                  duration: 1000,
                  loop: true,
                  autoplay: true
              });            
          }
      }
  
      render() {
          return (
              &lt;div id="view-loader-wrapper"&gt;
                  &lt;div id="loader-shape-holder"&gt;
                      &lt;span className="view-loader-shape" id="view-loader-shape1"&gt;&lt;/span&gt;
                      &lt;span className="view-loader-shape" id="view-loader-shape2"&gt;&lt;/span&gt;
                      &lt;span className="view-loader-shape" id="view-loader-shape3"&gt;&lt;/span&gt;
                      &lt;span className="view-loader-shape" id="view-loader-shape4"&gt;&lt;/span&gt;
                      &lt;span className="view-loader-shape" id="view-loader-shape5"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;TextColourChangeLoader textToRender="Verifying email"/&gt;
                  {this.playAnime()}
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p><strong>The anime js instance in the Example.js file works as it should; however the TextColourChangeLoader.js animation doesn't run. I've tried logging to the console each time a loop completes with the loopComplete callback option, and it shows that the loop is running however, the animation doesn't. I've also tried only running the TextColourChangeLoader.js animation, but that still doesn't work. What could be a possible explanation for this? Anything helps.</strong></p>