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