react-motion-animate

1.0.6 • Public • Published

react-motion-animate

Animate react components as they scroll in and out of view

NPM JavaScript Style Guide

figure

demo

See some animations in action

Install

npm install --save react-motion-animate

Usage

import React, { Component } from 'react'
import { MotionAnimate } from 'react-motion-animate'

class Example extends Component {
  render() {
    return (
      <MotionAnimate>
        <div>Component you want to animate</div>
      </MotionAnimate>
    )
  }
}

Props

<MotionAnimate>

  • animation: fade (default), fadeInUp, scrollOpacity, scrollFadeIn, scrollFadeOut, scrollPosition
  • variant: custom animation definition (see built-in animation options above). See framer docs for variant options. See example for fadeInUp variant:
const fadeInUp = {
  hidden: {
    opacity: 0,
    y: 40
  },
  show: {
    opacity: 1,
    y: 0
  }
}
  • speed: transition duration. Default: 0.3
  • delay: transition delay. Default: 0.2
  • ease: transition ease. Default easeInOut. See framer docs for ease options
  • reset: reset the transition after the component exits from view. Default: false
  • threshold: amount of component that is visible in the viewport before the transition fires. Default: 0. Accepts values from 0 to 1.0 (with 1.0 meaning 100% of component is visible)
  • scrollPositions: trigger positions for scroll-based animations. Accepts array with percent values (0 - 1).
    • scrollOpacity. Accepts exactly 4 values. Default: [0, 0.4, 0.6, 1] ([start fade in, start being fully visible, end being fully visible, end fade out])
    • scrollFadeIn. Accepts exactly 2 values. Default: [0, 0.4]
    • scrollFadeOut. Accepts exactly 2 values. Default: [0.7, 1]
    • scrollPosition. Accepts exactly 2 values. Default: [0, 1]
  • xPos, yPos: start and end positions for scrollPosition animation. Both accept array of exactly 2 values. Default: [0, 0]

License

MIT © Use All Five

Developers: Samantha Combs Ryan Gordon

Package Sidebar

Install

npm i react-motion-animate

Weekly Downloads

99

Version

1.0.6

License

MIT

Unpacked Size

333 kB

Total Files

6

Last publish

Collaborators

  • suhmantha1
  • bretmorris
  • supryan