Skip to content

Platane/react-flippity

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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