DEV Community

Cover image for Obfuscate & Reveal text animation in React using baffle.js
Hosenur Rahaman
Hosenur Rahaman

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Import baffle

import baffle from 'baffle';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Use useEffect hook to start the animation.

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

Replace your div class accordingly in this line.

const target = baffle('.obfuscated')
Enter fullscreen mode Exit fullscreen mode

Set your animation duration and delay accordingly in the last line

target.reveal(duration, delay)
Enter fullscreen mode Exit fullscreen mode

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

Latest comments (0)