Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/raphamorim/react-motions

Compose React Animations using High-Order Functions or Components
https://github.com/raphamorim/react-motions

animate animation art css css3 motions react recompose

Last synced: 13 days ago
JSON representation

Compose React Animations using High-Order Functions or Components

Awesome Lists containing this project

README 

        
# React Motions



[![CircleCI](https://circleci.com/gh/raphamorim/react-motions/tree/master.svg?style=svg)](https://circleci.com/gh/raphamorim/react-motions/tree/master)



> Compose React Animations using High-Order Functions or Components



React-Motions is a mix of ideas from [Recompose](https://github.com/acdlite/recompose) and [Animate.css](https://github.com/daneden/animate.css). In fact, `react-motions` is a set of pure functions entirely based on animation purpose.



```bash

yarn add react-motions --dev 

```



# Usage



Using HOF



```jsx

import { withBounce, withShake, withInfinite, withSequence } from 'react-motions'



const Component = 
How can I look beautiful



const ComponentWithShake = withShake(Component)

const ComponentWithShakeAndBounce = withShake(withBounce(Component))

const ComponentWithInfiniteBounce = withInfinite(withBounce(Component))

const ComponentWithShakeThenBounce = withSequence(withShake(withBounce(Component)))

```



HOF - Based on Compositions



You can add compose animations (even custom animations) based on functions. Here is an example:



```jsx

import { withShake, withFadeOut, withInfine } from 'react-motions'



const Component = () => (

  withInfinite(

    withFadeOut(

      withInfinite(

        withShake(

          
Bouncing and Fading Out infinitely!!


        )

      )

    )

  )

)

```



Using Components



```jsx

import { Bounce, Shake } from 'react-motions'



const ComponentWithShake = () => (

  

    
How can I look beautiful


  

)



const ComponentWithBounce = () => (

  

    
How can I look beautiful


  

)

```



React-Motions was created to be agnostic to the renderer:



| React Renderer | Available for use  | Version |

| :--- | :--- | :--- |

| [React-DOM](github.com/facebook/react) | ✔️ | `^16` |

| [React-Native](https://github.com/facebook/react-native) | ✖️ | ✖️ |

| [React-TV](https://github.com/raphamorim/react-tv) | ✔️ | `^0.3`



# API



## withInfinite



Set last animation with `infinity` property.



```jsx

import { withInfinite, withBounce } from 'react-motions'



const DoNotStopBouncing = withInfinite(withBounce(
Let's bounce without stop!
))

```



## withSequence



Execute next animation only after previous animation be finished. 



```jsx

import { withSequence, withShake, withJello } from 'react-motions'



const SequencialAnimations = withSequence(

  withShake,

  withJello,

  
First shake it then jello! 


)

```



## compose



Execute all animations in the same time.



```jsx

import { compose, withFlash, withPulse } from 'react-motions'



const VividAnimation = compose(

  withFlash,

  withPulse,

  
Flash and Pulse!


)

```



## Bounce

### Component



Render a React Component with Bounce animation (`2s` duration and iterationCount `infinite`)



```jsx

import { Bounce } from 'react-motions'



const ComponentBounce = (

  

    Let's bounce here

  

)

```



### Function



Return a React Component with Bounce animation (`1s` duration)



```jsx

import { withBounce } from 'react-motions'



const ComponentWithBounce = withBounce(
Let's bounce here
)

```



## FadeIn

### Component



Render a React Component with FadeIn animation (`2s` duration and iterationCount `infinite`)



```jsx

import { FadeIn } from 'react-motions'



const ComponentFadeIn = (

  

    Let's fadeIn here

  

)

```

### Function



Return a React Component with FadeIn animation (`1s` duration)



```jsx

import { withFadeIn } from 'react-motions'



const ComponentWithFadeIn = withFadeIn(
Let's fadeIn here
)

```



## FadeOut

### Component



Render a React Component with FadeOut animation (`2s` duration and iterationCount `infinite`)



```jsx

import { FadeOut } from 'react-motions'



const ComponentFadeOut = (

  

    Let's fadeOut here

  

)

```

### Function



Return a React Component with FadeOut animation (`1s` duration)



```jsx

import { withFadeOut } from 'react-motions'



const ComponentWithFadeOut = withFadeOut(
fadeOut here
)

```



## Flash

### Component



Render a React Component with Flash animation (`2s` duration and iterationCount `infinite`)



```jsx

import { Flash } from 'react-motions'



const ComponentFlash = (

  

    Let's flash here

  

)

```

### Function



Return a React Component with Flash animation (`1s` duration)



```jsx

import { withFlash } from 'react-motions'



const ComponentWithFlash = withFlash(
Flash! Flash!
)

```



## Jello

### Component



Render a React Component with Jello animation (`2s` duration and iterationCount `infinite`)



```jsx

import { Jello } from 'react-motions'



const ComponentJello = (

  

    Let's jello here

  

)

```

### Function



Return a React Component with Jello animation (`1s` duration)



```jsx

import { withJello } from 'react-motions'



const ComponentWithJello = withJello(
Jelloooool
)

```



## Pulse

### Component



Render a React Component with Pulse animation (`2s` duration and iterationCount `infinite`)



```jsx

import { Pulse } from 'react-motions'



const ComponentPulse = (

  

    Let's pulse here

  

)

```

### Function



Return a React Component with Pulse animation (`1s` duration)



```jsx

import { withPulse } from 'react-motions'



const ComponentWithPulse = withPulse(
Let's pulse here
)

```



## RubberBand

### Component



Render a React Component with RubberBand animation (`2s` duration and iterationCount `infinite`)



```jsx

import { RubberBand } from 'react-motions'



const ComponentRubberBand = (

  

    Let's rubberBand here

  

)

```

### Function



Return a React Component with rubberBand animation (`1s` duration)



```jsx

import { withRubberBand } from 'react-motions'



const ComponentWithRubberBand = withRubberBand(
rubberBand!
)

```



## Shake

### Component



Render a React Component with Shake animation (`2s` duration and iterationCount `infinite`)



```jsx

import { Shake } from 'react-motions'



const ComponentShake = (

  

    Let's shake here

  

)

```

### Function



Return a React Component with Shake animation (`1s` duration)



```jsx

import { withShake } from 'react-motions'



const ComponentWithShake = withShake(
Let's shake here
)

```

## Swing

### Component



Render a React Component with Swing animation (`2s` duration and iterationCount `infinite`)



```jsx

import { Swing } from 'react-motions'



const ComponentSwing = (

  

    Let's swing here

  

)

```

### Function



Return a React Component with Swing animation (`1s` duration)



```jsx

import { withSwing } from 'react-motions'



const ComponentWithSwing = withSwing(
Swing!
)

```

## Tada

### Component



Render a React Component with Tada animation (`2s` duration and iterationCount `infinite`)



```jsx

import { Tada } from 'react-motions'



const ComponentTada = (

  

    Let's tada here

  

)

```



### Function



Return a React Component with Tada animation (`1s` duration)



```jsx

import { withTada } from 'react-motions'



const ComponentWithTada = withTada(
Tadaaaan!
)

```

## Wobble

### Component



Render a React Component with Wobble animation (`2s` duration and iterationCount `infinite`)



```jsx

import { Wobble } from 'react-motions'



const ComponentWobble = (

  

    Let's wobble here

  

)

```

### Function



Return a React Component with Wobble animation (`1s` duration)



```jsx

import { withWobble } from 'react-motions'



const ComponentWithWobble = withWobble(
Wobble!
)

```



# Roadmap



- [ ] `withSequence`

- [ ] `compose`

- [ ] Create handler props on Components for bind Animation Hooks

- [ ] Allows to configure animation property on HOC



# Credits



A thanks to [Animate.css](https://github.com/daneden/animate.css) for all animations.



Created by [Raphael Amorim](https://twitter.com/raphamorims).