1.0.1 • Published 7 years ago
react-animated-enter v1.0.1
react-animated-enter
Higher order component that runs an animation when component entering the viewport.
Installation
npm install react-animated-enter --save
Usage
As a higher order component.
import React, { Component } from 'react';
import animatedEnter from 'react-animated-enter';
class MyComponent extends Component {
// Component content
}
export default animatedEnter(type, duration)(MyComponent);
As a decorator
Requires babel-plugin-transform-decorators-legacy
import React, { Component } from 'react';
import animatedEnter from 'react-animated-enter';
@animatedEnter(type, duration)
export default class MyComponent extends Component {
// Component content
}
Parameters
Name | Type | Default | Description |
---|---|---|---|
type | String | 'fadeIn' | Type of an animation |
duration | Number | 1 | Duration of animation (in seconds) |
Types list
To see demos of animations look here
- bounceIn,
- bounceInDown,
- bounceInUp,
- bounceInRight,
- bounceInLeft,
- fadeIn,
- fadeInUp,
- fadeInUpBig,
- fadeInDown,
- fadeInDownBig,
- fadeInLeft,
- fadeInLeftBig,
- fadeInRight,
- fadeInRightBig,
- flipInX,
- flipInY,
- lightSpeedIn,
- rotateIn,
- rotateInDownLeft,
- rotateInDownRight,
- rotateInUpLeft,
- rotateInUpRight,
- slideInDown,
- slideInLeft,
- slideInRight,
- slideInUp,
- rollIn,
- zoomIn,
- zoomInDown,
- zoomInLeft,
- zoomInRight,
- zoomInUp