react-anime alternatives and similar libraries
Based on the "UI Animation" category
-
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-router-transition
Transitions built for react-router, powered by react-motion. -
react-gsap-enhancer
Use the full power of React and GSAP together. -
react-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
React Native Circle Menu
⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Made by @Ramotion -
react-spark-scroll
Scroll-based actions and animations for react. -
react-mt-svg-lines
A React.js wrapper component to animate the line stroke in SVGs. -
react-web-animation
React components for the Web Animations API -. -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers. -
react-parallax-component
Easiest way to add scroll parallax effect on the component. -
auto-size-transition
A component that scale dynamically according to the internal children size
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,translateX).Nested animations are as easy as putting an
<Anime>component inside another.Animations can react to changes in
state.Cascading animations through
delayprop.TypeScript/Flow definitions included.
Usage
import React from 'react';
import Anime, {anime} from 'react-anime';
const App = (props) => (
<Anime delay={anime.stagger(100)}
scale={[.1, .9]}>
<div className="blue"/>
<div className="green"/>
<div className="red"/>
</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.