<link href="https://fonts.googleapis.com/css?family=Kanit:300,400,600&display=swap" rel="stylesheet">
<div class="wrapper">
  <h1>alternate direction</h1>
</div>

html, body {
  width:100%;
  height:100%;
  font-family:Kanit;
  color:white;
  margin:0;
  font-size:19px;
}

body {
  display:flex;
  justify-content:center;
  background:#1d1d1d;
  overflow:hidden;
  align-items:center;
}
.wrapper {
  perspective:800px;
  height:100%;
  display:flex;
  align-items:center;
  visibility:hidden;
}


h1{
  font-size:6vw;
  font-weight:600;
}



body {
  overflow:hidden;
  background-image:linear-gradient(12deg, rgba(193, 193, 193,0.05) 0%, rgba(193, 193, 193,0.05) 2%,rgba(129, 129, 129,0.05) 2%, rgba(129, 129, 129,0.05) 27%,rgba(185, 185, 185,0.05) 27%, rgba(185, 185, 185,0.05) 66%,rgba(83, 83, 83,0.05) 66%, rgba(83, 83, 83,0.05) 100%),linear-gradient(321deg, rgba(240, 240, 240,0.05) 0%, rgba(240, 240, 240,0.05) 13%,rgba(231, 231, 231,0.05) 13%, rgba(231, 231, 231,0.05) 34%,rgba(139, 139, 139,0.05) 34%, rgba(139, 139, 139,0.05) 71%,rgba(112, 112, 112,0.05) 71%, rgba(112, 112, 112,0.05) 100%),linear-gradient(236deg, rgba(189, 189, 189,0.05) 0%, rgba(189, 189, 189,0.05) 47%,rgba(138, 138, 138,0.05) 47%, rgba(138, 138, 138,0.05) 58%,rgba(108, 108, 108,0.05) 58%, rgba(108, 108, 108,0.05) 85%,rgba(143, 143, 143,0.05) 85%, rgba(143, 143, 143,0.05) 100%),linear-gradient(96deg, rgba(53, 53, 53,0.05) 0%, rgba(53, 53, 53,0.05) 53%,rgba(44, 44, 44,0.05) 53%, rgba(44, 44, 44,0.05) 82%,rgba(77, 77, 77,0.05) 82%, rgba(77, 77, 77,0.05) 98%,rgba(8, 8, 8,0.05) 98%, rgba(8, 8, 8,0.05) 100%),linear-gradient(334deg, hsl(247,0%,2%),hsl(247,0%,2%))
}

gsap.registerPlugin(GSDevTools, SplitText)


function init() {
  gsap.set(".wrapper", {autoAlpha:1})
  let split = new SplitText("h1", {type:"chars"})
  let chars = split.chars
  let animation = gsap.timeline()
  
  
  animation.from(chars, {
    y:gsap.utils.wrap([-100, 100]),
    rotation:gsap.utils.wrap([-100, 100]),
    opacity:0, stagger:{each:0.05, from:"start"} // try center ;)
  })
  
  
  
  
  GSDevTools.create({animation:animation})
}

window.addEventListener("load", init)