https://github.com/bluebill1049/react-simple-animate

🎯 React UI animation made easy
https://github.com/bluebill1049/react-simple-animate

animate animate-css animation animation-controller animation-sequence keyframes-animation react transition-animation

Last synced: 15 days ago
JSON representation

🎯 React UI animation made easy

• Host: GitHub
• URL: https://github.com/bluebill1049/react-simple-animate
• Owner: beekai-oss
• License: mit
• Created: 2017-07-29T00:54:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-06-18T13:34:08.000Z (6 months ago)
• Last Synced: 2024-10-29T12:57:42.128Z (about 1 month ago)
• Topics: animate, animate-css, animation, animation-controller, animation-sequence, keyframes-animation, react, transition-animation
• Language: TypeScript
• Homepage: https://react-simple-animate.now.sh/
• Size: 2.58 MB
• Stars: 1,820
• Watchers: 12
• Forks: 61
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-star-libs - bluebill1049 / react-simple-animate

README

        


React Simple Animate


React UI animation made easy




    

[![npm downloads](https://img.shields.io/npm/dm/react-simple-animate.svg?style=for-the-badge)](https://www.npmjs.com/package/react-simple-animate) 

[![npm](https://img.shields.io/npm/dt/react-simple-animate.svg?style=for-the-badge)](https://www.npmjs.com/package/react-simple-animate) 

[![npm](https://img.shields.io/bundlephobia/minzip/react-simple-animate?style=for-the-badge)](https://bundlephobia.com/result?p=react-simple-animate)

[![Coverage Status](https://img.shields.io/coveralls/github/bluebill1049/react-simple-animate/master?style=for-the-badge)](https://coveralls.io/github/bluebill1049/react-simple-animate?branch=master)




## 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](https://react-simple-animate.now.sh/)

- [Getting started](https://react-simple-animate.now.sh/basics)

- [Animate](https://react-simple-animate.now.sh/animate)

- [AnimateKeyframes](https://react-simple-animate.now.sh/animate-keyframes)

- [AnimateGroup](https://react-simple-animate.now.sh/animate-group)

- [Custom Hooks](https://react-simple-animate.now.sh/hooks)

- [Advanced](https://react-simple-animate.now.sh/advanced)

## Quickstart

#### Components

```jsx

import React from "react";

import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate";

export default () => (

  <>

    {/* 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

      

    

  >

);


```

#### Hooks

```jsx

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 
useAnimate
;

};


export const useAnimateKeyframesExample = () => {

  const { style, play } = useAnimateKeyframes({ 

    keyframes: ['opacity: 0', 'opacity: 1'], 

    iterationCount: 4 

  });

  useEffect(() => play(true), []);

  

  return 
useAnimate
;

};


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 => 
useAnimateGroup
)};

};

```


## By the makers of BEEKAI

We also make [BEEKAI](https://www.beekai.com/). Build the next-generation forms with modern technology and best in class user experience and accessibility.