React Animation Scroll

Documentation

Demo

Fade

Fade In

html

Copy Code

<ScrollAnimate animation={'fade-in'}>Fade In</ScrollAnimate>

Fade In Up

html

Copy Code

<ScrollAnimate animation={'fade-in-up'}>Fade In Up</ScrollAnimate>

Fade In Down

html

Copy Code

<ScrollAnimate animation={'fade-in-down'}>Fade In Down</ScrollAnimate>

Fade In Left

html

Copy Code

<ScrollAnimate animation={'fade-in-left'}>Fade In Left</ScrollAnimate>

Fade In Right

html

Copy Code

<ScrollAnimate animation={'fade-in-right'}>Fade In Right</ScrollAnimate>

Fade in Top Left

html

Copy Code

<ScrollAnimate animation={'fade-in-top-left'}>Fade in Top Left</ScrollAnimate>

Fade In Top Right

html

Copy Code

<ScrollAnimate animation={'fade-in-top-right'}>Fade In Top Right</ScrollAnimate>

Fade In Bottom Left

html

Copy Code

<ScrollAnimate animation={'fade-in-bottom-left'}>Fade In Bottom Left</ScrollAnimate>

Fade In Bottom Right

html

Copy Code

<ScrollAnimate animation={'fade-in-bottom-right'}>Fade In Bottom Right</ScrollAnimate>

Zoom

Zoom In

html

Copy Code

<ScrollAnimate animation={'zoom-in'}>Zoom In</ScrollAnimate>

Zoom In Up

html

Copy Code

<ScrollAnimate animation={'zoom-in-up'}>Zoom In Up</ScrollAnimate>

Zoom In Down

html

Copy Code

<ScrollAnimate animation={'zoom-in-down'}>Zoom In Down</ScrollAnimate>

Zoom In Right

html

Copy Code

<ScrollAnimate animation={'zoom-in-right'}>Zoom In Right</ScrollAnimate>

Zoom In Left

html

Copy Code

<ScrollAnimate animation={'zoom-in-left'}>Zoom In Left</ScrollAnimate>

Slide

Slide In Up

html

Copy Code

<ScrollAnimate animation={'slide-in-up'}>Slide In Up</ScrollAnimate>

Slide In Down

html

Copy Code

<ScrollAnimate animation={'slide-in-down'}>Slide In Down</ScrollAnimate>

Slide In Left

html

Copy Code

<ScrollAnimate animation={'slide-in-left'}>Slide In Left</ScrollAnimate>

Slide In Right

html

Copy Code

<ScrollAnimate animation={'slide-in-right'}>Slide In Right</ScrollAnimate>

FLip

Flip

html

Copy Code

<ScrollAnimate animation={'flip'}>Flip</ScrollAnimate>

Flip In X

html

Copy Code

<ScrollAnimate animation={'flip-in-x'}>Flip In X</ScrollAnimate>

Flip In Y

html

Copy Code

<ScrollAnimate animation={'flip-in-y'}>Flip In Y</ScrollAnimate>

Rotate

Rotate In

html

Copy Code

<ScrollAnimate animation={'rotate-in'}>Rotate In</ScrollAnimate>

Rotate In Up Left

html

Copy Code

<ScrollAnimate animation={'rotate-in-up-left'}>Rotate In Up Left</ScrollAnimate>

Rotate In Up Right

html

Copy Code

<ScrollAnimate animation={'rotate-in-up-right'}>Rotate In Up Right</ScrollAnimate>

Rotate In Down Left

html

Copy Code

<ScrollAnimate animation={'rotate-in-down-left'}>Rotate In Down Left</ScrollAnimate>

Rotate In Down Right

html

Copy Code

<ScrollAnimate animation={'rotate-in-down-right'}>Rotate In Down Right</ScrollAnimate>

Documentation

View On Github

Installation

Install with npm:

npm install React-animation-scroll

Import it into your file:

import ScrollAnimate from 'react-animation-scroll';

Add CSS into your file:

import 'react-animation-scroll/dist/index.css';

Basic Usage

Add the <ScrollAnimate> Component to the element that will be animated and include the animation prop specifying the type of animation to be used.
Remember animation properties is required

<ScrollAnimate animation={'fade-in'}>Fade In</ScrollAnimate>

Properties

infinite

Add the infinite To determine whether the animation will continue to run each time the element enters the viewpoint - default is false.

<ScrollAnimate  animation={'fade-in'} infinite={true}>Fade In</ScrollAnimate>

delay

Add the delay to Determine the delay time of the animation before it starts running, in milliseconds (ms)

<ScrollAnimate  animation={'fade-in'} delay={400}>Fade In</ScrollAnimate> The animation will be executed after a delay of 400 milliseconds.

duration

Add the duration,to determine the duration of the animation, in seconds. (s)

<ScrollAnimate  animation={'fade-in'} duration={2}>Fade In</ScrollAnimate> This animation will run for 2 seconds.