DEV Community 👩‍💻👨‍💻

Cover image for Using ScrollReveal.js with React Hooks
Henrique Ramos
Henrique Ramos

Posted on • Updated on

Using ScrollReveal.js with React Hooks

Today, I decided to improve my website by adding scroll reveal to it. For that, I chose jlmakes' ScrollReveal.js which solved my problem in a snap, the biggest problem was integrating it with React (Turns out, it was also a piece of cake).

The code

ScrollReveal.js provides a constructor ScrollReveal() that returns its instance. The method reveal() is responsible for registering the target element with ScrollReveal, it has a target argument (which can be a CSS Selector, a DOM Node, or an Array of Nodes) and an options argument which allows customizing the reveal behavior. That being said, we can use useRef hook to connect the React Node to ScrollReveal:

Top comments (4)

Collapse
 
lexsava profile image
Alexei Savostyanov

The components are drawn for a split second, and only then the animation starts to work. How to get rid of this?

Collapse
 
hnrq profile image
Henrique Ramos Author

Can you send me an example?

Collapse
 
lexsava profile image
Alexei Savostyanov

I used your code in codeandbox.

Collapse
 
jdprabasha profile image
Dulaj Prabasha

Oh thanks! This will definitely come in handy

🏗 We built a 100% open source community software called Forem.

 
You can contribute to the codebase or host your own.