37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
const texts = document.querySelectorAll('.animate-me')
|
|
var letterSets = Array.from(texts).map((element) => {
|
|
return element.innerText.split(' ');
|
|
})
|
|
|
|
letterSets = letterSets.map((set) => set.map((letter) => letter + '\xa0'))
|
|
|
|
var letterNodes = [];
|
|
|
|
for (let i = 0; i < texts.length; i++) {
|
|
letterNodes[i] = []
|
|
texts[i].textContent = ''
|
|
letterSets[i].forEach(letter => {
|
|
const letterNode = document.createElement('span');
|
|
letterNode.className = 'animate-letter'
|
|
// Replace spaces with so it has width after letterizing
|
|
letterNode.textContent = letter === " " ? "\xa0" : letter;
|
|
texts[i].before(letterNode)
|
|
letterNodes[i].push(letterNode);
|
|
});
|
|
}
|
|
|
|
texts.forEach((textNode, idx) => {
|
|
textNode.parentNode.addEventListener('click', () => {
|
|
anime.animate(letterNodes[idx], {
|
|
// Property keyframes
|
|
y: [
|
|
{ to: anime.stagger(['-10rem', '-1rem']), ease: 'outExpo', duration: 150 },
|
|
{ to: 0, ease: 'outBounce', duration: 800, delay: 50 }
|
|
],
|
|
// Property specific parameters
|
|
delay: (_, i) => i * 50, // Function based value
|
|
ease: 'inOutCirc',
|
|
});
|
|
})
|
|
})
|