Text scramble animation ♡

<div class="text"></div>
<style>
    @font-face {
    font-family: winkle;
    src: url(https://dl.dropbox.com/s/cmstfkwz0h96j8m/Winkle-Regular.otf);
}

.text {
    font-family: winkle;
    font-weight 100;
    font-size 28px;
    color: gray;
</style>
<script>
class TextScramble {
    constructor(el) {
        this.el = el
        this.chars = '!<>-_\\/[]{}—=+*^?#________'
        this.update = this.update.bind(this)
    }
    setText(newText) {
        const oldText = this.el.innerText
        const length = Math.max(oldText.length, newText.length)
        const promise = new Promise((resolve) => this.resolve = resolve)
        this.queue = []
        for(let i = 0; i < length; i++) {
            const from = oldText[i] || ''
            const to = newText[i] || ''
            const start = Math.floor(Math.random() * 40)
            const end = start + Math.floor(Math.random() * 40)
            this.queue.push({
                from, to, start, end
            })
        }
        cancelAnimationFrame(this.frameRequest)
        this.frame = 0
        this.update()
        return promise
    }
    update() {
        let output = ''
        let complete = 0
        for(let i = 0, n = this.queue.length; i < n; i++) {
            let {
                from, to, start, end, char
            } = this.queue[i]
            if(this.frame >= end) {
                complete++
                output += to
            } else if(this.frame >= start) {
                if(!char || Math.random() < 0.28) {
                    char = this.randomChar()
                    this.queue[i].char = char
                }
                output += `<span class="dud">${char}</span>`
            } else {
                output += from
            }
        }
        this.el.innerHTML = output
        if(complete === this.queue.length) {
            this.resolve()
        } else {
            this.frameRequest = requestAnimationFrame(this.update)
            this.frame++
        }
    }
    randomChar() {
        return this.chars[Math.floor(Math.random() * this.chars.length)]
    }
}
// ——————————————————————————————————————————————————
// Example
// ——————————————————————————————————————————————————
const phrases = ['According to all known laws of aviation', 'there is no way that a bee should be able to fly', 'Its wings are too small to get its fat little body off the ground', 'The bee, of course, flies anyways', 'Because bees dont care what humans think is impossible.', ]
const el = document.querySelector('.text')
const fx = new TextScramble(el)
let counter = 0
const next = () => {
    fx.setText(phrases[counter]).then(() => {
        setTimeout(next, 800)
    })
    counter = (counter + 1) % phrases.length
}
next()
</script>