platane/react-flippity

Animate a list of elements using FLIP trick.

react-flippity

You think it's a flippin' game?

Animate a list of elements using FLIP trick.

demo

Usage

TODO publish to npm

same API as the brilliant react-motion-flip

<div>

 <Flippity>

  () =>
   items.map( item =>  <MyItemComponent key={item.key} {...x} />

 </Flippity>

</div>

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:

<div>

  <div> <!-- the flippity container -->

   <div> <MyItemComponent /> </div>  <!-- one wrapper around each item -->
   <div> <MyItemComponent /> </div>
   <div> <MyItemComponent /> </div>

 </div>  

</div>

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 by @paullewis, which allows to easily make transitions between two states, relying on the browser computation layout.

• react-motion by @chenglou, from which I borrowed the spring physic based animation.

• react-motion-flip by @bloodyowl, which use clever tricks.

• The IT Crowd 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 🐠
• animate with webAnimation API