Open In App

How to trigger animations in a ReactJS app based on the scroll position ?

Improve
Improve
Like Article
Like
Save
Share
Report

To trigger animations in a ReactJS app based on the scroll position we can define multiple component animations for the scroll values provided by windows.scrollY. When we scroll to that defined position, some animations get triggered. This provides a very nice user experience.

Prerequisite: 

Approach

to trigger animations in a ReactJS app based on the scroll position we will be using the react-animated-css-onscroll. we can define specific scroll values and trigger the animation whenever we scroll down to the component.

Syntax:

<AnimatedOnScroll animationIn="">
{Children}
</AnimatedOnScroll>

Parameters:

  • {Children}: The component wrapped within these tags
  • animationIn: The available animation names like bounce, flash, pulse, rubberBand, shake, and many more.

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.

Steps to Create React Application and Install Required Modules:

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

Step 3: To install the package, go to the terminal and run the command

npm i react-animated-css-onscroll

Step 4: Add the Animated.css in index.html file in public folder within the head tag.

<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-animated-css-onscroll": "^1.2.1",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

Example 1: This exmple implements a simple bounce animation for component.

Javascript




// Filename - 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 Geeksforgeeks</h2>
            </AnimatedOnScroll>
        </div>
    );
}
 
export default App;


HTML




<!-- Filename - public/index.html -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <link rel="icon"
          href="%PUBLIC_URL%/favicon.ico" />
 
    <title>React App</title>
    <link rel="stylesheet"
             href=
</head>
 
<body
    style="text-align: center; margin: auto;">
    <div id="root"></div>
 
</body>
 
</html>


Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: This output will be visible on http://localhost:3000 on the brower window.

Example 2: This example implement components that display animation while scrolling down the page.

Javascript




// Filename - 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;


HTML




<!-- Filename - public/index.html -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <link rel="icon"
        href="%PUBLIC_URL%/favicon.ico" />
 
    <title>React App</title>
    <link rel="stylesheet"
        href=
</head>
 
<body
    style="text-align: center; margin: auto;">
    <div id="root"></div>
 
</body>
 
</html>


CSS




/* Filename - 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:



Last Updated : 07 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads