animation

A simple animation library for React

Mar 03, 2021
A simple animation library for React

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.

View Demo Download Source

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 delay prop.

  • 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> );

GitHub

Recommended