AnimeJS with React Transition Group

AnimatedRoutes.js

import React, { Component } from 'react';
import { withRouter, Switch } from 'react-router-dom';
import { TransitionGroup, Transition } from 'react-transition-group';
import anime from 'animejs';
import TransitionElements from './TransitionElements';

class AnimatedRoutes extends Component {
  state = {
    location: this.props.location,
    transitioning: true,
  };

  handleEnter = () => {
    this.setState({ transitioning: true }, () => {
      anime
        .timeline({ loop: false })
        .add({
          targets: '.transition-elements',
          easing: 'easeOutSine',
          translateY: ['-100%', 0],
          duration: 500,
        })
        .add({
          targets: '.loading-text .loading-text__char',
          translateY: [70, 0],
          opacity: [0, 1],
          easing: 'easeOutExpo',
          delay(el, i) {
            const delay = i * 50;
            return delay + 1000;
          },
        })
        .add({
          targets: ['.transition-elements'],
          translateY: [0, '-100%'],
          easing: 'easeOutSine',
          duration: 500,
        });
      setTimeout(() => {
        this.setState({ transitioning: false, location: this.props.location });
      }, 3000);
    });
  };

  render() {
    const { children } = this.props;
    const { location, transitioning } = this.state;
    const currentKey = this.props.location.pathname.split('/')[1] || '/';

    return (
      <TransitionGroup className={transitioning ? 'app is-transitioning' : 'app'}>
        <TransitionElements transitioning={transitioning} />
        <Transition key={currentKey} timeout={3000} onEnter={this.handleEnter} appear>
          <div className="page-wrapper">
            <Switch location={location} data={transitioning}>
              {children}
            </Switch>
          </div>
        </Transition>
      </TransitionGroup>
    );
  }
}

export default withRouter(AnimatedRoutes);