Animate On Scroll Framer is an open source scroll reveal animation package made for React Web using tools such as framer motion.

It's easy to install and get started with:

Installation

npm install animate-on-scroll-framer 

and that's it it's installed in your React node_modules. No need for other packages or css libraries.

Usage

Using the package in your project is as straight forward as can be.

import {AnimateOnScroll} from 'animate-on-scroll-framer' //that's all you need to import 

export function Component(){
  return (
    <AnimateOnScroll animation="flipIn">
      <h1>I appear with a cool animation called flipIn</h1>
    </AnimateOnScroll>
  )
}

by default the flipIn animation has a duration of 1 second while the other animations have a default duration of 0.4 seconds. The default delay for all animations is 0.5 seconds.

Both of those and more can be changed by adding them to AnimateOnScroll as props:

<AnimateOnScroll duration={4} delay={3} aniamtion="flipIn">
  <h1>I have a longer duration and delay than my friend up top</h1>
</AnimateOnScroll>

Props

• animation : This prop is compulsory it is used to select the animation to be used
• duration: This is an optional prop that allows you to modify the duration of the animation. Values numbers and represent seconds
• delay: This is an optional prop that allows you to modify the delay of the animation. Values are numbers and represent seconds
• animateEachChild: For now this prop only applies to the flipIn animation. It is an optional prop which has a boolean value
• spring: This is another optional prop, it's used to switch on or off the spring effect in animations. It is switched on by default

License

Animate On Scroll Framer is under the MIT License.