rc-animate alternatives and similar libraries
Based on the "UI Animation" category.
Alternatively, view rc-animate alternatives based on common mentions on social networks and blogs.
-
framer/motion
Open source, production-ready animation and gesture library for React -
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-router-transition
painless transitions built for react-router, powered by react-motion -
react-anime
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React! -
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) -
react-gsap-enhancer
Use the full power of React and GSAP together -
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-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
gooey-react
The gooey effect for React, used for shape blobbing / metaballs (0.5 KB) 🧽 -
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-track
Track the position of DOM elements. Create cool animations. -
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
react-atv-img
A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers -
react-tween
DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead! -
react-parallax-component
Easiest way to add scroll parallax effect on the component -
react-ts-typewriter
Easy to use typewriter component written with Typescript and React 18+ in mind -
react-animatable
Tiny(~1kB) animation hooks for React, built on Web Animations API. -
auto-size-transition
A component that scale dynamically according to the internal size -
react-scroll-rotate
Very simple react component for rotate element based on scroll position -
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. -
react-tsparticles
A lightweight component to easily create interactive particles animations
Appwrite - The open-source backend cloud platform
Do you think we are missing an alternative of rc-animate or a related project?
README
rc-animate
Animate React Component easily.
Install
Usage
import Animate from 'rc-animate';
export default () => (
<Animate animation={{ ... }}>
<p key="1">1</p>
<p key="2">2</p>
</Animate>
);
Compatibility
IE / Edge | Firefox | Chrome | Safari | Electron |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
API
props
name type default description component React.Element/String 'span' wrap dom node or component for children. set to '' if you do not wrap for only one child componentProps Object {} extra props that will be passed to component showProp String using prop for show and hide. demo exclusive Boolean whether allow only one set of animations(enter and leave) at the same time. transitionName String|Object specify corresponding css, see ReactCSSTransitionGroup transitionAppear Boolean false whether support transition appear anim transitionEnter Boolean true whether support transition enter anim transitionLeave Boolean true whether support transition leave anim onEnd function(key:String, exists:Boolean) true animation end callback animation Object {} to animate with js. see animation format below.
animation format
with appear, enter and leave as keys. for example:
{
appear: function(node, done){
node.style.display='none';
$(node).slideUp(done);
return {
stop:function(){
// jq will call done on finish
$(node).stop(true);
}
};
},
enter: function(){
this.appear.apply(this,arguments);
},
leave: function(node, done){
node.style.display='';
$(node).slideDown(done);
return {
stop:function(){
// jq will call done on finish
$(node).stop(true);
}
};
}
}
Development
npm install
npm start
Example
http://localhost:8200/examples/index.md
online example: http://react-component.github.io/animate/examples/
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rc-animate is released under the MIT license.
*Note that all licence references and agreements mentioned in the rc-animate README section above
are relevant to that project's source code only.