Custom

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2021 by aaditya-cpu (http://jsbin.com/yubujeg/2/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<style id="jsbin-css">
.ml15 {
  font-weight: 500;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: inherit;
}

.ml15 .word {
  display: inline-block;
  line-height: 1em;
}
@media only screen and (max-width: 600px){

  .ml15 {
  font-weight: 400;
    font-size: 20px; }

}
</style>
</head>
<body>
<!--box me dalna-->
<h1 class="ml15">
  <span class="word">We</span>
  <span class="word">are</span>
  <span class="word">the</span>
  <span class="word">Global</span>
  <span class="word">Champs!</span>
</h1>

<!--footer ke upar-->
<script id="jsbin-javascript">
anime.timeline({loop: true})
  .add({
    targets: '.ml15 .word',
    scale: [10,1],
    opacity: [0,1],
    easing: "easeOutCirc",
    duration: 400,
    delay: (el, i) => 400 * i
  }).add({
    targets: '.ml15',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 3000
  });
</script>
<!--yaha tak dalna-->
</body>
</html>