Globally animated elements on scroll with React!
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/>