rc-animations

React animations on scroll

Install

npm install --save rc-animations

Animations

• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRigh
• zoomInUp
• bounce
• bounceIn
• flip
• flipInX
• flipInY
• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• flash
• pulse
• rubberBand
• shake
• swing
• tada
• wobble
• lightSpeedIn

Usage

import React, { Component } from 'react';

import {
  Hover,
  Hovered,
  BoxHover,
  ScrollAnimation,
  HoverAnimation,
  Animation
} from 'rc-animations';

class App extends Component {
  render() {
    const animation = {
      name: 'lightSpeedIn',
      duration: 3,
      fill_mode: 'both',
      opacityFrom: 0,
      opacityTo: 1,
      transformFrom: 10,
      timingFunction: 'ease-out'
    };
    return (
      <div>
        <Animation animation={animation}>
          <img src='https://drukka.hu/assets/img/drukka_logo.png' />
        </Animation>
        <BoxHover>
          <Hover
            animation={{
              name: 'zoomIn'
            }}
          >
            <img
              src='https://drukka.hu/assets/portfoliok/web_app/rendi.jpg'
              alt='drukka'
            />
          </Hover>

          <Hovered background='yellow' opacity={0.8}>
            <Animation
              animation={{
                name: 'fadeInDown',
                duration: 1,
                fill_mode: 'both'
              }}
            >
              <p>Drukka</p>
            </Animation>
            <Animation
              animation={{
                name: 'fadeInUp',
                duration: 1,
                fill_mode: 'both',
                transformFrom: 10
              }}
            >
              <p>Drukka Drukka Drukka Drukka</p>
            </Animation>
            <Animation
              animation={{
                name: 'rotateInDownLeft',
                duration: 1,
                fill_mode: 'both'
              }}
            >
              <p>Drukka Drukka Drukka Drukka</p>
            </Animation>
          </Hovered>
        </BoxHover>
        <HoverAnimation
          animation={{ name: 'lightSpeedIn', duration: 3, fill_mode: 'both' }}
        >
          <img src='https://drukka.hu/assets/img/drukka_logo.png' />
        </HoverAnimation>
        <ScrollAnimation animation={animation}>
          <img src='https://drukka.hu/assets/img/drukka_logo.png' />
        </ScrollAnimation>
      </div>
    );
  }
}

License

MIT © norco95