<h3>Web Animation API- Text and Dropping Letters Effect</h3>
<p>This example wraps each character inside a sentence in its own SPAN tag, and uses WAAPI to play a keyfreme animation on each letter separately. <b>Rerun code if you missed it.</b>

<div id="header">Hi There</div>
#header{
	font-family: 'Orbitron', sans-serif; /* font style. Default uses Google fonts */
	text-shadow: 2px 2px #B4EAF3, 3px 3px #B4EAF3, 4px 4px #B4EAF3, 5px 5px #B4EAF3, 6px 6px #B4EAF3;
	font-size: 64px; /* font size of text */
	color: #207688;
	font-weight: 800;
	text-transform: uppercase;
	opacity: 1;
	position: relative;
	height: 100px;
}

#header span{ /* dynamically wrapped span element around each character */
	display: inline-block;
	opacity: 1;
}
var letterframes = [
	{ 
		transform: 'translateY(80px)',
		opacity: 0
	},
	{ 
		transform: 'translateY(-20px)', 
		opacity: 1,
		offset: 0.01
	},
	{ 
		transform: 'translateY(0)', 
		offset: 0.02,
	},
	{ 
		transform: 'translateY(0) scale(1)', 
		opacity: 1,
		offset: 0.9
	},
	{ 
		transform: 'translateY(300px) rotateZ(120deg)', 
		opacity: 0
	}
]

function wrapInSpan(text){ // split each character of text and wrap inside span tag
	return text.split('').map(letter => {
		var letter = (letter == ' ')? '&nbsp;' : letter
		return '<span>' + letter + '</span>'
	})
	.join('')
}

var header = document.getElementById('header')
var letterAnimations = [] // array of letters animation objects
var lettersArray // array of letters DOM references

header.innerHTML = (wrapInSpan(header.innerText))
lettersArray = Array.from(header.getElementsByTagName('span'))

lettersArray.map((letter, indx) =>{ // loop through lettersArray
	letterAnimations[indx] = letter.animate(letterframes, { // Call animate() on each letter and store reference to Animation() object instance
		fill: 'both',
		easing: 'ease-in',
		duration: 4000,
		delay: indx * 300
	})
})


function playLetters(){
	 return letterAnimations.map((animation) =>{ // call each animation instance play() method and return array of animation promises
		animation.play()
		return animation.finished // return promise that resolve when animation finishes
	})
}


function pauseletters(){
	letterAnimations.map((animation) =>{
		animation.cancel()
	})
}

pauseletters() // pause animation to start

Promise.all(playLetters()).then(() => { // play animation sequence and do something when they have all completed
	pauseletters() // cancel animation (so text appears again)
})
Rerun