Globally animated elements on scroll with React!

devs4Good_animated.mp4

react-global-animate-on-scroll is animations based on scroll in react made very simple!

Installation

npm i react-global-animate-on-scroll

Usage

Import

import AnimateOnScroll from 'react-global-animate-on-scroll';

Insert the component as the last component of App so it will have access to the entire DOM and its elements, just like the image below, the <AnimateOnScroll /> is one line above the closing fragment </>

Add the class "animate__animated" for all animations and another animation that you liked from animate.css

<h1 class="animate__animated animate__fadeInUp">An animated element</h1>

The component have a boolean prop called "animateOnce" to decide if the animations is gonna happen just for the first time or everytime. Default is set to "animateOnce=false"

<AnimateOnScroll animateOnce/>