React-transition-scroll NPM

react-transition-scroll

Easily & Beautifully create scroll transitions in react!

Introduction

react-transition-scroll is a lightweight library to easily and beautifully implement scroll animations/transition in react. It is built on top of the modern IntersectionObserver API. It covers most use cases for scroll animations and transitions.

Check out examples here!

Install

Npm:

npm install --save react-transition-scroll

Yarn:

yarn add --save react-transition-scroll

Usage

import React, { Component } from 'react'

import { TransitionScroll } from 'react-transition-scroll'
import 'react-transition-scroll/dist/index.css'

class Example extends Component {
  render() {
    return(
      <TransitionScroll options... >
        <YourComponentToAnimateOnScroll />
      </TransitionScroll>
    )
  }
}

Options

Name	Type	Default	Description
`threshold`	`number`	`0`	Percentage of element that has to be in view to trigger transition (number between 0 and 100)
`reAnimate`	`boolean`	`false`	Whether to reanimate if element enters viewport again
`baseStyle`	`Style Object`	`{}`	Base styles to apply to transition element
`hiddenStyle`	`Style Object`	`{ opacity: 1, translate: '0 12px', filter: 'blur(4px)' }`	Styles to apply to transition element when hidden
`showStyle`	`Style Object`	`{ opacity: 0, translate: '0 0', filter: 'none' }`	Styles to apply to transition element when hidden
`className`	`string`	`''`	Classname to apply to the transition element
`as`	`string`	`'div'`	Wrapper HTML tag to render the transition element as