Created
January 27, 2019 18:12
-
-
Save timc1/244de4018bf2af0d5575cf56c5734cef to your computer and use it in GitHub Desktop.
Converts text node to an array of animated spans
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const animate = (el, delay = 0) => { | |
const node = el.childNodes[0] | |
// Check first if this node is a text node | |
if (node.nodeType === 3) { | |
const text = node.data.split('') | |
const html = text.reduce((acc, curr, index) => { | |
if (curr !== ' ') { | |
const wait = delay * index + delay | |
return (acc += `<span class="animate" style="animation-delay: ${wait}ms">${curr}</span>`) | |
} | |
return (acc += `<span> </span>`) | |
}, '') | |
el.innerHTML = html | |
} | |
} | |
animate(document.getElementById('title'), 40) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview Template