suhmantha1 / react-motion-animate

Animate react components as they scroll in and out of view

react-motion-animate

Animate react components as they scroll in and out of view

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

react-motion-animate's Issues

Scroll Based Animations

See NYHS framer prototype

• fade in and out with scroll
• parallax (compare with react-scroll-parallax)

Upgrade framer-motion

FadeInDown Animation

framer changing negative y value to positive, so its identical to the fadeInUp variant right now

Responsive Scroll Positions

Override Requests

• visibility threshold
• transition ease override
• y-distance override
• custom animation definitions

Resize reset

recheck position on resize

github page style qa

Responsive issues:

• code offset
• scroll position overflow-x on mobile

Threshold with reset

animation only happening once with threshold input