Hi, Developer! Learn from this article how to add scrolling animation effects to any element. With React's AOS library, you can give any part of your website a cool animation as users scroll, which makes the website better and also increases user engagement.
Let's get started!
Follow these steps to implement the scrolling animation.
- Install the AOS library in your project
- Import the library and CSS in Your Specific File
- Initialize the AOS Library
- Implement animation in an element with the data-aos attribute.
These steps are for those who have already done the task. There is no need to worry if these steps are unclear for you. I will break down each step line by line and provide a full explanation in detail to help you understand.
Step 1: Install AOS Library into Your Project
Follow these commands to install and activate scroll animations.
// For yarn 👇
yarn add aos
// For npm 👇
npm install aos --save
// For bower 👇
bower install aos --saveOnce you've installed it, just bring the AOS library and its CSS into your desired component. Your scroll animations are good to go.
Step 2: Import the library and CSS in your specific file component.
import AOS from 'aos';
import 'aos/dist/aos.css';
Step 3: Initialize the AOS Library
After importing the AOS library and CSS, initialize AOS in the 'useEffect' hook. I will guide you through the simple steps of initializing the AOS library in both functional and class components.
For functional components:
useEffect(() => {
AOS.init({
duration: 500,
});
}, [])For Class Components:
componentDidMount() {
AOS.init({
duration: 500,
});
}Step 4: Implement animation in an element with the data-aos attribute.
Now that the library has been initialized, Here comes the fantastic part: simply go to the AOS ANIMATION site, copy the animation code, and paste it wherever you want, such as in a 'div,' 'img,' or 'p,' and make sure to include the 'data-aos' attribute.
You can customize your animations using different attributes, like [data-aos-easing="linear"] or [data-aos-duration="1500"]. Check out the link to see all the options and make your project look just the way you want!
For example
<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> ..... </div>Below is the complete code, which you will understand how it works and can use in your project without any problems.
import React, { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';
function App() {
useEffect(() => {
AOS.init({
duration: 800, // Animation duration in milliseconds
offset: 100, // Offset (in pixels) from the top of the page
easing: 'ease-in-out', // Easing type for the animation
delay: 200, // Delay (in milliseconds) before the animation starts
once: true // If true, the animation will only happen once
});
}, []);
return (
<h1 data-aos="fade-up">
Congratulation we did this
</h1>
);
};
export default App;
Customize the animation attributes inside the data-aos attribute according to your preferences.
This example initiates the AOS library, applies a fade-up animation to the specified <h1>, and allows you to customize the animation behavior as needed.
Conclusion
I trust it provides value to your React project. Scroll effects are the best way to include amazing animations on your landing page while encouraging your product or web app skills. The AOS library is useful, and I recommend you try it.
If you have any questions regarding this article or any other web development issue, you can ask them in the question box given below, and you will get an answer as soon as possible.