How to rotate a particular string onScroll in ReactJS ?

Last Updated : 26 Jul, 2024

In, this article, we will see how we can rotate a text while Scrolling to give a nice user experience by using an npm package react-scroll-rotate.

Prerequisites:

Syntax:

<ScrollRotate> </ScrollRotate>

We wrap the text within these tags which we want to show effects.

Steps to Create the React Application And Installing Module:

Step 1: Create the react project folder, for that open the terminal, and write the command

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: now install the dependency react-scroll-rotate by using the following command:

npm i react-scroll-rotate

Project Structure:

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

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-scroll-rotate": "^0.0.7",
    "web-vitals": "^2.1.4",
}

Example: In the App.js file, we are creating a simple welcome message where we will wrap the word geek within the ScrollRotate tags, to use it first we have imported it from react-scroll-rotate

JavaScript

import { ScrollRotate } from 'react-scroll-rotate';

function App() {

    return (
        <div className="App">
            <div style={{ marginTop: 400 }} >
                <h1 align="center">Hey!
                    <ScrollRotate>
                        <span style={{ color: "red" }}> Geek </span>
                    </ScrollRotate> Welcome To Geekforgeeks
                </h1>
            </div>
            <div style={{ marginTop: 800 }} />

        </div>
    );
}

export default App;

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