Tilt effect in ReactJS

In this article, we will see how to create a tilt effect for a div or any HTML element in Reactjs. This tilt effect can enhance the UI of our web application so that it seems more realistic and better. We will do this using the Tilt Component from the “react-parallax-tilt” package/module.

Approach: We will need to use the Tilt Component from the ‘react-parallax-tilt’ package. We will first download it using the npm into our React project. Then we will import it into our React application. And then we are ready to go.

We can also modify the tilt behavior of our Tilt Component using its props. Below is a complete reference of the most generally used props to modify the default behavior of the Tilt Component as per our needs:

• tiltEnable: boolean (Default value: true). To enable/disable the tilt effect.
• tiltReverse: boolean (Default value: false). To reverse the tilt direction.
• tiltMaxAngleX: number (Default value: 20), Range: 0 – 90. To specify the max tilt rotation (degrees) on the x-axis.
• tiltMaxAngleY: number (Default value: 20), Range: 0 – 90. To specify the max tilt rotation (degrees) on the y-axis.
• glareEnable: boolean (Default value: false). To enable/disable glare effect.
• glareMaxOpacity: number (Default value: 0.7), Range: 0 – 1. To determine the maximum glare opacity (0.5 = 50%, 1 = 100%, etc.).
• glareColor: string (Default value: #ffffff). To set the color of the glare effect.
• glareReverse: boolean (Default value: false). To reverse the glare direction.
• scale: number (Default value: 1). To determine the scale of the component (1.5 = 150%, 2 = 200%, etc.).
• perspective: number (Default value: 1000). It defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.
• gyroscope: boolean (Default value: false). To enable/disable device orientation detection.

Steps (Creating your React Application):

Step 1: First of all, let’s create a simple react application using ‘create-react-app’. Open your command prompt or you can use a code editor like VSCode and use its command prompt and type the following command:

npx create-react-app foldername

Step 2: Now install the ‘react-parallax-tilt’ package using npm.

npm install react-parallax-tilt

Step 3: Now inside your react application, create a new ‘.js’ file inside your src folder. Here, for example, I have created a ‘TiltComponent.js’ file. Similarly, also create a CSS file like ‘TiltComponent.css’ for the same js file where we will be adding our stylesheets.

cd src
touch TiltComponent.js TiltComponent.css

Project Structure: Your project should look like this:

Folder Structure

Step 4: Now inside ‘TiltComponent.js’, we will first create a functional component and export it by default. Also, we will need to import our ‘TiltComponent.css’ file to apply styling to our elements. We will also need to import the Tilt component from the ‘react-parallax-tilt’ module. Now we are ready to create our first tilt component. Inside it, we can add a div as a container to store our other elements like images, headings, paragraphs, links, etc. Here, I have created a div with className ’tiltComponent’ using which we can style it later in our desired way.

TiltComponent.js: The complete code should look like this in the TiltComponent.js file:

Step 5: Now let’s style our ’tiltComponent’ using CSS inside the ‘TiltComponent.css’ file.

TiltComponent.css: The complete code should look like this in the TiltComponent.css file:

Step 6: Now just import your TiltComponent into the ‘App.js’ file. Here, I have added it inside a div which is nothing but just acting as a background, and added some styling to it inside ‘App.css’. If you wish, you can add it as per your requirements.

App.js: The complete code should look like this in the App.js file:

App.css: The complete code should look like this in the App.css file:

Steps to run the application: Write the below command in the terminal to run the application:

npm start

Output: Head towards your browser to see the output. If it’s not shown, go to ‘http://localhost:3000/‘ to see your output.

Output