In this article, we will learn how we can trigger animation on a component based on their scroll position using a npm package react-animated-css-onscroll.
On many websites, we see that when we scroll, some animations get triggered. This provides a very nice user experience.
Using the module react-animated-css-onscroll, we can trigger the animation whenever we scroll down to the component.
Features of react-animated-css-onscroll:
- Lightweight module.
- No need to create functions to know the current position of the component on the webpage.
- A wide range of animations is available.
- Very easy to work with.
Prerequisite:
Introduction and installation react.js
Syntax:
<AnimatedOnScroll animationIn=""> </AnimatedOnScroll>
We wrap the component within these tags.
Here, in animation we pass animation names that are available. Some of the examples are bounce, flash, pulse, rubberBand, shake, and many more.
Creating React Application:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally.If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Installing and Adding Module:
Step 1: To install the package, go to the terminal and run the command
npm i react-animate-on-scroll
Step 2: Add the Animated.css in index.html file in public folder within the head tag.
index.html
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
Project Structure:
Example 1:-In this example, we are wrapping a simple header text within the AnimationOnScroll and passing props animationIn as bounceInRight which will give make the text float in from the right. For using AnimationOnScroll we are importing it from “react-animated-css-onScroll”.
In addition to it, we are using some in-line styling for both the header tags adding margins to it so that we can scroll in between these texts.
App.js
import {AnimatedOnScroll} from "react-animated-css-onscroll"; function App() { return ( <div className="App"> <h1 style={{marginTop:"500px"}}>Hey Geek!</h1> <AnimatedOnScroll animationIn="bounceInRight" style={{marginTop:"80px",color:"green"}}> <h2>Welcome to Geeksforneveropen</h2> </AnimatedOnScroll> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
Here, we can see that when we are scrolling down, the text “Welcome to Geeksforneveropen” slides in from the right side.
Let’s understand better with another example.
Example 2:In App.js let’s create a component Page that shows the name of the animation we are using. Let’s add some of the animations that are available and see how the component looks while scrolling.
App.js
const Page = (props) => { // creating Component Page const {children,...rest} =props; return ( <div {...rest} className="page"> {children} </div> ) } function App() { return ( <div className="App"> </div> ); } export default App; |
Now we will import AnimatedOnScroll from “react-animated-css-onscroll” in our App.js file .
Here, for every Page component, we are wrapping around the AnimatedOnScroll tag, and passing some of the animations available as props to animationIn such as bounce, jello, etc.
App.js
import {AnimatedOnScroll} from "react-animated-css-onscroll"; const Page = (props) => { const {children,...rest} =props; return ( <div {...rest} className="page"> {children} </div> ) } function App() { return ( <div className="App"> <h1 align="center">Hey! Geek Welcome</h1> <h2 align="center">Let's see some effects</h2> <div id="start"> <AnimatedOnScroll animationIn="fadeInDownBig"> <Page children="fadeInDownBig"/> </AnimatedOnScroll> <AnimatedOnScroll animationIn="bounceInLeft"> <Page children="bounceInLeft"/> </AnimatedOnScroll> <AnimatedOnScroll animationIn="wobble"> <Page children="wobble"/> </AnimatedOnScroll> <AnimatedOnScroll animationIn="tada"> <Page children="tada"/> </AnimatedOnScroll> <AnimatedOnScroll animationIn="jello"> <Page children="jello"/> </AnimatedOnScroll> <AnimatedOnScroll animationIn="bounceInRight"> <Page children="bounceInRight"/> </AnimatedOnScroll> <AnimatedOnScroll animationIn="bounce" duration="1000"> <Page children="bounce"/> </AnimatedOnScroll> </div> </div> ); } export default App; |
We will now add some styling to the page component. We are making the even child Page component’s background color green and text color white.
index.css
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } .page { height: 30px; width:300px; font-style: italic; margin-top: 20px; text-align: center; padding: 70px 0; font-size: 2rem; font-weight: 800; } #start { margin-top: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; }#start div:nth-child(2n){ background-color: rgb(6, 71, 6); color: white; } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
Reference: https://www.npmjs.com/package/react-animation-on-scroll
