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
Oldest comments (0)