Neurologically Paralyzing Mouseovers

    react-motion-animate

    1.0.5 • 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

    Install

    npm i react-motion-animate

    DownloadsWeekly Downloads

    79

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    330 kB

    Total Files

    7

    Last publish

    Collaborators

    • suhmantha1
    • bretmorris