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

Features

😮‍💨 Simple syntax
👌 Honors prefers-reduced-motion media query
🚀 Uses IntersectionObserver API (Blazingly fast)
⛔ 0 dependencies!

License

MIT © alianza