Menu Close

React Simple Animate: React UI Animation Made Easy

React Simple Animate: React UI Animation Made Easy

React Simple Animate Logo - UI Animation Made Simple

React Simple Animate

React UI animation made easy

npm downloads
npm
npm
Coverage Status

Features

  • Animation from style A to B
  • CSS keyframes animation
  • Chain up animation sequences
  • Tiny size without other dependency

Install

$ npm install react-simple-animate

Docs

Quickstart

Components

import React from "react"; import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate"; export default () => ( <> {/* animate individual element. */} <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}> <h1>React simple animate</h1> </Animate> {/* animate keyframes with individual element. */} <AnimateKeyframes play iterationCount="infinite" keyframes={["opacity: 0", "opacity: 1"]} > <h1>React simple animate with keyframes</h1> </AnimateKeyframes> {/* animate group of animation in sequences */} <AnimateGroup play> <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}> first </Animate> <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}> second </Animate> <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}> third </Animate> </AnimateGroup> </> );

Hooks

import react from 'react'; import { useAnimate, useAnimateKeyframes, useAnimateGroup } from 'react-simple-animate'; export const useAnimateExample = () => { const { style, play } = useAnimate({ start: { opacity: 0 }, end: { opacity: 1 } }); useEffect(() => play(true), []); return <div style={style}>useAnimate</div>; }; export const useAnimateKeyframesExample = () => { const { style, play } = useAnimateKeyframes({ keyframes: ['opacity: 0', 'opacity: 1'], iterationCount: 4 }); useEffect(() => play(true), []); return <div style={style}>useAnimate</div>; }; export const useAnimateGroup = () => { const { styles = [], play } = useAnimateGroup({ sequences: [ { start: { opacity: 1 }, end: { opacity: 0 } }, { start: { background: "red" }, end: { background: "blue" } } ] }); useEffect(() => play(true), []); return {styles.map(style => <div style={style}>useAnimateGroup</div>)}; };

Sponsors

Thank you very much for those kind people with their sponsorship to this project.

@sayav
@lemcii
@washingtonsoares
@lixunn
@SamSamskies
@peaonunes
@wilhelmeek
@iwarner
@joejknowles
@chris-gunawardena
@Tymek
@Luchanso
@vcarel
@gragland
@tjshipe
@krnlde
@msutkowski
@mlukaszczyk






























Contributors

This project exists thanks to all the people who contribute. [Contribute].

View Source Code
Posted in React