# rc-scroll-animate

> react component for animations on scroll

Latest version **1.1.0** (published 2017-02-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install rc-scroll-animate
pnpm add rc-scroll-animate
yarn add rc-scroll-animate
bun add rc-scroll-animate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-02-04 |
| First published | 2017-02-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | carmelo.catalfamo92@gmail.com |
| Maintainers | carmelocatalfamo |
| Keywords | rc-scroll-animate, react, scroll, animation |

## Links

- npm: https://www.npmjs.com/package/rc-scroll-animate
- Repository: https://github.com/carmelocatalfamo/rc-scroll-animate
- Homepage: https://github.com/carmelocatalfamo/rc-scroll-animate#readme
- Issues: https://github.com/carmelocatalfamo/rc-scroll-animate/issues
- npm.io page: https://npm.io/package/rc-scroll-animate

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2017-02-04
- 1.0.8 — 2017-02-04
- 1.0.7 — 2017-02-04
- 1.0.6 — 2017-02-04
- 1.0.5 — 2017-02-04
- 1.0.4 — 2017-02-04
- 1.0.3 — 2017-02-04
- 1.0.2 — 2017-02-04
- 1.0.1 — 2017-02-04
- 1.0.0 — 2017-02-04

## README

## 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](https://github.com/daneden/animate.css) in your *index.html*

```jsx
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.
```css
.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;
}
```

---
_Source: https://npm.io/package/rc-scroll-animate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._