Skip to content
This repository has been archived by the owner on Dec 1, 2020. It is now read-only.

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

Notifications You must be signed in to change notification settings

carmelocatalfamo/rc-scroll-animate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

this project is not maintained anymore


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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published