https://github.com/Platane/react-flippity

Animate a list of elements using FLIP trick.
https://github.com/Platane/react-flippity

animation flip-animation react spring-physics

Last synced: 3 months ago
JSON representation

Animate a list of elements using FLIP trick.

• Host: GitHub
• URL: https://github.com/Platane/react-flippity
• Owner: Platane
• Created: 2016-06-02T19:42:24.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-06-06T22:01:57.000Z (over 8 years ago)
• Last Synced: 2024-06-22T18:48:10.585Z (5 months ago)
• Topics: animation, flip-animation, react, spring-physics
• Language: JavaScript
• Homepage: http://Platane.github.io/react-flippity
• Size: 234 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-flippity

![moss it crowd](https://raw.githubusercontent.com/Platane/react-flippity/master/asset/moss.jpg)

>_You think it's a flippin' game?_

Animate a list of elements using FLIP trick.

[demo](http://Platane.github.io/react-flippity/)

## Usage

> TODO publish to npm

same API as the brilliant [react-motion-flip](https://github.com/bloodyowl/react-motion-flip)

```javascript



 

  () =>

   items.map( item =>  

 



```


For every change in the `items` list, Flippity will make a nice transition to the new layout.

### Styling

The previous code will produce this markup:

```html



  
 


   
  
  

   
  

   
  


 
  




```


You might want to custom the style of the container or the item wrapper.

This can be achieved by passing `style`, `childStyle` and `className`, `childClassName`.

### Spring physic

The physic spring can be customized with the props `stiffness`, `damping` and `precision`.

## References

 - [FLIP animation technique](https://aerotwist.com/blog/flip-your-animations/) by [__@paullewis__](https://github.com/paullewis), which allows to easily make transitions between two states, relying on the browser computation layout.

 - [react-motion](https://github.com/chenglou/react-motion) by [__@chenglou__](https://github.com/chenglou), from which I borrowed the spring physic based animation.

 - [react-motion-flip](https://github.com/bloodyowl/react-motion-flip) by [__@bloodyowl__](https://github.com/bloodyowl), which use clever tricks.

 - [The IT Crowd](https://www.youtube.com/watch?v=TwJheWwW7rw) for getting stuck in my head the whole time.

## TODO

- [v] publish to npm

- [v] animate width and height

- [ ] compute acceleration based on actual time ( not number of frame )

- [ ] test :tropical_fish:

- [ ] animate with webAnimation API