<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">
	<!-- some tips for success with online learning -->
	<ul>
		<li id="stat1"><span id="coursesCount">0</span> courses</li>
		<li id="stat2"><span id="lessonsCount">50</span> lessons</li>
		<li id="stat3"><span id="studentsCount">1,500</span> students</li>	
	</ul>
</div>
html, body {
	width:100%;
	height:100%;
	font-family: 'Roboto Condensed', sans-serif;
	color:#b55ace;
	margin:0;
	font-size:24px;
}

body {
	display:flex;
	justify-content:center;
	background:#1d1d1d;
	overflow:hidden;
	align-items:center;
}

* {
  box-sizing: border-box;
}

/* shshaw grid layering */
ul {
	will-change:transform;
  display: grid;
}
ul > * {
  //grid-area: 1 / 1;
}





li{
	list-style-type:none;
	font-size:2.5em;
	font-weight:300;
	margin:0;
	text-align:center;
}

li {
	text-transform:uppercase;
}




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%))
}
// learn how this code works at https://www.creativeCodingClub.com

let elements = document.querySelectorAll("li")


gsap.registerEffect({
	name:"counter",
	extendTimeline:true,
	defaults:{
		end:0,
		duration:0.5,
		ease:"power1",
		increment:1,
	},
	effect: (targets, config) => {
	let tl = gsap.timeline()
	let num = targets[0].innerText.replace(/\,/g,'')
	targets[0].innerText = num
	
	tl.to(targets, {duration:config.duration, 
						 innerText:config.end, 
						 //snap:{innerText:config.increment},
						 modifiers:{
							 innerText:function(innerText){
								 return  gsap.utils.snap(config.increment, innerText).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

							 }
						 },
						 ease:config.ease}, 0)
	
	return tl
}
})

let tl = gsap.timeline()
tl.from("#stat1", {opacity:0})
tl.counter("#coursesCount", {end:5, ease:"linear"}, "-=0.5")
tl.from("#stat2", {opacity:0}, "+=0.5")
tl.counter("#lessonsCount", {end:110, increment:5, duration:0.6}, "-=0.5")
tl.from("#stat3", {opacity:0}, "+=0.5")
tl.counter("#studentsCount", {end:1860, increment:10}, "-=0.5")


GSDevTools.create()

// learn how this was made
// get access to over 95 premium GreenSock lessons at
// https://www.creativeCodingClub.com

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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