rc-scroll-animate

rc-scroll-animate

Simple react component for animating DOM elements on scroll with animate.css or custom classes.

---

Getting start

Install

$ npm install --save rc-scroll-animate

Usage

Link Animate.css in your index.html

import React, { Component } from 'react'
import ScrollAnimate from 'rc-scroll-animate'

export default class Example extends Component {
  render () {
    return (
      <div>
        <h1>Hello World!</h1>
        <ScrollAnimate animationClassName='fadeInUp' percentage={50} >
          <p>Some text.. some text..</p>
        </ScrollAnimate>
      </div>
    )
  }
}

Options

Props	Type	Description
percentage	number, Default: 50 (min: 0, max: 100)	Percentage of element position in window size when start animation
animationClassName	string, Required	Name of the class that will be added when animation trigger
hidden	boolean, Default: true	Hide element if animation not fired
loop	boolean, Default: false	Animation loop on scrolling

Customize

If you want to customize animation timing and some else or you do not want to use Animate.css , just insert in your css class .animated and a class for animating DOM Element.

.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* This will be animationClassName */
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}