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