Recently, I came across something truly mesmerizing—a headline that seemed to come to life, dancing and playing with its own text.
I was intrigued by the elegance of this effect and couldn’t resist the urge try and create it in React and dive in and uncover its secrets.
Ready to get started? Here’s a live demo of what we’re going to build!
The real excitement, unfolds within the Headline component. Below we define the letters array to hold hackerish looking characters for scrambling and some state to store the current headline that’s being rendered.
The magic begins with the
scrambleText function. We employ the
setHeadlineText function to dynamically update the headline text. As each character comes to life, we map through the text, selectively revealing characters based on the current iteration.
Simultaneously, the iteration value takes centre stage. Incrementing by
1/3, meaning that with each iteration function runs, it inches closer to revealing a character. It gradually unveils the headline's hidden charm.
But what happens when all secrets are revealed? Once the iteration value exceeds the original headline’s length, the animation takes its final bow and the original text is returned. Then the animation gracefully exits the stage, thanks to the
The climax of this process involves converting the array of characters back into a normal string for ready to render using the
In this approach, the animation timing is controlled through the usage of the
requestAnimationFrame function. This function is a powerful tool provided by browsers that allows developers to schedule a function to be executed in sync with the browser's rendering loop. It's commonly used for creating smooth animations and interactions without putting unnecessary load on the browser.
Let’s summarize how the timing and animation frame synchronization work step by step:
Setting Up the Animation:
handleMouseOverfunction, the animation is initiated. The function
scrambleTextis defined to manage the scrambling animation. The animation begins by immediately calling
requestAnimationFrame(scrambleText). This ensures that the animation starts in sync with the browser's rendering.
scrambleTextfunction starts by updating the
setHeadlineTextfunction. This update includes the scrambling effect based on the
Incrementing the Animation:
iterationvariable is increased by
1/3in each run of
scrambleText. This gradual increment controls the pace at which the characters in the headline are revealed.
Logic for Ending the Animation:
iterationreaches a point where it's equal to or greater than the length of the original text, it indicates that the scrambling animation is complete. At this point, the original text is restored, and the animation is stopped using
Continuing the Animation:
If the animation is not completed, the function returns the
scrambledTextand schedules the next animation frame by calling
requestAnimationFrame(scrambleText)again. This recursive call to
requestAnimationFrameensures a smooth and continuous animation loop until the condition for ending the animation is met.
The overall effect is that the animation progresses one frame at a time, synchronized with the browser’s rendering cycle. This synchronization ensures that the animation maintains smoothness and consistency, resulting in a visually pleasing scramble effect that appears seamless to the user.
The use of
requestAnimationFrame and the recursive nature of the animation function work together to create a timed and synchronized animation that smoothly reveals the characters in the headline over multiple frames.
Armed with this knowledge, feel free to fork the CodePen and experiment with different characters and animation speeds to customize the effect to match your unique style.
So go ahead, let your creativity flow, and let your headlines tell stories that truly enchant and captivate.