<link href="https://fonts.googleapis.com/css?family=Kanit:200,400,500&display=swap" rel="stylesheet">
<div id="demo"><h1>RUBBERBANDER<h1></div>
body {
  background-color:#131313;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; 
	font-family: sans-serif;
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
	overflow:hidden;
}

#demo{

	
	height:350px;
	display: flex;
  align-items: center;
  justify-content: center; 
	
}

h1 {
	color:white;
	font-size:60px;
	font-weight:400;
}

@media only screen and (max-width: 540px) {
  h1 {
    font-size:40px;
  }
}
gsap.registerPlugin(SplitText)
let mySplit = new SplitText("h1", {type:"chars"})
console.log(mySplit.chars) // an array of elements

let scaleDistributor = gsap.utils.distribute({
	   base:0.2,
      amount: 1.5, 
      from:"center",
      ease: "power1"
})

let distanceDistributor = gsap.utils.distribute({
     base:-200, 
     amount: 400,        
     ease: "none"
})


gsap.from(mySplit.chars, { 
	scale:scaleDistributor,
	x:distanceDistributor,
	opacity:0,
	repeat:50,
	yoyo:true,
	stagger:{
		each:0.01,
		from:"center"
	}
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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