text: import anime from 'animejs/lib/anime.es.js'
  import OnScroll from './components/OnScroll'
  
  require('./bootstrap');
  
  class App {
      constructor() {
          this.boot();
      }
  
      boot() {
          new OnScroll();
  
          let textWrapper = document.querySelector('.ml2');
          textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  
          anime.timeline({
                  loop: true
              })
              .add({
                  targets: '.ml2 .letter',
                  scale: [4, 1],
                  opacity: [0, 1],
                  translateZ: 0,
                  easing: "easeOutExpo",
                  duration: 950,
                  delay: (el, i) => 70 * i
              }).add({
                  targets: '.ml2',
                  opacity: 0,
                  duration: 1000,
                  easing: "easeOutExpo",
                  delay: 1000
              });
  
          textWrapper = document.querySelector('.ml7 .letters');
          textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  
          anime.timeline({
                  loop: true
              })
              .add({
                  targets: '.ml7 .letter',
                  translateY: ["1.1em", 0],
                  translateX: ["0.55em", 0],
                  translateZ: 0,
                  rotateZ: [180, 0],
                  duration: 750,
                  easing: "easeOutExpo",
                  delay: (el, i) => 50 * i
              }).add({
                  targets: '.ml7',
                  opacity: 0,
                  duration: 1000,
                  easing: "easeOutExpo",
                  delay: 1000
              });
  
          textWrapper = document.querySelector('.ml6 .letters');
          textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  
          anime.timeline({
                  loop: true
              })
              .add({
                  targets: '.ml6 .letter',
                  translateY: ["1.1em", 0],
                  translateZ: 0,
                  duration: 750,
                  delay: (el, i) => 50 * i
              }).add({
                  targets: '.ml6',
                  opacity: 0,
                  duration: 1000,
                  easing: "easeOutExpo",
                  delay: 1000
              });
  
          textWrapper = document.querySelector('.ml12');
          textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  
          anime.timeline({
                  loop: true
              })
              .add({
                  targets: '.ml12 .letter',
                  translateX: [40, 0],
                  translateZ: 0,
                  opacity: [0, 1],
                  easing: "easeOutExpo",
                  duration: 1200,
                  delay: (el, i) => 500 + 30 * i
              }).add({
                  targets: '.ml12 .letter',
                  translateX: [0, -30],
                  opacity: [1, 0],
                  easing: "easeInExpo",
                  duration: 1100,
                  delay: (el, i) => 100 + 30 * i
              });
  
  
          textWrapper = document.querySelector('.ml10 .letters');
          textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  
          anime.timeline({
                  loop: true
              })
              .add({
                  targets: '.ml10 .letter',
                  rotateY: [-90, 0],
                  duration: 1300,
                  delay: (el, i) => 45 * i
              }).add({
                  targets: '.ml10',
                  opacity: 0,
                  duration: 1000,
                  easing: "easeOutExpo",
                  delay: 1000
              });
  
          textWrapper = document.querySelector('.ml3');
          textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  
          anime.timeline({
                  loop: true
              })
              .add({
                  targets: '.ml3 .letter',
                  opacity: [0, 1],
                  easing: "easeInOutQuad",
                  duration: 2250,
                  delay: (el, i) => 150 * (i + 1)
              }).add({
                  targets: '.ml3',
                  opacity: 0,
                  duration: 1000,
                  easing: "easeOutExpo",
                  delay: 1000
              });
  
          textWrapper = document.querySelector('.ml9 .letters');
          textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  
          anime.timeline({
                  loop: true
              })
              .add({
                  targets: '.ml9 .letter',
                  scale: [0, 1],
                  duration: 1500,
                  elasticity: 600,
                  delay: (el, i) => 45 * (i + 1)
              }).add({
                  targets: '.ml9',
                  opacity: 0,
                  duration: 1000,
                  easing: "easeOutExpo",
                  delay: 1000
              });
  
  
          textWrapper = document.querySelector('.ml13');
          textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
  
          anime.timeline({
                  loop: true
              })
              .add({
                  targets: '.ml13 .letter',
                  translateY: [100, 0],
                  translateZ: 0,
                  opacity: [0, 1],
                  easing: "easeOutExpo",
                  duration: 1400,
                  delay: (el, i) => 300 + 30 * i
              }).add({
                  targets: '.ml13 .letter',
                  translateY: [0, -100],
                  opacity: [1, 0],
                  easing: "easeInExpo",
                  duration: 1200,
                  delay: (el, i) => 100 + 30 * i
              });
  
  
          anime.timeline({
                  loop: true
              })
              .add({
                  targets: '.ml15 .word',
                  scale: [14, 1],
                  opacity: [0, 1],
                  easing: "easeOutCirc",
                  duration: 800,
                  delay: (el, i) => 800 * i
              }).add({
                  targets: '.ml15',
                  opacity: 0,
                  duration: 1000,
                  easing: "easeOutExpo",
                  delay: 1000
              });
  
  
          textWrapper = document.querySelector('.ml16');
          textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
          anime.timeline({
              loop: true
          })
          .add({
              targets: '.ml16 .letter',
              translateY: [-100, 0],
              easing: "easeOutExpo",
              duration: 1400,
              delay: (el, i) => 30 * i
          }).add({
              targets: '.ml16',
              opacity: 0,
              duration: 1000,
              easing: "easeOutExpo",
              delay: 1000
          });
  
      }
  }
  
  $(document).ready(function () {
      new App();
  });