React Web Animation

React components for the Web Animations API -
Alternatives To React Web Animation
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Spring25,7391,4641,33715 hours ago363September 13, 202283mitTypeScript
✌️ A spring physics based React animation library
React Three Fiber22,68212311 hours ago147September 23, 202259mitTypeScript
🇨🇭 A React renderer for Three.js
Motion18,7901181,5182 days ago713September 20, 2022237mitTypeScript
Open source, production-ready animation and gesture library for React
Lottie React Native15,8676,3221425 days ago57August 05, 202231apache-2.0Kotlin
Lottie wrapper for React Native.
React Content Loader12,7683092493 months ago69March 09, 20229mitTypeScript
⚪ SVG-Powered component to easily create skeleton loadings.
React Transition Group9,77147,7154,686a month ago43August 01, 2022218otherJavaScript
An easy way to perform animations when a React component enters or leaves the DOM
React Native Animatable9,4982,13024913 days ago23October 13, 2019209mitJavaScript
Standard set of easy to use animations and declarative transitions for React Native
Auto Animate7,5471119 days ago9August 23, 202248mitTypeScript
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
React Native Reanimated7,3004,8479725 hours ago85September 22, 2022371mitTypeScript
React Native's Animated library reimplemented
React Move6,521323595 months ago60June 13, 202125mitJavaScript
React Move | Beautiful, data-driven animations for React
Alternatives To React Web Animation
Select To Compare

Alternative Project Comparisons


react-web-animation is a set of React components that expose the Web Animations API in a declarative way.

build status npm version npm downloads semantic-release Commitizen friendly


Check out how you can use it here -


Why use this over other animation libraries for React? react-web-animation uses the Web Animations API polyfill so eventually it will use the native browser implementation and not depend on any third-party animation frameworks or CSS. Chrome has the greatest support for these today and if you view the source on the demos, you can see it isn't using CSS at all!

Web Animations API

Want to know more about the Web Animations API? Here are some great resources.


react-web-animation requires the following peer dependencies to be installed

npm install react
npm install react-dom
npm install prop-types
npm install react-web-animation

react-web-animation has a runtime dependency on the next version Web Animations API polyfill. The easiest way to get this is to grab it from cdnjs and include it in your application.

<script src=""></script>


  • Animate Single Elements with a <Animated.[componentName]> e.g. <Animated.div> and control play state (play, pause, stop, reverse)
  • Animate Single Elements with a <Animation> and control play state (play, pause, stop, reverse)
  • Animate Multiple animations in parallel with a <AnimationGroup>, controlling them with one timeline
  • Animate Multiple animations serially with a <AnimationSequence>, controlling them with one timeline


Creating an animated element is as simple using an <Animated.[elementName]> component and supplying keyframes and a timing config.

import React, { Component } from 'react';
import { Animated } from 'react-web-animation';

export default class Basic extends Component {

    getKeyFrames() {
        return [
            { transform: 'scale(1)',    opacity: 1,     offset: 0 },
            { transform: 'scale(.5)',   opacity: 0.5,   offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)',   opacity: 0.6,   offset: 1 }

    getTiming( duration ) {
        return {
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards'

    render() {
            <Animated.div keyframes={this.getKeyFrames()}
                    Web Animations API Rocks

Advanced Usage

For more advanced usage, head over to the source documentation or check out the



Popular Animation Projects
Popular Reactjs Projects
Popular User Interface Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
React Components