kandi background
Explore Kits
Back ArrowExplore all topics

39 Best JavaScript React Animation libraries in 2022

by rajasekar Updated: Apr 6, 2022

React libraries enable developers to craft fluid user interfaces with reusable, ready UI code components. Creating animations is more convenient with the JavaScript virtual DOM programming model of React as compared to the traditional DOM, which helps in boosting performance. Props-based data binding in React libraries enables better flow, efficient debugging and also helps developers reduce some of the boilerplates. Using React libraries gives a coder a cleaner, more responsive approach to animations since the code is easier to reason about. An open platform React animation library supports full-stack programming, making it a holistic solution for web and app-based animations. Presented below is an updated JavaScript library list for React animation packages. lottie-web - Effects animations natively; react-motion - A spring that solves your animation problems; react-native-animatable - Standard set of easy to use animations.

lottie-webby airbnb

JavaScript star image 27978 Version:5.10.1

License: Permissive (MIT)

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Support
Quality
Security
License
Reuse

lottie-webby airbnb

JavaScript star image 27978 Version:5.10.1 License: Permissive (MIT)

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Support
Quality
Security
License
Reuse

react-motionby chenglou

JavaScript star image 21297 Version:v0.5.2

License: Permissive (MIT)

A spring that solves your animation problems.

Support
Quality
Security
License
Reuse

react-motionby chenglou

JavaScript star image 21297 Version:v0.5.2 License: Permissive (MIT)

A spring that solves your animation problems.
Support
Quality
Security
License
Reuse

react-sortable-hocby clauderic

JavaScript star image 9831 Version:Current

License: Permissive (MIT)

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

Support
Quality
Security
License
Reuse

react-sortable-hocby clauderic

JavaScript star image 9831 Version:Current License: Permissive (MIT)

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Support
Quality
Security
License
Reuse

react-native-animatableby oblador

JavaScript star image 9431 Version:v1.3.3

License: Permissive (MIT)

Standard set of easy to use animations and declarative transitions for React Native

Support
Quality
Security
License
Reuse

react-native-animatableby oblador

JavaScript star image 9431 Version:v1.3.3 License: Permissive (MIT)

Standard set of easy to use animations and declarative transitions for React Native
Support
Quality
Security
License
Reuse

react-transition-groupby reactjs

JavaScript star image 9627 Version:4.4.5

License: Others (Non-SPDX)

An easy way to perform animations when a React component enters or leaves the DOM

Support
Quality
Security
License
Reuse

react-transition-groupby reactjs

JavaScript star image 9627 Version:4.4.5 License: Others (Non-SPDX)

An easy way to perform animations when a React component enters or leaves the DOM
Support
Quality
Security
License
Reuse

react-moveby sghall

JavaScript star image 6505 Version:6.5.0

License: Permissive (MIT)

React Move | Beautiful, data-driven animations for React

Support
Quality
Security
License
Reuse

react-moveby sghall

JavaScript star image 6505 Version:6.5.0 License: Permissive (MIT)

React Move | Beautiful, data-driven animations for React
Support
Quality
Security
License
Reuse

react-native-reanimatedby software-mansion

TypeScript star image 6885 Version:2.14.4

License: Permissive (MIT)

React Native's Animated library reimplemented

Support
Quality
Security
License
Reuse

react-native-reanimatedby software-mansion

TypeScript star image 6885 Version:2.14.4 License: Permissive (MIT)

React Native's Animated library reimplemented
Support
Quality
Security
License
Reuse

react-burger-menuby negomi

JavaScript star image 4819 Version:3.0.9

License: Permissive (MIT)

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations

Support
Quality
Security
License
Reuse

react-burger-menuby negomi

JavaScript star image 4819 Version:3.0.9 License: Permissive (MIT)

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
Support
Quality
Security
License
Reuse

react-game-kitby FormidableLabs

JavaScript star image 4443 Version:Current

License: Permissive (MIT)

Component library for making games with React & React Native

Support
Quality
Security
License
Reuse

react-game-kitby FormidableLabs

JavaScript star image 4443 Version:Current License: Permissive (MIT)

