Skip to content

Latest commit

 

History

History
76 lines (43 loc) · 1.99 KB

README.md

File metadata and controls

76 lines (43 loc) · 1.99 KB

react-flippity

moss it crowd

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

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