React spring flip

A library to help you do flip animations. It uses react-spring under the hood and requires react hooks (v16.8 or greater).

Examples

Using flipKey

The button will shuffle the cards and increment flipCount (in component state). We use the flipKey property on the Flipper component to tell it animate the transition between one layout and the next.

<Flipper
  flipKey={flipCount}
>
  <div className="row">
    {cards.map((card) => {
      return (
        <Flip
          positionOnly
          flipId={card.id}
          key={card.background}
          className="col-6 mb-2"
        >
          <div className="card">
            <div
              style={{
                background: card.background
              }}
              className="card-body"
            >
            </div>
          </div>
        </Flip>
      )
    })}
  </div>
</Flipper>

...

On mount/unmount

In this example, we pretend we have two completely different DOM trees to render, by changing the key on the parent div container. If we DO NOT specify a flipKey property on Flipper, then it will animate the transition between Flip components when they mount/unmount.

<Flipper>
  <div
    key={flipCount}
    className="row"
  >
    {cards.map((card) => {
      return (
        <Flip
          positionOnly
          flipId={card.id}
          key={card.background}
          className="col-6 mb-2"
        >
          <div className="card">
            <div
              style={{
                background: card.background
              }}
              className="card-body"
            >
            </div>
          </div>
        </Flip>
      )
    })}
  </div>
</Flipper>

...