🎯 React UI animation made easy

Overview

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

( <> {/* animate individual element. */}

React simple animate

{/* animate keyframes with individual element. */}

React simple animate with keyframes

{/* animate group of animation in sequences */} first second third ); ">
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

play(true), []); return {styles.map(style =>
useAnimateGroup
)}; };">
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].

You might also like...
Simple typing text animation in React component

react-typing-text-animation - Simple typing text animation in React component

⚛️ Perform animation and transition of React component with ease.

⚛️ Perform animation and transition of React component with ease.

 react-bubbly-effect-button🧼 Bubble animation on button
react-bubbly-effect-button🧼 Bubble animation on button

react-bubbly-effect-button🧼 Bubble animation on button

Build custom animation components in React using typescript
Build custom animation components in React using typescript

Build custom animation components in React using typescript

✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

An animation package for react-ui-ox and the community
An animation package for react-ui-ox and the community

react-ui-ox-anim An animation package for react-ui-ox and the community Getting Started Add as a dependency npm install react-ui-ox-anim Add as a dev

React typing animation in ~400 bytes 🐡 of JavaScript.
React typing animation in ~400 bytes 🐡 of JavaScript.

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

A react add-on for drawing polygons for any number of sides, as well as animation

react-polygon A react add-on for drawing polygons for any number of sides, as well as animation Demo https://peteroid.github.io/react-polygon/ Usage n

✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

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

(ノ´ヮ´)ノ*:・゚✧ A super easy 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

HyperFuse 1.5k Sep 29, 2022
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.

plus1.tv 1.5k Sep 29, 2022
React components for the Web Animations API - http://react-web-animation.surge.sh

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

Charles King 294 Sep 8, 2022
react-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - ?? Library showing animation of number changes in react.js

Yeongsu Han 137 Sep 2, 2022
Animation engine designed for React

react-tweenful Looking for an amazing React library for animating stuff? Look no more, we've got you covered! Demo https://teodosii.github.io/react-tw

Rares Mardare 73 Sep 8, 2022
✌️ A spring physics based React animation library

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

Poimandres 24.1k Sep 30, 2022
Open source, production-ready animation and gesture library for React

An open source and production-ready motion library for React on the web. Motion is an open source, production-ready library that's designed for all cr

Framer 16.1k Oct 1, 2022
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 540 Sep 22, 2022
Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Ashish Yadav 69 Aug 9, 2022
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Nikita Butenko 1.1k Sep 10, 2022