React-scroll-effects NPM

React Effects Scroll

React component to animate elements on scroll with animate.css IMPORTANT: This package created about 2 years ago when i first started learing React. I want to rewrite all, but not have the time. I have now accepted the last PR for react 15 version, but codestyle still bad.

Demo page:

http://anorudes.github.io/React-Scroll-Effect/

Install

npm install react-scroll-effects --save Include "animate.css" from https://daneden.github.io/animate.css/

Usage:

import ScrollEffect from 'react-scroll-effects';

<ScrollEffect animate="fadeInUp">
  test 1
</ScrollEffect>

<ScrollEffect animate="fadeInUp">
  <div className="test">
    <span>text</span>
    <span>text</span>
    <span>text</span>
  </div>
</ScrollEffect>

<ScrollEffect className="element otherClass" animate="slideInRight" offset="-500" duration="2" callback={this.callbackAnimate.bind(this)}>
  <div className="test">
    <span>text</span>
    <span>text</span>
    <span>text</span>
  </div>
</ScrollEffect>

<ScrollEffect animate="zoomInUp" queueClass="queue" duration="2" queueDuration=".5">
  <ul>
    <li className="queue">
      test
    </li>
    <li className="queue">
      test
    </li>
    <li className="queue">
      test
    </li>
  </ul>
</ScrollEffect>

##Properties: offset - By default, animation is activated when (scrollPositionY + window.height / 2) >= (elementPositionTop). But you can specify offset. className - Your class for block. You can specify one or multiple classes separated by a space. duration - Animate duration seconds. queueClass - Class name for queue. See the demo page (third block). queueDuration - Queue interval. callback - Callback function.