An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
November 17, 2022 04:03 am GMT
Original Link: https://dev.to/abodmicheal/add-scroll-animation-to-react-web-app-using-scrollreveal-34ji
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;
Original Link: https://dev.to/abodmicheal/add-scroll-animation-to-react-web-app-using-scrollreveal-34ji
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To