Component library for making games with React & React Native
Support
Quality
Security
License
Reuse

ant-motionby ant-design

JavaScript star image 4444 Version:1.7.0

License: Permissive (MIT)

:bicyclist: Animate specification and components of Ant Design

Support
Quality
Security
License
Reuse

ant-motionby ant-design

JavaScript star image 4444 Version:1.7.0 License: Permissive (MIT)

:bicyclist: Animate specification and components of Ant Design
Support
Quality
Security
License
Reuse

pixel-art-reactby jvalen

JavaScript star image 4449 Version:v3.8.1

License: Permissive (MIT)

Pixel art animation and drawing web app powered by React

Support
Quality
Security
License
Reuse

pixel-art-reactby jvalen

JavaScript star image 4449 Version:v3.8.1 License: Permissive (MIT)

Pixel art animation and drawing web app powered by React
Support
Quality
Security
License
Reuse

react-overdriveby berzniz

JavaScript star image 2993 Version:0.0.10

License: Permissive (MIT)

Super easy magic-move transitions for React apps

Support
Quality
Security
License
Reuse

react-overdriveby berzniz

JavaScript star image 2993 Version:0.0.10 License: Permissive (MIT)

Super easy magic-move transitions for React apps
Support
Quality
Security
License
Reuse

react-animationsby FormidableLabs

JavaScript star image 3057 Version:v0.1.0

License: Permissive (MIT)

🎊 A collection of animations for inline style libraries

Support
Quality
Security
License
Reuse

react-animationsby FormidableLabs

JavaScript star image 3057 Version:v0.1.0 License: Permissive (MIT)

🎊 A collection of animations for inline style libraries
Support
Quality
Security
License
Reuse

react-native-textinput-effectsby halilb

JavaScript star image 2882 Version:v0.6.3

License: Permissive (MIT)

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

Support
Quality
Security
License
Reuse

react-native-textinput-effectsby halilb

JavaScript star image 2882 Version:v0.6.3 License: Permissive (MIT)

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.
Support
Quality
Security
License
Reuse

react-flightby jondot

JavaScript star image 2812 Version:Current

License: Permissive (MIT)

The best way to build animation compositions for React.

Support
Quality
Security
License
Reuse

react-flightby jondot

JavaScript star image 2812 Version:Current License: Permissive (MIT)

The best way to build animation compositions for React.
Support
Quality
Security
License
Reuse

FluidTransitionsby fram-x

JavaScript star image 2724 Version:Current

License: Permissive (MIT)

Fluid Transitions for React Navigation

Support
Quality
Security
License
Reuse

FluidTransitionsby fram-x

JavaScript star image 2724 Version:Current License: Permissive (MIT)

Fluid Transitions for React Navigation
Support
Quality
Security
License
Reuse

react-awesome-sliderby rcaferati

JavaScript star image 2612 Version:1.0.1

License: Permissive (MIT)

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱

Support
Quality
Security
License
Reuse

react-awesome-sliderby rcaferati

JavaScript star image 2612 Version:1.0.1 License: Permissive (MIT)

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
Support
Quality
Security
License
Reuse

react-native-collapsibleby oblador

JavaScript star image 2311 Version:v1.6.0

License: Permissive (MIT)

Animated collapsible component for React Native, good for accordions, toggles etc

Support
Quality
Security
License
Reuse

react-native-collapsibleby oblador

JavaScript star image 2311 Version:v1.6.0 License: Permissive (MIT)

Animated collapsible component for React Native, good for accordions, toggles etc
Support
Quality
Security
License
Reuse

react-revealby rnosov

JavaScript star image 2533 Version:Current

License: Permissive (MIT)

Easily add reveal on scroll animations to your React app

Support
Quality
Security
License
Reuse

react-revealby rnosov

JavaScript star image 2533 Version:Current License: Permissive (MIT)

Easily add reveal on scroll animations to your React app
Support
Quality
Security
License
Reuse

react-native-modalsby jacklam718

JavaScript star image 2088 Version:v0.4.16

License: Permissive (MIT)

A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

