Popularity
6.6
Declining
Activity
6.3
Growing
1,404
25
84

Monthly Downloads: 0
Programming language: TypeScript
License: MIT License
Tags: UI Animation     React     Component     Tween     Motion     Animation     Transition     Css     Animate     Anime    
Latest version: v0.2.2

react-anime alternatives and similar libraries

Based on the "UI Animation" category.
Alternatively, view react-anime alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-anime or a related project?

Add another 'UI Animation' Library

README

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](documentation.md) | 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>
);


*Note that all licence references and agreements mentioned in the react-anime README section above are relevant to that project's source code only.