Frontend effect: Animate on scroll. (React JS)

If you don’t have time to create animation on scroll for your website, then this is the Library to check. It is a light package that allows you to animate your website on scroll and it works on any element on the site. There is a weekly download of over 130k on it and seems like a bit active package. The documentation is comprehensive and you can go with what works better for you. https://www.npmjs.com/package/aos

To install:

npm install aos --save
Import on the page you want to use it.

You will need to initiate with useEffect and set the duration, use data-aos to set the type of animation you want. It is a simple animation and you will see the details on the code below and the video for the result.

import React, {useEffect} from 'react'
import Aos from 'aos';
import 'aos/dist/aos.css';


function Header() {
   useEffect(() => {
       Aos.init({ duration: 2000 })
   }, [])
 return (
   <div>
       <div className='row_div'>
       <div data-aos="fade-right" className="text_one">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus necessitatibus temporibus placeat deleniti ipsam saepe obcaecati excepturi similique, quibusdam ut!</div>
       <div data-aos="fade-left" className="text_one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores minus dignissimos, dicta ipsam quam veniam. Omnis praesentium expedita culpa.</div>
       </div>
          
       <div className='row_div'>
       <div  data-aos="fade-up" className="text_one">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus necessitatibus temporibus placeat deleniti ipsam saepe obcaecati excepturi similique, quibusdam ut!</div>
       <div data-aos="fade-down" className="text_one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores minus dignissimos, dicta ipsam quam veniam. Omnis praesentium expedita culpa.</div>
       </div>
      
       <div className='row_div'>
       <div data-aos="fade-right" className="text_one">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus necessitatibus temporibus placeat deleniti ipsam saepe obcaecati excepturi similique, quibusdam ut!</div>
       <div data-aos="fade-left" className="text_one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores minus dignissimos, dicta ipsam quam veniam. Omnis praesentium expedita culpa.</div>
       </div>
      


       <div className='row_div'>
       <div data-aos="fade-up-right" className="text_one">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus necessitatibus temporibus placeat deleniti ipsam saepe obcaecati excepturi similique, quibusdam ut!</div>
       <div data-aos="fade-up-left" className="text_one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores minus dignissimos, dicta ipsam quam veniam. Omnis praesentium expedita culpa.</div>
       </div>


       <div className='row_div'>
       <div data-aos="fade-down-right" className="text_one">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus necessitatibus temporibus placeat deleniti ipsam saepe obcaecati excepturi similique, quibusdam ut!</div>
       <div data-aos="fade-down-left" className="text_one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores minus dignissimos, dicta ipsam quam veniam. Omnis praesentium expedita culpa.</div>
       </div>
      
       <div className='row_div'>
       <div data-aos="flip-left" className="text_one">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus necessitatibus temporibus placeat deleniti ipsam saepe obcaecati excepturi similique, quibusdam ut!</div>
       <div data-aos="flip-right" className="text_one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores minus dignissimos, dicta ipsam quam veniam. Omnis praesentium expedita culpa.</div>
       </div>


       <div className='row_div'>
       <div data-aos="flip-up" className="text_one">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus necessitatibus temporibus placeat deleniti ipsam saepe obcaecati excepturi similique, quibusdam ut!</div>
       <div className="text_one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores minus dignissimos, dicta ipsam quam veniam. Omnis praesentium expedita culpa.</div>
       </div>


       <div className='row_div'>
       <div data-aos="zoom-in" className="text_one">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus necessitatibus temporibus placeat deleniti ipsam saepe obcaecati excepturi similique, quibusdam ut!</div>
       <div data-aos="zoom-out-left" className="text_one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores minus dignissimos, dicta ipsam quam veniam. Omnis praesentium expedita culpa.</div>
       </div>
   </div>
 )
}

export default Header

Result.

The documentation and types of animations are in the link below. You can visit to have a bigger view of the package. https://michalsnik.github.io/aos/

Thanks for checking this.

_{Michael B, A.K.A Tykee, I am a software developer, writer and blockchain enthusiast. I write about finance, programming, tech and lifestyle. My contents are my opinions}