1.0.1 • Published 7 years ago

react-animated-enter v1.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

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

NameTypeDefaultDescription
typeString'fadeIn'Type of an animation
durationNumber1Duration 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