Add Scroll animation to react web app using scrollreveal

firstly lets install the library using

npm i scrollreveal

Let's add the following to the component. If you're using a class component, you must do so in componentdidmount();

//firstly we import using 
import ScrollReveal from "scrollreveal";
//then we create ref 
refs = React.createRef();
//for class component 
 componentDidMount() {
    const config = {
      origin: "left",
      duration: 1000,
      delay: 150,
      distance: "500px",
      scale: 1,
      easing: "ease"
    };

then, following our config in the lifecycle, we add the following code.

ScrollReveal().reveal(this.refs.firs-animation, config);

the tag we want to animate is then given the ref="firs-animation" attribute.

I appreciate your time, Thank you.

Sample code

import React from "react";
import ScrollReveal from "scrollreveal";
class Banner extends React.Component {
 refs = React.createRef();
 componentDidMount() {
  const config = {
   origin: "left",
   duration: 1000,
   delay: 150,
   distance: "500px",
   scale: 1,
   easing: "ease",
  };
  ScrollReveal().reveal(this.refs.box1, config);
}

render() {
 return (
  <div className="banner">
   <div className="banner">
    <div className="Bann" ref="box1">
     <div className="basic">first</div>
     <div className="basic">first</div>
    </div>
    <div className="banner_basic">
     <h6>just a basic example</h6>
     <h6>text,</h6>
    </div>
   </div>
  </div>
 );
 }
}
export default Banner;

Aos works for both class and functional components , link below
https://github.com/michalsnik/aos#animations

Blog

Add Scroll animation to react web app using scrollreveal

Abod Micheal (he/him)

Join Our Newsletter. No Spam, Only the good stuff.

Related