aholachek/react-flip-toolkit

A lightweight magic-move library for configurable layout transitions

Comparison with other React FLIP libraries

Quick start

npm install react-flip-toolkit or yarn add react-flip-toolkit

1. Wrap all animated children with a single Flipper component that has a flipKey prop that changes every time animations should happen.

2. Wrap elements that should be animated with Flipped components that have a flipId prop matching them across renders.

Table of Contents

• Forkable Examples
  • Simple Example: An Expanding Div
  • Simple Example: Two Divs
  • Simple Example: List Shuffle
  • List Transitions
  • Stagger Effects
  • Spring Customizations
  • Nested Scale Transforms
  • Route-based Animations With React Router
  • More examples
• The Components
  • Flipper
    • Basic Props
    • Advanced Props
  • Flipped
    • Wrapping a React Component
    • Basic props
    • Callback props
    • Transform props
    • Advanced props
  • Spring
• Library details
• Troubleshooting
  • Problem #1: Nothing is happening
  • Problem #2: Things look weird / animations aren’t behaving
  • Problem #3: It’s still not working
• Performance
  • Memoization
  • will-change:transform

Forkable Examples

Simple Example: An Expanding Div

Fork this example on Code Sandbox

import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'

const AnimatedSquare = () => {
  const [fullScreen, setFullScreen] = useState(false)
  const toggleFullScreen = () => setFullScreen(prevState => !prevState)

  return (
    <Flipper flipKey={fullScreen}>
      <Flipped flipId="square">
        <div
          className={fullScreen ? 'full-screen-square' : 'square'}
          onClick={toggleFullScreen}
        />
      </Flipped>
    </Flipper>
  )
}

Simple Example: Two Divs

Fork this example on Code Sandbox

import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'

const Square = ({ toggleFullScreen }) => (
  <Flipped flipId="square">
    <div className="square" onClick={toggleFullScreen} />
  </Flipped>
)

const FullScreenSquare = ({ toggleFullScreen }) => (
  <Flipped flipId="square">
    <div className="full-screen-square" onClick={toggleFullScreen} />
  </Flipped>
)

const AnimatedSquare = () => {
  const [fullScreen, setFullScreen] = useState(false)
  const toggleFullScreen = () => setFullScreen(prevState => !prevState)

  return (
    <Flipper flipKey={fullScreen}>
      {fullScreen ? (
        <FullScreenSquare toggleFullScreen={toggleFullScreen} />
      ) : (
        <Square toggleFullScreen={toggleFullScreen} />
      )}
    </Flipper>
  )
}

Simple Example: List Shuffle

Fork this example on Code Sandbox

import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'
import shuffle from 'lodash.shuffle'

const ListShuffler = () => {
  const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  const shuffleList = () => setData(shuffle(data))

  return (
    <Flipper flipKey={data.join('')}>
      <button onClick={shuffleList}> shuffle</button>
      <ul className="list">
        {data.map(d => (
          <Flipped key={d} flipId={d}>
            <li>{d}</li>
          </Flipped>
        ))}
      </ul>
    </Flipper>
  )
}

List Transitions

Add some interest to a dynamic list of cards by animating changes to cards' sizes and positions.

Fork this example on Code Sandbox

Stagger Effects

The react-flip-toolkit library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.

For the most basic stagger effect, you can simply add a stagger boolean prop to your Flipped element:

<Flipped flipId={`element-${i}`} stagger>
  <AnimatedListItem/>
</Flipped>

Fork this example on Code Sandbox

Spring Customizations

react-flip-toolkit uses springs for animations. To customize the spring, you can pass in a preset name:

// spring preset can be one of: "stiff", "noWobble", "gentle", "veryGentle", or "wobbly"
<Flipper flipKey='foo' spring='wobbly'>
  {/* Flipped components go here...*/}
</Flipper>

or a custom spring config:

<Flipper flipKey='foo' spring={{ stiffness: 280, damping: 22 }} >
  {/* Flipped components go here...*/}
</Flipper>

View all spring options in the interactive explorer

Nested Scale Transforms

• Fork this example on Code Sandbox
• Fork Github repo

Interesting animations often involve scale transforms in addition to simple translate transforms. The problem with scale animations has to do with children — if you scale a div up 2x, you will warp any children it has by scaling them up too, creating a weird-looking animation. That’s why this library allows you to wrap the child with a Flipped component that has an inverseFlipId to counteract the transforms of the parent:

<Flipped flipId={id}>
  <div>
    <Flipped inverseFlipId={id} scale>
      <div>some text that will not be warped</div>
    </Flipped>
  </div>
</Flipped>

By default, both the scale and the translation transforms of the parent will be counteracted (this allows children components to make their own FLIP animations without being affected by the parent). But for many use cases, you’ll want to additionally specify the scale prop to limit the adjustment to the scale and allow the positioning to move with the parent.

Note: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.

That means any layout styles — padding, flexbox, etc—should be applied to the inverted container (the element wrapped with a Flipped component with an inverseFlipId) rather than the parent Flipped container.

Route-based Animations With React Router

Fork Github repo

react-flip-toolkit works great with client-side routers to provide route-driven transitions:

<Route
  render={({ location, search }) => {
    return (
      <Flipper
        flipKey={`${location.pathname}-${location.search}`}
      >
      {/* Child routes that contain Flipped components go here...*/}
      </Flipper>
    )
  }}
/>

More examples

• Guitar shop
• React-flip-toolkit logo
• Using Portals

The Components

Flipper

The parent wrapper component that contains all the elements to be animated. You’ll often need only one of these per page, but sometimes it will be more convenient to have multiple Flipper regions of your page concerned with different transitions.

