Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bloodyowl/react-motion-flip
A simple component to naively perform transitions between children changes
https://github.com/bloodyowl/react-motion-flip
Last synced: about 2 months ago
JSON representation
A simple component to naively perform transitions between children changes
- Host: GitHub
- URL: https://github.com/bloodyowl/react-motion-flip
- Owner: bloodyowl
- License: mit
- Created: 2016-05-31T15:54:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-27T17:22:15.000Z (about 7 years ago)
- Last Synced: 2024-10-14T17:50:14.184Z (2 months ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 53
- Watchers: 3
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-motion-flip
> A simple component to naively perform transitions between children changes
## Install
```console
$ npm install --save react-motion-flip
```
## Import
```javascript
// in ES5/commonJS
var ReactMotionFlip = require("react-motion-flip").default
// in ES6
import ReactMotionFlip from "react-motion-flip"
```
## API
### ReactMotionFlip
A component that performs transitions between children states.
The only thing you need to do is passing children. These children **must** have a `key` prop.
#### props
- `component` *(optional)*: `String | ReactClass` the container element or component (default: `div`)
- `style` *(optional)*: `Object` style of the container element
- `className` *(optional)*: `String` class applied to container element
- `childComponent` *(optional)*: `String | ReactClass` the element or component wrapping each child (default: `div`)
- `childStyle` *(optional)*: `Object` style of the element wrapping each child
- `springConfig` *(optional)* `Object` spring configuration for react-motion ([docs](https://github.com/chenglou/react-motion#--spring-val-number-config-springhelperconfig--opaqueconfig))
#### example
```javascript
// simple usage
{list.map((item) =>
{item.text}
})}
// with custom styles on wrappers
{children}
// elements and classes specified
{children}
```
## What is FLIP?
**FLIP** is an animation technique from [Paul Lewis](https://twitter.com/aerotwist). It stands for **First**, **Last**, **Invert**, **Play**.
- **First**: At the initial state, measure where elements are
- **Last**: Move elements to where they belong at the end of the animation
- **Invert**: Use CSS transforms to move the elements to their initial positions
- **Play**: Play the animation
This technique presents the advantage to remove the need for complex calculations to guess where the element you animate is going to end up. You just measure a diff.
> You should read the great article explaining the technique on [aerotwist](https://aerotwist.com/blog/flip-your-animations/)
## Why using react-motion?
react-motion provides a great way to configure animations: not with time, but with *physics*. This makes animations really smooth and natural.
> Have a look at [react-motion](https://github.com/chenglou/react-motion/#what-does-this-library-try-to-solve)