UI Animation

Animate transitions

Newest releases

JP1016 🌠 a tiny react library that can be used to create a frosted glass icon effect.
 

ashutosh1919 🚀 Smooth Liquid Swipe Animation to transition between different components.
 

aman-atg Animated Product Card with the help of React and SCSS (PWA)
 

jlkiri React Easy Flip A lightweight React library for smooth FLIP animations (2.3KB minified + gzipped) Demo https://demo.jlkiri.now.sh/ Install npm install react-easy-flip OR yarn add react-easy
 

catalinmiron react-typical React Animated typing in ~400 bytes 🐡 of JavaScript. DEMO Based on awesome typical library by @camwiegert Youtube Video Tutorial Install npm install --sa
 

pylnata Teddy games https://pylnata.github.io/teddy/ React App with cartoon animations and games for kids. Developed just for fun and to learn React-spring library for animations. Used: create-react-app; styled-compon
 

deanius Storybook-Animate Storybook is great for designing indivdual states of your application's components. But your users don't see your app as individual states, but a series of states that flow together over time. If sto
 

bluebill1049 React Simple Animate Animation from style A to B CSS keyframes animation Chain up animation sequences Tiny size without other dependency Install $ npm install react-s
 
20.3k

pmndrs react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces. This library
 

lucagez Sky React component for interactive backgrounds Demo https://codepen.io/lucagez/full/oQoRyK/ Installation $ npm install --save react-sky Usage import React, { Component } from 'r
 

sghall React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fine-grained control of dela
 

aholachek Comparison with other React FLIP libraries Feature react-flip-move react-overdrive react-flip-toolkit Animate position ✅ ✅
 

raphamorim React Motions Compose React Animations using High-Order Functions or Components React-Motions is a mix of ideas from Recompose and Animate.css. In fact, react-motions is a set of pure functions entirely based on
 

sghall Resonance This library is experimental This is a fork of react-move that animates by modifying the DOM directly. It is much faster in some cases and the entire library (including all dependencies) is just
 

sghall React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fine-grained control of dela
 

nitin42 Looking for maintainers. Please reach out to me if you're interested! Animate Components Elemental components for doing animation in React Packages This repository uses Lerna to organise the codebase.
 

drcmda *** This project has been merged into react-spring: https://github.com/drcmda/react-spring *** Changes and bugfixes will go there instead. -- A springy, composable parallax-scroller for React. npm install react-springy-para
 

tkh44 data-driven-motion Easily animate your data in react This is a small wrapper around react-motion with the intention of simplifying the api for my most common use case. Demos and Docs npm install -S d
 

lit-forest react-magic A collection of magic animations for react components. Although React provides a way to implement arbitrary animations, it is not an easy task to do it, even for simple animations. That's where react-ma
 

clari react-tween Tween animation for React components Demos Animate opacity and color with <Tween /> Animate bars with <Tween.TransitionGroup /> Usage <Tween /> is used to
 

moarwick react-mt-svg-lines Bring your SVGs to life Live Demo A React.js wrapper component that lets you trigger an "animated lines" effect within your SVGs by applying CSS animations*. Use it to add visual interes
 

azazdeaz react-gsap-enhancer Demos Why? How it works? Usage API A React component enhancer for applying GSAP animations on components without side effects. For simple use cases you
 

maisano React Router Transition Painless transitions for React Router, powered by React Motion. Example site. Requirements To use the latest version of this package (2.x), you'll need to use a version of React compa
 

souporserious ☢️ THIS PROJECT IS NO LONGER MAINTAINED 💀 Please use react-spring for all of your animation needs. React Motion UI Pack React Motion is an amazing animation library for React. React Motion
 

Lapple react-transitive-number React component to apply transition effect to numeric strings, a la old Groupon timers Live demo Example Usage var TransitiveNumber = require('react-transitive-number');
 
19.7k

chenglou React-Motion import {Motion, spring} from 'react-motion'; // In your render... <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div>{value.x}</div>} </Motion> Anima
 

react-component rc-animate Animate React Component easily. Install Usage import Animate from 'rc-animate'; export default () => ( <Animate animation={{ ... }}> <p key="1">1<
 

gilbox react-spark-scroll React port of spark-scroll. The future! This repo has been around for a little while now. However, recently I re-created the demo utilizing a drastically different approach which was inspi
 

google-fabric velocity-react React components for interacting with the Velocity DOM animation library. Read our announcement blog post for details about why and how we built this. See the live demo. Latest version: v1.4.2 Avoids r
 

gilbox react-track Avoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a way to track DOM elements in a functional, declarative manner. npm ins
 

chenglou React Tween State The equivalent of React's this.setState, but for animated tweens: this.tweenState. Live demo and source. Npm: npm install react-tween-state Bower: bower install react-tween-state