Support
Quality
Security
License
Reuse

react-native-modalsby jacklam718

JavaScript star image 2088 Version:v0.4.16 License: Permissive (MIT)

A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.
Support
Quality
Security
License
Reuse

mobile-first-animationby aholachek

JavaScript star image 2070 Version:Current

License: No License (null)

Gesture-driven animation on the mobile web (React Conf 2019)

Support
Quality
Security
License
Reuse

mobile-first-animationby aholachek

JavaScript star image 2070 Version:Current License: No License

Gesture-driven animation on the mobile web (React Conf 2019)
Support
Quality
Security
License
Reuse

react-native-motionby xotahal

JavaScript star image 1967 Version:1.0.5

License: Permissive (MIT)

Animate it! Easily!

Support
Quality
Security
License
Reuse

react-native-motionby xotahal

JavaScript star image 1967 Version:1.0.5 License: Permissive (MIT)

Animate it! Easily!
Support
Quality
Security
License
Reuse

react-native-circular-progressby bartgryszko

JavaScript star image 1998 Version:Current

License: Permissive (MIT)

React Native component for creating animated, circular progress with ReactART

Support
Quality
Security
License
Reuse

react-native-circular-progressby bartgryszko

JavaScript star image 1998 Version:Current License: Permissive (MIT)

React Native component for creating animated, circular progress with ReactART
Support
Quality
Security
License
Reuse

react-scroll-parallaxby jscottsmith

TypeScript star image 2320 Version:3.3.2

License: Permissive (MIT)

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.

Support
Quality
Security
License
Reuse

react-scroll-parallaxby jscottsmith

TypeScript star image 2320 Version:3.3.2 License: Permissive (MIT)

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
Support
Quality
Security
License
Reuse

animatedby animatedjs

JavaScript star image 1849 Version:0.1.3

License: Permissive (MIT)

Declarative Animations Library for React and React Native

Support
Quality
Security
License
Reuse

animatedby animatedjs

JavaScript star image 1849 Version:0.1.3 License: Permissive (MIT)

Declarative Animations Library for React and React Native
Support
Quality
Security
License
Reuse

react-tween-stateby chenglou

JavaScript star image 1746 Version:0.1.5

License: Others (Non-SPDX)

React animation.

Support
Quality
Security
License
Reuse

react-tween-stateby chenglou

JavaScript star image 1746 Version:0.1.5 License: Others (Non-SPDX)

React animation.
Support
Quality
Security
License
Reuse

rxvizby moroshko

JavaScript star image 1535 Version:0.0.0

License: Permissive (MIT)

Rx Visualizer - Animated playground for Rx Observables

Support
Quality
Security
License
Reuse

rxvizby moroshko

JavaScript star image 1535 Version:0.0.0 License: Permissive (MIT)

Rx Visualizer - Animated playground for Rx Observables
Support
Quality
Security
License
Reuse

react-countupby glennreyes

JavaScript star image 1600 Version:v6.4.0

License: Permissive (MIT)

💫 A configurable React component wrapper around CountUp.js

Support
Quality
Security
License
Reuse

react-countupby glennreyes

JavaScript star image 1600 Version:v6.4.0 License: Permissive (MIT)

💫 A configurable React component wrapper around CountUp.js
Support
Quality
Security
License
Reuse

react-particle-effect-buttonby transitive-bullshit

JavaScript star image 1454 Version:v1.0.1

License: No License (null)

Bursting particle effect buttons for React 🎉

Support
Quality
Security
License
Reuse

react-particle-effect-buttonby transitive-bullshit

JavaScript star image 1454 Version:v1.0.1 License: No License

Bursting particle effect buttons for React 🎉
Support
Quality
Security
License
Reuse

freezeframe.jsby ctrl-freaks

TypeScript star image 1359 Version:v5.0.2

License: Permissive (MIT)

freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.

Support
Quality
Security
License
Reuse

freezeframe.jsby ctrl-freaks

TypeScript star image 1359 Version:v5.0.2 License: Permissive (MIT)

freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.
Support
Quality
Security
License
Reuse

