Onscreen Effects

Onscreen effects is a component wrapper for React. Onscreen Effects

This library is the child of two awesome libraries onScreen and Velocity.

Installation

Using npm:

$ npm i --save onscreen-effects

Usage

Once installed you import each effect wrapper individually. Types of effects:

• FadeIn
• ShrinkIn
• ExpandIn
• SlideDown
• SlideLeft
• SlideRight
• SlideUp

import { FadeIn, SlideDown } from 'onscreen-effects'

class extends Component {
  render() {
    <FadeIn duration={1000} delay={250}>
      ...
    </FadeIn>
  }
}

Options (props)

runMoreThanOnce

Allow the component to re-run the animation everytime it enters the viewport. Default: false

duration

The duration of the animation. Default: 400ms

delay

The delay before the animation occurs. Default: 0ms