glitch-text

import glitchText, { animate, repeat } from 'glitch-text'
const  glitch = glitchText(element)

The quick brown fox jumps over the lazy dog.

// from left to right
animate(2000, 50, progress => {
    glitch.slice(progress)
})

The quick brown fox jumps over the lazy dog.

// from left to right as a slice of thickness 0.25
animate(2000, 50, progress => {
    glitch.slice(progress, progress + 0.25)
})

The quick brown fox jumps over the lazy dog.

// from right to left
animate(2000, 50, progress => {
    glitch.slice(-progress)
})

The quick brown fox jumps over the lazy dog.

// from right to left as a slice of thickness 0.25
animate(2000, 50, progress => {
    glitch.slice(-progress - 0.25, -progress)
})

The quick brown fox jumps over the lazy dog.

// from center to edges
animate(2000, 50, progress => {
    glitch.slice(-progress/2 + 0.5, progress/2 + 0.5)
})

The quick brown fox jumps over the lazy dog.

// from edges to center
animate(2000, 50, progress => {
    glitch.slice(progress/2, -progress/2)
})

The quick brown fox jumps over the lazy dog.

// glitch 50% of chars randomly every 2 seconds (+/- 0.5)
repeat(2000, 500, () => {
    animate(500, 10, progress => {
        if (progress > 0.5) {
            glitch.random(1 - progress)
        }
    })
})