https://github.com/beekai-oss/react-simple-animate

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

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

Last synced: 8 days ago
JSON representation

🎯 React UI animation made easy

• Host: GitHub
• URL: https://github.com/beekai-oss/react-simple-animate
• Owner: beekai-oss
• License: mit
• Created: 2017-07-29T00:54:19.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-18T21:29:39.000Z (over 1 year ago)
• Last Synced: 2024-04-14T02:33:11.208Z (3 months 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: 1.96 MB
• Stars: 1,812
• Watchers: 12
• Forks: 61
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Lists

• awesome-stars - react-simple-animate - oss | 1702 | (TypeScript)
• awesome-stars - beekai-oss/react-simple-animate - 🎯 React UI animation made easy (TypeScript)
• awesome-github-star - react-simple-animate - oss | 1788 | (TypeScript)
• awesome-stars - react-simple-animate - oss | 1813 | (TypeScript)
• awesome-stars - beekai-oss/react-simple-animate - 🎯 React UI animation made easy (TypeScript)

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.