rc-scroll-animate

1.1.0 • Public • Published

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;
}

Package Sidebar

Install

npm i rc-scroll-animate

Weekly Downloads

1

Version

1.1.0

License

ISC

Last publish

Collaborators

  • carmelocatalfamo