<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet">
<div class="wrapper">
	<ul>
		<li>Name: Herman Krute</li>
		<li>Alias: Pancake King</li>
		<li>Height: 6'1"</li>
		<li>Weight: 245lbs</li>
		<li>DOB: January 12, 1978</li>
		<li>Last Seen: Berlin, Germany</li>	
	</ul>
</div>
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

html, body {
	width:100%;
	height:90%;
	font-family: 'Inconsolata', monospaced;
	margin:0;
}



* {
  box-sizing: border-box;
}

li{
	list-style-type:none;
	font-size:28px;
	line-height:50px;
	font-weight:300;
	margin:0;
	color:#ddd;
	opacity:0;
}

.old {
	color:#ccc;
	padding:10px;
	background:#555;
}

.new {
	color:#c3c315;
	padding:10px;
	background:black;
}













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


const mainTl = gsap.timeline({id:"stats", repeat:1, repeatDelay:1});
const items = gsap.utils.toArray("li")

items.forEach((element, index) => {
	let text = element.innerText
	element.innerText = ""
	let tl = gsap.timeline()
	.set(element, {opacity:1})
	.to(element, {
		scrambleText:{
			text:text,
			oldClass:"old",
			newClass:"new"
		}
	})
	mainTl.add(tl, index * 0.2)
})
GSDevTools.create({ animation: mainTl });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js
  3. https://assets.codepen.io/16327/ScrambleTextPlugin3.min.js