Obfuscate & Reveal text animation in React using baffle.js

We are going to recreate this baffle

Lets get started

First we will install baffle.js package by running the following command.

npm install --save baffle

Import baffle

import baffle from 'baffle';

Assign a specific className to the div which contains the text you want to apply the obfuscated effect.
Here is an example:
In this case we have assigned the class 'obfuscated' to the div.

<div className = "col obfuscated">
        tothemoon.
</div>

Use useEffect hook to start the animation.

useEffect(() => {
        const target = baffle('.obfuscated')
        target.set({
            characters: "█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█<░▒ ▓/░>",
            speed: 100
        })
        target.start()
        target.reveal(1000, 100)
    })

Replace your div class accordingly in this line.

const target = baffle('.obfuscated')

Set your animation duration and delay accordingly in the last line

target.reveal(duration, delay)

Now you are all set, and the effect should take place as soon as the page loads.