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 &nbsp; 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',
        });
    })
})