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}