<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 == ' ')? ' ' : 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)
})
External CSS
This Pen doesn't use any external CSS resources.