<link href="https://fonts.googleapis.com/css?family=Kanit:300,400,600&display=swap" rel="stylesheet">
<div class="wrapper">
	<h1>Animating with Code is Fun</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 {
	height:100%;
	display:flex;
	align-items:center;
}


h1{
	font-size:5vw;
	font-weight:600;
	visibility:hidden;
}



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%))
}

let split
let animation = gsap.timeline({})


function init() {
	split = new SplitText("h1", {type:"chars"})
	gsap.set("h1", {autoAlpha:1})
	gsap.set(split.chars, {transformPerspective:200})
	animation.to(split.chars, {duration:1.2, rotationY:360, ease:"back(2)", stagger:{amount:1, ease:"power2.in"}})
	
	GSDevTools.create({animation:animation})
}


window.addEventListener("load", function(event) { 
  init() //do stuff
})