<Flipper flipKey={someKeyThatChanges}>{/* children */}</Flipper>

Basic Props

staggerConfig={{
  // the "default" config will apply to staggered elements without explicit keys
      default: {
        // default direction is forwards
        reverse: true,
        // default is .1, 0 < n < 1
        speed: .5
      },
  // this will apply to Flipped elements with the prop stagger='namedStagger'
    namedStagger : { speed: .2 }
  }}

Advanced Props

handleEnterUpdateDelete({
  // this func applies an opacity of 0 to entering elements so
  // they can be faded in - it should be called immediately
  hideEnteringElements,
  // calls `onAppear` for all entering elements
  animateEnteringElements,
  //calls `onExit` for all exiting elements
  // returns a promise that resolves when all elements have exited
  animateExitingElements,
  // the main event: `FLIP` animations for updating elements
  // this also returns a promise that resolves when
  // animations have completed
  animateFlippedElements
})

Flipped

Wraps an element that should be animated.

E.g. in one component you can have

<Flipped flipId="coolDiv">
  <div className="small" />
</Flipped>

and in another component somewhere else you can have

<Flipped flipId="coolDiv">
  <div className="big" />
</Flipped>

and they will be tweened by react-flip-toolkit.

The Flipped component produces no markup, it simply passes some props down to its wrapped child.

Wrapping a React Component

If you want to wrap a React component rather than a JSX element like a div, you can provide a render prop and then apply the flippedProps directly to the wrapped element in your component:

<Flipped>
  {flippedProps => <MyCoolComponent flippedProps={flippedProps} />}
</Flipped>

const MyCoolComponent = ({ flippedProps }) => <div {...flippedProps} />

You can also simply provide a regular React component as long as that component spreads unrecognized props directly onto the wrapped element (this technique works well for wrapping styled components):

<Flipped>
  <MyCoolComponent />
</Flipped>

const MyCoolComponent = ({ knownProp, ...rest }) => <div {...rest} />

Basic props

Callback props

The above animation uses onAppear and onExit callbacks for fade-in and fade-out animations.

Transform props

By default the FLIP-ped elements' translate, scale, and opacity properties are all transformed. However, certain effects require more control so if you specify any of these props, only the specified attribute(s) will be tweened:

Advanced props

Functions to control when FLIP happens

Spring

As a convenience, react-flip-toolkit exports a tiny function to access the same spring system used to create FLIP transitions.

Fork example on CodeSandbox

import { spring } from 'react-flip-toolkit'

spring({
  config: "wobbly",
  values: {
    translateY: [-15, 0],
    opacity: [0, 1]
  },
  onUpdate: ({ translateY, opacity }) => {
    el.style.opacity = opacity;
    el.style.transform = `translateY(${translateY}px)`;
  },
  delay: i * 25,
  onComplete: () => console.log('done')
});

Library details

• Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with Browserstack.
• For IE11 compatability, make sure you’re polyfilling the window.Promise object.
• Requires React 16+
• Uses Rematrix for matrix calculations and a simplified fork of Rebound for spring animations

Troubleshooting

Problem #1: Nothing is happening

• Make sure you’re updating the flipKey attribute in the Flipper component whenever an animation should happen.
• If one of your Flipped components is wrapping another React component rather than a DOM element, use a render prop to get the Flipped props and pass down to the necessary DOM element.
• Is the element that’s receiving props from Flipped visible in the DOM? react-flip-toolkit attempts to optimize performance by not animating elements that are off-screen or elements that have no width or height.
• display:inline elements cannot be animated. If you want an inline element to animate, set display:inline-block.

Problem #2: Things look weird / animations aren’t behaving

• Check to make sure all flipIds are unique. At any point, there can only be one element with a specified flipId on the page. If there are multiple Flipped elements on the page with the same id, the animation will break.
• Make sure you are animating the element you want to animate and not, for instance, a wrapper div. If you are animating an inline element like some text, but have wrapped it in a div, you’re actually animating the div, which might have a much wider width that you’d expect at certain points, which will throw off the animation. Check to see if you need to add an inline-block style to the animated element.
• Make sure you don’t have any competing CSS transitions on the element in question.
• If you are animating an image, try giving the image hard-coded dimensions and seeing if that fixes the problem. (If you are relying on the innate dimensions of the image, it might not have been fully rendered by the browser in time for the new image dimensions to be measured.)

Problem #3: It’s still not working

• Try out the debug prop. If you still can’t figure out what’s going wrong, you can add the the debug prop directly on your Flipper component to pause transitions at the beginning.
• If you think something might actually be broken, or are completely stuck, feel free to make an issue.

Performance

React-flip-toolkit does a lot of work under the hood to try to maximize the performance of your animations — for instance, off-screen elements won’t be animated, and style updates are batched to prevent layout thrashing. However, if you are building particularly complex animations—ones that involve dozens of elements or large images— there are some additional strategies you can use to ensure performant animations.

Memoization

When you trigger a complex FLIP animation with react-flip-toolkit, React could be spending vital milliseconds doing unnecessary reconciliation work before allowing the animation to start. If you notice a slight delay between when the animation is triggered, and when it begins, this is probably the culprit. To short-circuit this possibly unnecessary work, try memoizing your component by using React.memo or PureComponent for your animated elements, and seeing if you can refactor your code to minimize prop updates to animated children when an animation is about to occur.

will-change:transform

.box {
  will-change: transform;
}

This CSS property tells the browser to anticipate changes to an element. It should be used with caution, because it can increase browser resource usage. If you notice rendering issues in your animation, I would recommend trying it out and seeing if it increases the performance of the animation.