Skip to content

Latest commit

 

History

History
81 lines (65 loc) · 3.25 KB

documentation.md

File metadata and controls

81 lines (65 loc) · 3.25 KB
Raw

Documentation

react-anime was written in an effort to make animations easier to work with. We made this possible by wrapping the awesome flexible yet lightweight JavaScript animation library, anime in a react component. Simply pass some props and your awesome animations come to life.

Install

npm i react-anime -S

Usage

import React from 'react';
import Anime from 'react-anime';

let root = (props, state) => (
  <Anime easing="easeOutElastic"
         duration={1000}
         direction="alternate"
         loop={true}
         delay={(el, index) => index * 240}
         translateX='13rem'
         scale={[.75, .9]}>
    <div className="blue"/>
    <div className="green"/>
    <div className="red"/>
  </Anime>
);

API

The following are props that you can assign to an <Anime/> component, along with the type they expect.

Prop Type
component ReactComponent
delay (el: Element, index?: number, len?: number) => number | number
duration TimingValue ( above )
autoplay boolean
loop number | boolean
direction 'normal' | 'reverse' | 'alternate'
easing 'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' | 'easeInElastic' | 'easeOutElastic' | 'easeInOutElastic' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack' | 'easeInBounce' | 'easeOutBounce' | 'easeInOutBounce' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' | 'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo' | 'linear'
elasticity number
round number | boolean
begin (anime: AnimeInstance) => void
update (anime: AnimeInstance) => void
complete (anime: AnimeInstance) => void
[index: string] string | number | (string | number)[2] | ((el: Element, index?: number) => string | number) | { value: string | number, delay: TimingValues, duration?: TimingValues, easing?: Easing }

Note the last prop type, any other props can be used by anime, from CSS attributes to SVG attributes, you name it. :)

Transforms

Prop Type
translateX AnimationProp (Above)
translateY AnimationProp
rotate AnimationProp
scale AnimationProp
scaleX AnimationProp
scaleY AnimationProp

SVGs

Prop Type
d AnimationProp
rx AnimationProp
transform AnimationProp
scale AnimationProp
scaleX AnimationProp
scaleY AnimationProp

DOM

Prop Type
value AnimationProp
volume AnimationProp