Nucleic Photon Magnetizer

    react-anime
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.1 • Public • Published

    react-anime

    Npm Package License Unit Tests Coverage Tests Dependency Status devDependency Status

    (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.
    Just place an <Anime> component and what you want animated inside.

    Documentation | Demos | Anime.js

    Installation

    npm i react-anime -S

    Features

    • Animate nearly all CSS, SVG, & DOM attributes by adding a prop with their name (eg. opacity, backgroundColor, transform inputs like translateX).

    • Nested animations are as easy as putting an <Anime> component inside another.

    • Cascading animations through delay prop.

    • Add elements dynamically and have them animate in.

    • TypeScript definitions included.

    Usage

    import Anime, { anime } from 'react-anime';
    
    let colors = [ 'blue', 'green', 'red' ];
    
    const MyAnime = (props) => (
        <Anime delay={anime.stagger(100)} scale={[ 0.1, 0.9 ]}>
            {colors.map((color, i) => <div key={i} className={color} />)}
        </Anime>
    );

    Install

    npm i react-anime

    DownloadsWeekly Downloads

    5,201

    Version

    4.1.1

    License

    MIT

    Unpacked Size

    20.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • kennetpostigo
    • alaingalvan