Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 17, 2022 04:03 am GMT

Add Scroll animation to react web app using scrollreveal

Image description
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;

Original Link: https://dev.to/abodmicheal/add-scroll-animation-to-react-web-app-using-scrollreveal-34ji

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To