react-native-popup-menuby instea

JavaScript star image 1353 Version:v0.16.0

License: Permissive (ISC)

Popup menu component for React Native

Support
Quality
Security
License
Reuse

react-native-popup-menuby instea

JavaScript star image 1353 Version:v0.16.0 License: Permissive (ISC)

Popup menu component for React Native
Support
Quality
Security
License
Reuse

react-animeby hyperfuse

JavaScript star image 1266 Version:3.0.3

License: Permissive (MIT)

(ﾉ´ヮ´)ﾉ*:･ﾟ✧ A super easy animation library for React!

Support
Quality
Security
License
Reuse

react-animeby hyperfuse

JavaScript star image 1266 Version:3.0.3 License: Permissive (MIT)

(ﾉ´ヮ´)ﾉ*:･ﾟ✧ A super easy animation library for React!
Support
Quality
Security
License
Reuse

waveformsby joshwcomeau

JavaScript star image 1345 Version:Current

License: Permissive (MIT)

An interactive, explorable explanation about the peculiar magic of sound waves.

Support
Quality
Security
License
Reuse

waveformsby joshwcomeau

JavaScript star image 1345 Version:Current License: Permissive (MIT)

An interactive, explorable explanation about the peculiar magic of sound waves.
Support
Quality
Security
License
Reuse

react-lottieby chenqingspring

JavaScript star image 1486 Version:v1.2.3

License: Permissive (MIT)

Render After Effects animations on React based on lottie-web

Support
Quality
Security
License
Reuse

react-lottieby chenqingspring

JavaScript star image 1486 Version:v1.2.3 License: Permissive (MIT)

Render After Effects animations on React based on lottie-web
Support
Quality
Security
License
Reuse

gatsby-starter-portfolio-caraby LekoArts

TypeScript star image 1331 Version:Current

License: Permissive (0BSD)

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Support
Quality
Security
License
Reuse

gatsby-starter-portfolio-caraby LekoArts

TypeScript star image 1331 Version:Current License: Permissive (0BSD)

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Support
Quality
Security
License
Reuse

react-typistby jstejada

JavaScript star image 1323 Version:v2.0.5

License: Others (Non-SPDX)

Typing animations with React

Support
Quality
Security
License
Reuse

react-typistby jstejada

JavaScript star image 1323 Version:v2.0.5 License: Others (Non-SPDX)

Typing animations with React
Support
Quality
Security
License
Reuse

react-stonecutterby dantrain

JavaScript star image 1175 Version:v0.3.10

License: Permissive (MIT)

Animated grid layout component for React

Support
Quality
Security
License
Reuse

react-stonecutterby dantrain

JavaScript star image 1175 Version:v0.3.10 License: Permissive (MIT)

Animated grid layout component for React
Support
Quality
Security
License
Reuse

csswandby oliver-gomes

JavaScript star image 1161 Version:Current

License: Permissive (MIT)

🎨✨ Hover your wand and use your magic spell to copy beautiful css

Support
Quality
Security
License
Reuse

csswandby oliver-gomes

JavaScript star image 1161 Version:Current License: Permissive (MIT)

🎨✨ Hover your wand and use your magic spell to copy beautiful css
Support
Quality
Security
License
Reuse

resonanceby sghall

JavaScript star image 1009 Version:0.9.5

License: Permissive (MIT)

:black_medium_small_square:Resonance | 5kb React animation library

Support
Quality
Security
License
Reuse

resonanceby sghall

JavaScript star image 1009 Version:0.9.5 License: Permissive (MIT)

:black_medium_small_square:Resonance | 5kb React animation library
Support
Quality
Security
License
Reuse

See similar Kits and Libraries

Animation
User Interface

Open Weaver – Develop Applications Faster with Open Source

kandi

Develop Custom Functions

Develop Projects with Kits

Explore Popular Libraries

Product Tour

FAQ

Community and Support

Live Bootcamps

Self Paced Certifications

Hackathons and Events

FutureSkills Prime

kandi Support

Company

About us

Join the Team

Contact Us

Follow

  • © 2023 Open Weaver Inc.