Rc-animations NPM

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>
    );
  }
}