<div class="demo">
	
</div>
<div class="footer">
	<a href="https://courses.snorkl.tv/bundles/creative-coding-club" target="_blank">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/herman.svg" alt="" width="60"></a>
	
</div>
body, html {
	font-family:sans-serif;
	background:#ffcc33;
	height:100%;
	position:relative;
	overflow:hidden;
	margin:0;
}

.demo {
	visibility:hidden;
}

.demo div {
	position:absolute;
	display:inline-block;
	left:50%;
	top:50%;
	font-weight:800;
	font-size:60px;
	color:#1C70A7;
	transform:translate(-50%, -50%);
}

.footer {
	position:fixed;
	bottom:0;
	padding:20px;
}
let phrases = ["Happy", "New Year", "to all", "who believe", "in", "new", "years", "😍"]
let demo = document.querySelector(".demo")
let animation = gsap.timeline({repeat:5, repeatDelay:0.6})

function createLayers(){
	phrases.forEach(value => {
		let layer = document.createElement("div")
		layer.innerHTML = value
		demo.appendChild(layer)
	})
}

function animateText() {
	let layers = document.querySelectorAll(".demo div")
	layers.forEach(function(element, index){
		animation.fromTo(element, {opacity:0, scale:0}, {scale:1, opacity:1, repeat:1, yoyo:true, yoyoEase:true, repeatDelay:0.3})
	})
	gsap.set(".demo", {visibility:"visible"}) 
}

createLayers()
animateText()


/* learn the GreenSock Animation Platform (GSAP 3) https://courses.snorkl.tv/courses/gsap-3-express || only $4.95 per month */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/EasePack.min.js