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.
-
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) -
React Native Circle Menu
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion -
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers -
react-tween
DISCONTINUED. DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead! -
anim-react
simple js react animation, animation hook, web Animation interface, onclick animation, onview,onsight animation, without css animation, no transition animation, js animation class usage.
CodeRabbit: AI Code Reviews for Developers
Do you think we are missing an alternative of react-anime or a related project?
README
react-anime
(ノ´ヮ´)ノ*:・゚✧ 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 liketranslateX
).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.