- \n {data.map(color => (\n
![react-flip-toolkit animated logo](\"./example-assets/rft-logo.gif\"){kind=logo}
\n\n\n## Comparison with other React FLIP libraries\n\n| Feature | `react-flip-move` | `react-overdrive` | `react-flip-toolkit` |\n| ---------------------------------------------- | :---------------: | :---------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: Tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful but less simple: Tweening two elements](#more-useful-but-less-simple-tweening-two-elements)\n- [The Components](#the-components)\n - [1. Flipper component](#1-flipper-component)\n - [2. Flipped component](#2-flipped-component)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n ![an animation showing click to expand a photo](\"./example-assets/photogrid.gif\")
\n\n
\n\n ![a smoothly transitioning menu dropdown](\"./example-assets/dropdown.gif\")
\n\n
\n\n ![an animation demoing sort and filter operations](\"./example-assets/sortfilter-1.gif\")
\n\n
![an animation demoing nested scale transforms](\"./example-assets/nested-example.gif\")
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | `react-flip-move` | `react-overdrive` | `react-flip-toolkit` |\n| ---------------------------------------------- | :---------------: | :---------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: Tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful but less simple: Tweening two elements](#more-useful-but-less-simple-tweening-two-elements)\n- [The Components](#the-components)\n - [1. Flipper component](#1-flipper-component)\n - [2. Flipped component](#2-flipped-component)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | `react-flip-move` | `react-overdrive` | `react-flip-toolkit` |\n| ---------------------------------------------- | :---------------: | :---------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: Tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful but less simple: Tweening two elements](#more-useful-but-less-simple-tweening-two-elements)\n- [The Components](#the-components)\n - [1. Flipper component](#1-flipper-component)\n - [2. Flipped component](#2-flipped-component)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | `react-flip-move` | `react-overdrive` | `react-flip-toolkit` |\n| ---------------------------------------------- | :---------------: | :---------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n ![an animation demoing sort and filter operations](\"./example-assets/sort-filter.gif\")
\n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | `react-flip-move` | `react-overdrive` | `react-flip-toolkit` |\n| ---------------------------------------------- | :---------------: | :---------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [FAQ](#faq)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------------------------------------------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `{stiffness: 1000`, `damping: 500`, `mass: 3}` | `object` | **The default easing for all transitions uses springs.** You can customize the spring by changing the `stiffness`, `damping`, or `mass` values passed in the `spring` object prop. If you provide an `ease` prop (described below), that will be used instead of a spring. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------------------------------------------: | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `{stiffness: 1000`, `damping: 500`, `mass: 3}` | `object` | **The default easing for all transitions uses springs.** You can customize the spring on a per-element basis by changing the `stiffness`, `damping`, or `mass` values passed in the `spring` object prop. If you provide an `ease` prop (described below), that will be used instead instead of a spring. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n\n\n#### Callback props\n\n| prop | arguments | details |\n| --------------- | :---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onAppear | `element`, `index` | Called when the element first appears. It is provided a reference to the DOM element being transitioned as the first argument, and the index of the element relative to all appearing elements as the second. |\n| onDelayedAppear | `element`, `index` | This is a replacement for `onAppear` that is called only after all exiting elements have finished exiting. It automatically applies `opacity: 0` to newly appeared elements at the very beginning. The `onDelayedAppear` function is responsible for setting the `opacity` to the final value. |\n| onStart | `element` | Called when the FLIP animation starts. It is provided a reference to the DOM element being transitioned as the first argument |\n| onComplete | `element` | Called when the FLIP animation completes. It is provided a reference to the DOM element being transitioned as the first argument. (If transitions are interruped by new ones, `onComplete` will still be called.) |\n| onExit | `element`, `index`, `removeElement` | Called when the element is removed from the DOM. It must call the `removeElement` function when the exit transition has completed. |\n\n#### Transform props\n\nBy 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_:\n\n| prop | type | details |\n| --------- | :----: | :---------------------------------- |\n| translate | `bool` | Tween `translateX` and `translateY` |\n| scale | `bool` | Tween `scaleX` and `scaleY` |\n| opacity | `bool` | |\n\n#### Advanced props\n\n| prop | type | details |\n| ----------------- | :--------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| componentId | `string` | Unique identifier for the component |\n| componentIdFilter | `array`,`string` | Only apply FLIP transitions if the transition originates or ends with a component with the specified `componentId`. To limit the application of an inverse transform, you refer to the parent's `componentId` [as seen in this example.](https://github.com/aholachek/react-flip-toolkit/blob/master/demo/src/CardsExample/UserGrid.js#L44) |\n\n## Scale transitions made eas(ier)\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, and Edge. Seems to work ok in IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## FAQ\n\n- **Why isn't anything animating?**\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n- **Why does my animation look \"off\"?**\n - You can try temporarily adding [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning to see if anything isn't working correctly.\n\n- **Why is the element animating from or to an unexpected position?**\n - 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, things will start to get weird. Check to make sure all `flipId`s are unique.\n","gitHead":"34028700e99ddf2ec49a191f3821845a215f889c","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.0-beta1_1533207040062_0.9421980477054059","host":"s3://npm-registry-packages"}},"4.0.0-beta2":{"name":"react-flip-toolkit","version":"4.0.0-beta2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.0-beta2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"b3d53fb48386113d6a726ed6c418c444af417aac","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.0-beta2.tgz","fileCount":29,"integrity":"sha512-i12Qv4e2fm4zcwrTxxGDbCGPXhypl3YgIJbuOiX6lVf9zo0qpHF9CkYoF0a7l7idXxYFZvRU+EBkDR+YYnvaRg==","signatures":[{"sig":"MEUCIDzUYGILefYTe1E6A8rxbBr/oTZEWmafmWj4MoUXt/clAiEAwmlXsd2c7UVFgMfucBshUqU8jAOAHn60ZobceOEF3Jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":325134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZb/+CRA9TVsSAnZWagAARmcP/iOJWbz/WhqTmdtVbJh9\naJ7Lth/buNEh1o/4yxmDLCm+hseV0lBXcByC4PRIlIlH7aKfrM1aTDtp5kVX\n1RfUROlSdf6VpoiPib/LMX5qJCiUtfbZW91e8L9ohUHrz88IemxD1zxSczLB\nwMukxSstZ1AsPF1Jsprk0NWxM7FjfkujouqK5IIikI641U72wOgiks122XyX\nkdHINoOweSHxdCvTzBS0+JaUVMGDPrnMrzOdctkK7gBfwxDYvMIUlisoGWQ4\nsL+YPuP3hIGUqP+jJN7Q8VMbM0YCPAcB8f8sw6d9XIjsfMw+FTevE+G3F9fT\n8UAc+i4EvdVI6Z3izW7RGteSUCa/O54ln8PHQ+rXx6LdpjSOqKbidJGXjCm6\nUiwfppZehYNxXdUPMND4S+wUQr38lgigyf/1lLMM1pUlZyJdoVgByp9QXgX8\nbzlY2mmkDXLhV7favq1E/JIAK7w4ec+BOXBVA0QnZy5fKokIwo4EP2ENIAhf\ngOJxCjJdrbdUVQ7pnzviZ5YV9Gss32ef/IW4Ld23DOUysrt5fAOj0LQU0lvM\n5k1+Ktj5oeBcvWtEkX5/gy8TJVWC0g/VC1cG9UnpV5sjzE9fTrCBT2qh/iRd\nk71tcW7i0+Xx5L65jNAivk0zhffktiEWjhsH3ULl7o0L6O2szNdr3IKyZ39J\nI0Lt\r\n=N4T3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","readme":"\n# react-flip-toolkit\n\n\n\n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/). The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the position of later items is dependent on the position of previous ones. Provide `true` to stagger the element with all other staggered elements, or if you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n| prop | arguments | details |\n| --------------- | :---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onAppear | `element`, `index` | Called when the element first appears. It is provided a reference to the DOM element being transitioned as the first argument, and the index of the element relative to all appearing elements as the second. |\n| onDelayedAppear | `element`, `index` | This is a replacement for `onAppear` that is called only after all exiting elements have finished exiting. It automatically applies `opacity: 0` to newly appeared elements at the very beginning. The `onDelayedAppear` function is responsible for setting the `opacity` to the final value. |\n| onStart | `element` | Called when the FLIP animation starts. It is provided a reference to the DOM element being transitioned as the first argument |\n| onComplete | `element` | Called when the FLIP animation completes. It is provided a reference to the DOM element being transitioned as the first argument. (If transitions are interruped by new ones, `onComplete` will still be called.) |\n| onExit | `element`, `index`, `removeElement` | Called when the element is removed from the DOM. It must call the `removeElement` function when the exit transition has completed. |\n\n#### Transform props\n\nBy 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_:\n\n| prop | type | details |\n| --------- | :----: | :---------------------------------- |\n| translate | `bool` | Tween `translateX` and `translateY` |\n| scale | `bool` | Tween `scaleX` and `scaleY` |\n| opacity | `bool` | |\n\n#### Advanced props\n\n| prop | type | details |\n| ----------------- | :--------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| componentId | `string` | Unique identifier for the component |\n| componentIdFilter | `array`,`string` | Only apply FLIP transitions if the transition originates or ends with a component with the specified `componentId`. To limit the application of an inverse transform, you refer to the parent's `componentId` [as seen in this example.](https://github.com/aholachek/react-flip-toolkit/blob/master/demo/src/CardsExample/UserGrid.js#L44) |\n\n## Scale transitions made eas(ier)\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, and Edge. Seems to work ok in IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n- **Why does my animation look \"off\"?**\n - You can try temporarily adding [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning to see if anything isn't working correctly.\n\n\n- **Why isn't anything animating?**\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n\n- **Why is the element animating from or to an unexpected position?**\n - 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, things will start to get weird. Check to make sure all `flipId`s are unique.\n","gitHead":"4089d52b2fdd5307e8a3345b9b78a92680f0b4aa","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.0-beta2_1533394942067_0.7242983847838533","host":"s3://npm-registry-packages"}},"4.0.0-beta3":{"name":"react-flip-toolkit","version":"4.0.0-beta3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.0-beta3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"53fcbbe66f10ceeee541386ffd3495e4178c8ecc","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.0-beta3.tgz","fileCount":29,"integrity":"sha512-v3AOBk/92eaTwkhAWE5uksTlzIePL5akCluJ01rObjFeNzqY4TbEIKXdCyyZeoerVmWZ9rbwsK/cpOFCisrmLw==","signatures":[{"sig":"MEUCIQCEvE46i04A9ibQ21GSeRxFCTshKlgGlo5aDFlVUKXWyQIgWDxy0fobUaRrWd3X+tBCSPwXgQRQW56WSNVe7QjNbNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZcq3CRA9TVsSAnZWagAAP04P/2tkmn8wOM7k+5Y2Juhq\ncKIZIWDcyHlNCRAmZZNLf+pEyeBtRCOS+SToL1gIHGA8amLTEnKbEVRjuw98\nnuin4E/CLxVps/unW8kgvL3od2in2EFvKhRN5GdfNJTl79l3lqhRJav1Oh36\nP+lc63Vxzw3EGGrbKXmWPhLg7Y7W/A9kqA29zLAbENxxaEKreddpUx26gCOz\nY3fcI9dP1mb7somQNjFx28WWBKML1pPGyEE28F7tEQHKf2tQpPdGROpNCmNE\ni7sWOCERH+r+Oe+ATWQ77WrZ0IdxohK9de4rRbTB/WLPyHS378M8Gk5XVYLj\nLHIe3XbJVVGASAo4PEL/lelh3n5iBAPz9MK56jjDgCRFYiUN72wuhD/lXgXD\nY1bMrqA/Uv8lbPWiZdwsah/3gvQtZrm3IJ2NpecxkDUKI7Xawadr5nybPbiP\nl6NjTnapCYAzTMZJWwPuNznfHsDzMy41mf5M14QRsqCmfaQppjKDtaD/3VQf\nZz4lFQVxV3oDa2OKFL3yVvCJNpCl47wGkhFoyAulmZotkBm2PIw/jOoB/9/9\nHyUKUMNAwj8rEJxzDlRdE6ELZqgdxzg/7kFilUCWygpOVOqaKOYHOG9xlgDF\nAzuxjY6JLzvRnFa65Hc/ENoo0qsuWs6UeBGNSDD9s14JV8YVQppOdazKTaXf\nRCkB\r\n=Bd9m\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","readme":"\n# react-flip-toolkit\n\n\n\n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/). The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the position of later items is dependent on the position of previous ones. Provide `true` to stagger the element with all other staggered elements, or if you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n| prop | arguments | details |\n| --------------- | :---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onAppear | `element`, `index` | Called when the element first appears. It is provided a reference to the DOM element being transitioned as the first argument, and the index of the element relative to all appearing elements as the second. |\n| onDelayedAppear | `element`, `index` | This is a replacement for `onAppear` that is called only after all exiting elements have finished exiting. It automatically applies `opacity: 0` to newly appeared elements at the very beginning. The `onDelayedAppear` function is responsible for setting the `opacity` to the final value. |\n| onStart | `element` | Called when the FLIP animation starts. It is provided a reference to the DOM element being transitioned as the first argument |\n| onComplete | `element` | Called when the FLIP animation completes. It is provided a reference to the DOM element being transitioned as the first argument. (If transitions are interruped by new ones, `onComplete` will still be called.) |\n| onExit | `element`, `index`, `removeElement` | Called when the element is removed from the DOM. It must call the `removeElement` function when the exit transition has completed. |\n\n#### Transform props\n\nBy 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_:\n\n| prop | type | details |\n| --------- | :----: | :---------------------------------- |\n| translate | `bool` | Tween `translateX` and `translateY` |\n| scale | `bool` | Tween `scaleX` and `scaleY` |\n| opacity | `bool` | |\n\n#### Advanced props\n\n| prop | type | details |\n| ----------------- | :--------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| componentId | `string` | Unique identifier for the component |\n| componentIdFilter | `array`,`string` | Only apply FLIP transitions if the transition originates or ends with a component with the specified `componentId`. To limit the application of an inverse transform, you refer to the parent's `componentId` [as seen in this example.](https://github.com/aholachek/react-flip-toolkit/blob/master/demo/src/CardsExample/UserGrid.js#L44) |\n\n## Scale transitions made eas(ier)\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, and Edge. Seems to work ok in IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n- **Why does my animation look \"off\"?**\n - You can try temporarily adding [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning to see if anything isn't working correctly.\n\n\n- **Why isn't anything animating?**\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n\n- **Why is the element animating from or to an unexpected position?**\n - 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, things will start to get weird. Check to make sure all `flipId`s are unique.\n","gitHead":"2368fe4ac0e1936f6fbfc8ad18293e1b0c8453c4","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.0-beta3_1533397686444_0.0011632437990545252","host":"s3://npm-registry-packages"}},"4.0.0-beta4":{"name":"react-flip-toolkit","version":"4.0.0-beta4","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.0-beta4","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"e05b81c368a5eb7a0adb78de5e61f883d8b48f37","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.0-beta4.tgz","fileCount":29,"integrity":"sha512-1wTvY1jPh/SzKLeDj0AfB2dVIn6j1YPGG3bUVEijnWestH4t6GwRTqXNudGPoykMq/wrBKmzAf0vV08R13Tqrg==","signatures":[{"sig":"MEUCIEeIWM07AMu7CYMr6nyXUWySXVx/tyuRTZaHTTTZl0CFAiEAsZEsrRVN4ZgPh5dKLOfF0nMQeS22JtAE5uCK6a7QHUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZdQzCRA9TVsSAnZWagAAMvkP/123mlqmGEdHh9rCxHQW\nOFNnl3HFnWRw+Q2h1A3zSnlKX7Yn6DDkYXZFmAaxstAvJryoDpCuMLlmz7hi\nxI/RzKSAUmR4x/fmyTrH+ZIvT3T3gv3kfGcNOubUWVrEdNAAet6Z6ev9W4TU\nluthwm1nQEdf1WNHfL7/fJRLqQgjwtKRzk9fLCoAIr795O9H5nddLmx8gUBp\n1bmedy4S5a4iBnQCqQcKaDarkibAKPuPJrqaXWYlQ7y/SVqqd2qvlmXHKgwr\nmF6tWAPhzxWjs7rjxuGCYYD67xL/kwU/SMBIgTl2AxGP2X5LwGc7uJqPlR5i\nQYauncWubs27f9z4y3DgfjsFxVU2NcrwIYDyo2MmcTb8t2y6O8Oa1LAcCQUj\nwmKcqapZ4ocsPE8PxV1rhjfYJAR9XAKRzzQRmpb9/CmxHt6VT+TZED32irua\nJV2FN/00XRPLQedd5K35DsRvoeepFvzeVIKyElsi27REVFR4DgT9n5Sp93ag\nMYh34v9k7k9GtbvcVoEvKuJUcA9MHbnhQrjZxxBobLivqOApa70yx8hhat3s\noGsUKuoURNkfpaZNk0lUvh58bZcq3McIaad6Oy4x+kZxfJ6algRrqhvLOIHi\nrw/yV+3NBitNoZwxlmANP2YqXXlaTtqa3Dva2bcZRDSMQG3FW/yl8y9XQPAg\nDt9r\r\n=c1hb\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","readme":"\n# react-flip-toolkit\n\n\n\n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/). The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the position of later items is dependent on the position of previous ones. Provide `true` to stagger the element with all other staggered elements, or if you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n| prop | arguments | details |\n| --------------- | :---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onAppear | `element`, `index` | Called when the element first appears. It is provided a reference to the DOM element being transitioned as the first argument, and the index of the element relative to all appearing elements as the second. |\n| onDelayedAppear | `element`, `index` | This is a replacement for `onAppear` that is called only after all exiting elements have finished exiting. It automatically applies `opacity: 0` to newly appeared elements at the very beginning. The `onDelayedAppear` function is responsible for setting the `opacity` to the final value. |\n| onStart | `element` | Called when the FLIP animation starts. It is provided a reference to the DOM element being transitioned as the first argument |\n| onComplete | `element` | Called when the FLIP animation completes. It is provided a reference to the DOM element being transitioned as the first argument. (If transitions are interruped by new ones, `onComplete` will still be called.) |\n| onExit | `element`, `index`, `removeElement` | Called when the element is removed from the DOM. It must call the `removeElement` function when the exit transition has completed. |\n\n#### Transform props\n\nBy 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_:\n\n| prop | type | details |\n| --------- | :----: | :---------------------------------- |\n| translate | `bool` | Tween `translateX` and `translateY` |\n| scale | `bool` | Tween `scaleX` and `scaleY` |\n| opacity | `bool` | |\n\n#### Advanced props\n\n| prop | type | details |\n| ----------------- | :--------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| componentId | `string` | Unique identifier for the component |\n| componentIdFilter | `array`,`string` | Only apply FLIP transitions if the transition originates or ends with a component with the specified `componentId`. To limit the application of an inverse transform, you refer to the parent's `componentId` [as seen in this example.](https://github.com/aholachek/react-flip-toolkit/blob/master/demo/src/CardsExample/UserGrid.js#L44) |\n\n## Scale transitions made eas(ier)\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, and Edge. Seems to work ok in IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n- **Why does my animation look \"off\"?**\n - You can try temporarily adding [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning to see if anything isn't working correctly.\n\n\n- **Why isn't anything animating?**\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n\n- **Why is the element animating from or to an unexpected position?**\n - 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, things will start to get weird. Check to make sure all `flipId`s are unique.\n","gitHead":"557aea675f10d685dd22fe073f6eb89ed473cbb2","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.0-beta4_1533400114589_0.30474947784187023","host":"s3://npm-registry-packages"}},"4.0.0-beta5":{"name":"react-flip-toolkit","version":"4.0.0-beta5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.0-beta5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"6df0eede88fbd894b5c7ae8db769f47df755450b","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.0-beta5.tgz","fileCount":29,"integrity":"sha512-c1lmSC4EiVNceTPJMJWs6l+aIiuFuyA3RxP5gGwUDArpWX6rwhsqOAHXV9jwGPuGhY4vpkCTKLshREITGL7V5w==","signatures":[{"sig":"MEQCID/yH5PJE+pKd/UypqdhFqBgG4OFNhMwKJUmxJ+p5RCwAiA8fMqBMCrEzanCQ1GuIEBmuNHOt6AzMWngq9xJtE8UAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZdj5CRA9TVsSAnZWagAAamoP/RFm5K9Nu6pg1gt4nn2P\ni9U16yJSQ5amCwGzJgbmwtkzgiV56CybmOtUD12sEokvu+qVFs69hytgkfAo\n9LwnePbgrBIbcjFX8Yr+BdZqRtCc16nfH6N5AvEVFa/nPAJPnvYVVzSMCs2q\nHSdmXwf6KLcE6T/jFT99hwP8ut7rdAdQfwH/2OynaLzcYsO0Bn+ODmctZo8R\neQnlKmY5wDelbRcDSc4m6QfDdUQrYyG1xnywYkeytS3WNQZ2DTe/2N+Y427U\n5N+dTlI/nHH0MqhfRH7J6dKqyFwzFY34nNuB3n60v6H80YDfCbcFvEnZM6x1\n8wIp3fs1ISLyTtMcoXDXlfZbz4zp6SxL6blTNBIWMyGZNFiGNH9U8TApXC8v\nOE7NfH8F7/dMZYLMGqp4eJHHl9WIsV4HTZXR5ZG/Z6jbcI5cdK3SpAhYK9hY\nQ0BZ84xf0cu9GfGnWa8izCdn3yxcMxbOKx8S74SIBVVyU05ary6tYjvDv4Q7\n2ytaA0dQ2hoGDrIglC58BBuy+D+R+f7zyeOkKYmVEOjf8X+6f1BWbpvegfP4\nowTk/z/EWerz+nYyxLq3Cfvg5hWS8rTRQnc5HSRz0yQX9vIKDUusd5AyPa/J\npi9eXP9yESoIz+BNfkp2Gpj2hPK8sh8C8fkM0zlvXiUeFUv2W5u2zdGNWTp/\npfHT\r\n=ktva\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","readme":"\n# react-flip-toolkit\n\n\n\n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/). The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the position of later items is dependent on the position of previous ones. Provide `true` to stagger the element with all other staggered elements, or if you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n| prop | arguments | details |\n| --------------- | :---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onAppear | `element`, `index` | Called when the element first appears. It is provided a reference to the DOM element being transitioned as the first argument, and the index of the element relative to all appearing elements as the second. |\n| onDelayedAppear | `element`, `index` | This is a replacement for `onAppear` that is called only after all exiting elements have finished exiting. It automatically applies `opacity: 0` to newly appeared elements at the very beginning. The `onDelayedAppear` function is responsible for setting the `opacity` to the final value. |\n| onStart | `element` | Called when the FLIP animation starts. It is provided a reference to the DOM element being transitioned as the first argument |\n| onComplete | `element` | Called when the FLIP animation completes. It is provided a reference to the DOM element being transitioned as the first argument. (If transitions are interruped by new ones, `onComplete` will still be called.) |\n| onExit | `element`, `index`, `removeElement` | Called when the element is removed from the DOM. It must call the `removeElement` function when the exit transition has completed. |\n\n#### Transform props\n\nBy 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_:\n\n| prop | type | details |\n| --------- | :----: | :---------------------------------- |\n| translate | `bool` | Tween `translateX` and `translateY` |\n| scale | `bool` | Tween `scaleX` and `scaleY` |\n| opacity | `bool` | |\n\n#### Advanced props\n\n| prop | type | details |\n| ----------------- | :--------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| componentId | `string` | Unique identifier for the component |\n| componentIdFilter | `array`,`string` | Only apply FLIP transitions if the transition originates or ends with a component with the specified `componentId`. To limit the application of an inverse transform, you refer to the parent's `componentId` [as seen in this example.](https://github.com/aholachek/react-flip-toolkit/blob/master/demo/src/CardsExample/UserGrid.js#L44) |\n\n## Scale transitions made eas(ier)\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, and Edge. Seems to work ok in IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n- **Why does my animation look \"off\"?**\n - You can try temporarily adding [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning to see if anything isn't working correctly.\n\n\n- **Why isn't anything animating?**\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n\n- **Why is the element animating from or to an unexpected position?**\n - 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, things will start to get weird. Check to make sure all `flipId`s are unique.\n","gitHead":"2f9c67a84b70c260cc11b0d6f6048c9450869b1f","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.0-beta5_1533401334937_0.6616989669688451","host":"s3://npm-registry-packages"}},"4.0.0-beta6":{"name":"react-flip-toolkit","version":"4.0.0-beta6","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.0-beta6","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"da9c36a63c95647577b466f586f56452036fe8e0","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.0-beta6.tgz","fileCount":29,"integrity":"sha512-ddMqbhEePmTFHYgVni8UlhDRw/TS0tCKV2mBatUWslNAcXn+hSOGmOkcuI7A0hw0SXGUUPffSL7UxOSyuOSaJw==","signatures":[{"sig":"MEYCIQDYHK7XTLviInamtIcNtLWQRSKjfZMxRrDKIuzCxoLDFQIhAMUOWbympJZRwsii76QTX3ywg1P+P5Om0njhNVTRAeTR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZi1RCRA9TVsSAnZWagAARV8P/iR2LUq7MRyK0hM0v8Kg\ne2a1abs6pnt6JN4eghYl5/SNahP6HAVYKnD64pfPEGz0OLLbXkgsY9Uwm0S/\nGZgRhX9aGS0I1ZrekJ+hk0z88s6cuoYBFprYJTFXcUdCyeR/17MaqwnmY+Yl\nBMW5c27z2C6JWwgvZaymeOo/FRg0JgLsBiJ8Y9OzzU7JlmQTvhNKYOSIxyn5\nPT/mvoQm2pEfWixxmK8KhJUyYWqt2j+j3Pm/FVy+oP4ouJiJPl1Dgd5XlsxR\nM5pKOvz/F1bvkdemaDYs2axqMgl9Wmb76zQwdv+uMHiOUJc4tbQRNtHF9oyG\na13fCjdrbo7n7x8hfiA9sfFza4GyA7M0JhGkWtOmD9TVzzeFWsNYHkS6HBG1\nV3DV3KgBv3ph7bEaDKu5Umrd9moj8AH8s1jahBUoLQsumIEQXcwKcmeQBpTJ\n6Wf3wmWzFJFt15pswbd4woRGZiW4Cc11NhSeGwUwlCcjha/F+2Q9mhPFuuBq\nWyujfS9NjtV7KK03EyZBHzDwjZH9U+moY6ZGKJa5dcTYYsdttWf3pVjU8/z2\nI6c5+BXDNW76mRwxkq9Jmb6FxxnXeEEfselUS7X321ehv2L2ffdwYJ9byCvm\n2Z6Kpu8ejuZEr6I0h3Li9VNDw4VQk/V7Rl88VS4lgfdu1Hx6cht2MsKv367f\nVu9L\r\n=OTqb\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","readme":"\n# react-flip-toolkit\n\n\n\n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/). The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the position of later items is dependent on the position of previous ones. Provide `true` to stagger the element with all other staggered elements, or if you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n| prop | arguments | details |\n| --------------- | :---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onAppear | `element`, `index` | Called when the element first appears. It is provided a reference to the DOM element being transitioned as the first argument, and the index of the element relative to all appearing elements as the second. |\n| onDelayedAppear | `element`, `index` | This is a replacement for `onAppear` that is called only after all exiting elements have finished exiting. It automatically applies `opacity: 0` to newly appeared elements at the very beginning. The `onDelayedAppear` function is responsible for setting the `opacity` to the final value. |\n| onStart | `element` | Called when the FLIP animation starts. It is provided a reference to the DOM element being transitioned as the first argument |\n| onComplete | `element` | Called when the FLIP animation completes. It is provided a reference to the DOM element being transitioned as the first argument. (If transitions are interruped by new ones, `onComplete` will still be called.) |\n| onExit | `element`, `index`, `removeElement` | Called when the element is removed from the DOM. It must call the `removeElement` function when the exit transition has completed. |\n\n#### Transform props\n\nBy 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_:\n\n| prop | type | details |\n| --------- | :----: | :---------------------------------- |\n| translate | `bool` | Tween `translateX` and `translateY` |\n| scale | `bool` | Tween `scaleX` and `scaleY` |\n| opacity | `bool` | |\n\n#### Advanced props\n\n| prop | type | details |\n| ----------------- | :--------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| componentId | `string` | Unique identifier for the component |\n| componentIdFilter | `array`,`string` | Only apply FLIP transitions if the transition originates or ends with a component with the specified `componentId`. To limit the application of an inverse transform, you refer to the parent's `componentId` [as seen in this example.](https://github.com/aholachek/react-flip-toolkit/blob/master/demo/src/CardsExample/UserGrid.js#L44) |\n\n## Scale transitions made eas(ier)\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, and Edge. Seems to work ok in IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n- **Why does my animation look \"off\"?**\n - You can try temporarily adding [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning to see if anything isn't working correctly.\n\n\n- **Why isn't anything animating?**\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n\n- **Why is the element animating from or to an unexpected position?**\n - 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, things will start to get weird. Check to make sure all `flipId`s are unique.\n","gitHead":"206b006c0f82d7a8be539d8bb8c51d2b16be900f","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.0-beta6_1533422928119_0.6386640630445108","host":"s3://npm-registry-packages"}},"4.0.0-beta7":{"name":"react-flip-toolkit","version":"4.0.0-beta7","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.0-beta7","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"41d4743decca86fd4d67d302dc9d27f2c9133076","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.0-beta7.tgz","fileCount":29,"integrity":"sha512-Q6AacQ3HzJb72j7q4on/6dOdfHNTgfd1HMu4GbdJFsdCq0xCDYqjvDsBSuuVAexpswxuNiK8RrwUgtMx3swDUA==","signatures":[{"sig":"MEYCIQCjmoYaEY3r6nnRuV9W7w4jxayScA2vTvRSJzYOi8LjbwIhAO7/to4NRFVPg77M8Ei1G4bmN/Nk+m3t6uxw4dcDP2Pc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":324527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZmbhCRA9TVsSAnZWagAA1pEP/2k+XIkh0KeyrzI+dxo4\nzYiZIQGDrO/6DGrLhycXyjZnbB0dnIDMOa94FU9zjteKpAGxtdjO6JDFExRN\nUFsYYS4jzpVDpC51k0GePvKKuJYVGfZBBbZI4QOWH77TVMPlTPbOuOLY9OCU\nKxUGBrc7oBPi70fRM6JcnEkofiULrQ+AoNasezcsoBhUiq67I4kj8uBo6Iv9\n1b2p5zbCDlYoJqlUloNvAuIPAYAKX7ImY8AOV+bqdpwioolKbTOXkNrNjgO5\neZIjP7SojlNe6hr3OnqUwK+IB3kfBEAVE1HiMJFoUIM5JeV/EewWsCiirgr+\ngMDsrlNbCQPHTua3t4rqdWUnEpyzoy5gbxcmrj/20d1dxeutzpxTXkdpn0p/\nkXUlNhAmeNVaDbDWhK2JE2OWErFmZrGWrrG/QT022dRYrfsMYcAlH2+rFOE9\nd2QazoZY4Jk6TDrjNBBx9pNAjILU+A1GAr/ARhoQma1xSDRXQxPH85ClYogy\nLMe/RkYGBwqirtUeNyU5raErk/oBX3WZTLkxJhC1hURtFqi8/SvvsQNTvxyg\nkZvbk3mRvO1dFwycOG8YgpiaKgvIRWLXdrtJkFt1PC6QGmHFRPl77pmG4tQZ\n0t+Qg+59rkr/1uATLCPM1vZsEM1k+jAeEAbJsr4YEbGvIE3VUalLEo3SpK73\ncPQx\r\n=Mnjb\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","readme":"\n# react-flip-toolkit\n\n\n\n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the position of each item follows the previous one. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n| prop | arguments | details |\n| --------------- | :---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onAppear | `element`, `index` | Called when the element first appears. It is provided a reference to the DOM element being transitioned as the first argument, and the index of the element relative to all appearing elements as the second. |\n| onDelayedAppear | `element`, `index` | This is a replacement for `onAppear` that is called only after all exiting elements have finished exiting. It automatically applies `opacity: 0` to newly appeared elements at the very beginning. The `onDelayedAppear` function is responsible for setting the `opacity` to the final value. |\n| onStart | `element` | Called when the FLIP animation starts. It is provided a reference to the DOM element being transitioned as the first argument |\n| onComplete | `element` | Called when the FLIP animation completes. It is provided a reference to the DOM element being transitioned as the first argument. (If transitions are interruped by new ones, `onComplete` will still be called.) |\n| onExit | `element`, `index`, `removeElement` | Called when the element is removed from the DOM. It must call the `removeElement` function when the exit transition has completed. |\n\n#### Transform props\n\nBy 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_:\n\n| prop | type | details |\n| --------- | :----: | :---------------------------------- |\n| translate | `bool` | Tween `translateX` and `translateY` |\n| scale | `bool` | Tween `scaleX` and `scaleY` |\n| opacity | `bool` | |\n\n#### Advanced props\n\n| prop | type | details |\n| ----------------- | :--------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| componentId | `string` | Unique identifier for the component |\n| componentIdFilter | `array`,`string` | Only apply FLIP transitions if the transition originates or ends with a component with the specified `componentId`. To limit the application of an inverse transform, you refer to the parent's `componentId` [as seen in this example.](https://github.com/aholachek/react-flip-toolkit/blob/master/demo/src/CardsExample/UserGrid.js#L44) |\n\n## Scale transitions made eas(ier)\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, and Edge. Seems to work ok in IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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, things will start to get weird. Check to make sure all `flipId`s are unique.\n - Make sure you are animating the element you want to animate and not, for instance, a wrapper div. For instance, 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.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning and outline the `Flipped` components with a hot pink outline. Here's an example of solving a problem with the `debug` prop:\n\nThe broken animation:\n![react-flip-toolkit broken animation example](\"./example-assets/debugging_flip.gif\")
\n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n![react-flip-toolkit broken animation with debug prop](\"./example-assets/broken_flip.png\")
\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n \n```\n\nWe can either wrap both the `p` and the `button` in their own `Flipped ` containers, or add a style of `inline-block` on the wrapper `div`. To verify once we add the fix, we can rerun the animation with the `debug` prop applied:\n\n![react-flip-toolkit fixed animation](\"./example-assets/corrected_flip.png\")
\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"e8a858dfc14d26384bd02d99fa9b6fd173900f9b","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.0-beta7_1533437664523_0.451257614485719","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"react-flip-toolkit","version":"4.0.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"946275cda77d189f801e442482cc0ffbf7ce0241","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.0.tgz","fileCount":30,"integrity":"sha512-mBDyTnP5lXzHVEf78aQnQ22rL3G1zjX2rbnJtDHwK0n825EGh/imEV2mL303YW6/QPCRAQ9Y1nAgRLtHZckwgA==","signatures":[{"sig":"MEYCIQC/i4NLtBQCchDmAVwpTOQDZAhh9yi0c4m7hVFBWIQiowIhAJpiMQSAy61Igc4u/T0eU9MAj0dOwMqLiM/ZEezKayxs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZwkuCRA9TVsSAnZWagAAz8YP+wfQSHTTl0xbAdPLKe3b\n4HHpKKhskcb54BBlEhCRf4HG88guHItnwGO/PIbk96SapAgw+VfhsyaOHUNY\nQoyqTamyUt8Ea0hZOT4TVjRS/OSFTi2rQOprSlVHIF1s5QBY7KMZjYgDgusP\nCKeWqrXl3MkR38TTa18uXDHqYaFsDMMXfra/qZUqQJc7WSJ9hEUpU0+uaqZL\nirhzKuRDa/EsqNmK0SWrftAMZTfCU9EnfY0/y0nut6pkh86z++8Oe0hH/AT5\nJ823HHvLkF2g4qsOep5pcvHKtDgvK4K0N+wN+p3OlBAOImgKPS8ogXE/+636\nSJJjYICQryFpkBH+6zqsBKBexNWg3rr9XgrrfNd0eoNXnUmIGBKBjZCxbxUc\nnDdfOsPpBVpahgkpKgme91G3G9BJabmWSSM5ef6Gb2WC3mLVBPKSIoQwRt4Y\n4W6SVw78Op6Uqeb+9yq9+cMDjN6w8/jTXJiIL7CmVjcI5ETOGEEiphkjxzqN\nmms04Ud4jl3oWbrwEzzx4hZpqabAYJEsRpV8X4M3Xr1oNCvzBJV9kN5IXBTB\nqPzDcZAYxoNHwl6KdjfPhjcCK/vjlJbagXZoHLH2W8iHJa9YZXHJc/OmstTT\nRBwzCBcDr4RTskV6KphMmYSFYEifWSBuCq5GXnFW1u3AxiJxxaI3en2LNr3J\nswTL\r\n=6Y02\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","gitHead":"42cfd49071456ca18b5b64c5eaae41e54ff2dd79","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.0_1533479213577_0.9807094138818391","host":"s3://npm-registry-packages"}},"4.0.1-beta1":{"name":"react-flip-toolkit","version":"4.0.1-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.1-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"bf4c895ffa3f0498c9bce63871d80c988d0c98e6","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.1-beta1.tgz","fileCount":30,"integrity":"sha512-tcyKQTMftVxxz7oDnBwyC2+5/l8F6MMOlOAM6gS4YkwwIXWaB/ig+V7ORypjlsNi79ntqlELimXjt6bcrouj4g==","signatures":[{"sig":"MEYCIQC7lLplSxuHZyGf8FHoL9G6r+5c2htLwpcrc1Ho5wf4FwIhAL4QBfaFiP4u6mNJz+oqZfzGqSbtJm1EFH/m0erjjx7L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbb7LBCRA9TVsSAnZWagAAf+cP/i8U+jWpRn0auVHPCSoC\nJWRmuUHRE5l6MWAfmrUU1rZ8zq7eyb/ApHdJn1kWgN8j6ICwZE/tLsEnFDP3\n8M/oZUFfjdau5F9z+rubjRTeCRQuEINCzxdsrGSkNi3pz6eD8jwJI8YsKuS4\nWX6vbc+g2fM0R1eUYSu/ABlfygzYOp2cClHNFyst7Tbeh1MbOj1zhgXN8TJv\n/uia2cm0SoYHfsSKN7fQYs0URerux7tjV76FvnMBrV4uEM2bLVejFed+9Ksa\ngABumtYcERknWDsfWaipfJ/6yf1+mWZyVZdp/PZn2+9+/sugL7TM5db7NOho\nflJPRHcBcK5AGImGTIUYpOd0TzK/h54PaVNAegw84TIKwj/hri4uBwMizYGJ\nhmQKeiBzyIsLVhscirgUeXh/yzqJD5c/gMlmXMgsVPcGZjAocv4FuYXi0Eyf\nl5daFApndn006WfEeio0zjoUGSBL2qyD0g2GJOVUOkFkfQrtxvpcW0MDfWHQ\nC9iCT+8hvDk9wg3aSCBAcjwbYUO6HWO9TtMv/gSRWb6lJ4gb/w6mwU314gnR\nYf2ix8pWrndpYkoxDQr51FSGf58ucgAE0iKfpf6ajqcfT1Sm4Z+DGJ9JPszW\nTmKiVciBpq+YoIYM5T79EH0fXVAFy43uBmYJEqvizUlQCof3sokjjqLR1cWk\nWk/g\r\n=Lf2m\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","readme":"\n\n\n\n# react-flip-toolkit\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n
\n\n![spring easing explorer](\"./example-assets/spring-options.gif\")
\n\n\n\n## Quick start\n\n`npm install react-flip-toolkit`\n\nWrap your container element with a `Flipper` component that has a `flipKey` prop that changes every time an animation should happen.\n\nWrap elements that should be animated with `Flipped` components that have `flipId` props matching them across renders.\n\n### Simplest example: tweening a single element\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n
\n{this.props.text}
\n \n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"e8a858dfc14d26384bd02d99fa9b6fd173900f9b","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.0-beta7_1533437664523_0.451257614485719","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"react-flip-toolkit","version":"4.0.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"946275cda77d189f801e442482cc0ffbf7ce0241","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.0.tgz","fileCount":30,"integrity":"sha512-mBDyTnP5lXzHVEf78aQnQ22rL3G1zjX2rbnJtDHwK0n825EGh/imEV2mL303YW6/QPCRAQ9Y1nAgRLtHZckwgA==","signatures":[{"sig":"MEYCIQC/i4NLtBQCchDmAVwpTOQDZAhh9yi0c4m7hVFBWIQiowIhAJpiMQSAy61Igc4u/T0eU9MAj0dOwMqLiM/ZEezKayxs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZwkuCRA9TVsSAnZWagAAz8YP+wfQSHTTl0xbAdPLKe3b\n4HHpKKhskcb54BBlEhCRf4HG88guHItnwGO/PIbk96SapAgw+VfhsyaOHUNY\nQoyqTamyUt8Ea0hZOT4TVjRS/OSFTi2rQOprSlVHIF1s5QBY7KMZjYgDgusP\nCKeWqrXl3MkR38TTa18uXDHqYaFsDMMXfra/qZUqQJc7WSJ9hEUpU0+uaqZL\nirhzKuRDa/EsqNmK0SWrftAMZTfCU9EnfY0/y0nut6pkh86z++8Oe0hH/AT5\nJ823HHvLkF2g4qsOep5pcvHKtDgvK4K0N+wN+p3OlBAOImgKPS8ogXE/+636\nSJJjYICQryFpkBH+6zqsBKBexNWg3rr9XgrrfNd0eoNXnUmIGBKBjZCxbxUc\nnDdfOsPpBVpahgkpKgme91G3G9BJabmWSSM5ef6Gb2WC3mLVBPKSIoQwRt4Y\n4W6SVw78Op6Uqeb+9yq9+cMDjN6w8/jTXJiIL7CmVjcI5ETOGEEiphkjxzqN\nmms04Ud4jl3oWbrwEzzx4hZpqabAYJEsRpV8X4M3Xr1oNCvzBJV9kN5IXBTB\nqPzDcZAYxoNHwl6KdjfPhjcCK/vjlJbagXZoHLH2W8iHJa9YZXHJc/OmstTT\nRBwzCBcDr4RTskV6KphMmYSFYEifWSBuCq5GXnFW1u3AxiJxxaI3en2LNr3J\nswTL\r\n=6Y02\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"\n\n\n# react-flip-toolkit\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n \n\n
\n\n \n\n
\n\n
\n\n\n\n## Quick start\n\n`npm install react-flip-toolkit`\n\nWrap your container element with a `Flipper` component that has a `flipKey` prop that changes every time an animation should happen.\n\nWrap elements that should be animated with `Flipped` components that have `flipId` props matching them across renders.\n\n### Simplest example: tweening a single element\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning and outline the `Flipped` components with a hot pink outline. Here's an example of solving a problem with the `debug` prop:\n\nThe broken animation:\n\n\n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n \n```\n\nWe can either wrap both the `p` and the `button` in their own `Flipped ` containers, or add a style of `inline-block` on the wrapper `div`. To verify once we add the fix, we can rerun the animation with the `debug` prop applied:\n\n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"c15c25a168336df11082cbf784cd33e7a1aab485","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.1-beta1_1534046912628_0.7083620932276988","host":"s3://npm-registry-packages"}},"4.0.1":{"name":"react-flip-toolkit","version":"4.0.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"bc20247d821f67efa69d6c291062a6ae81c0449d","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.1.tgz","fileCount":30,"integrity":"sha512-p8pp3nphLo5EX9fIbawVZwY+ARATq/dYJUymSOp34l/qeEzdDTgULjD+LdXskRXtV2mzOQzMDCU7WHJ0WHvesQ==","signatures":[{"sig":"MEUCIQCjlkzaFF7HfwdTP1+2dTcsHKHNuGFcC80vaEaVlJkuKAIgV5B/LLflmOsB2stMXAOwIAFho2F114D5nUypc5WybNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZemCRA9TVsSAnZWagAA+0UQAI96awUnA/8BUIUdCJnJ\nt4z+tD1K5d9GlE1YsgwaWqcHpYnd1Ybz6nd+oF5FPE0lOmhAHXAHetr4cNJq\nQoWjfez7EWwXRwdoveF5e+55grpfyak/in9W8HKJpj+hrXKE5bK7o0OXwwLL\nI0ewc/9cUBK4zrM6u+k1s0m0wTBwOS3Yz3a/4skFA345zeDMneIV/GZ0Z1XU\n3Di99Aw32J5t5IrT5CX6t0crPBCtCGtYanlk3+elaBjksklBW0hRUEoeMOVP\njY0bDlupMGdwEd/5rq1mChs3nePQEizEpiTV2tZaCl05f2T7fRYn6omoYOFJ\ngKJB7wQbrz9qyzgn/1inhxQScz0bZ5nLW8V7sss9TbUYu/Tk5fcmEqeeqTAV\nYNBFIDgKcHGFPSPiZiM+WRQjjD1MHIkrsyYLEk8Q7RDK0pyCDVG00ChoJm/f\n7pAofEAmWVpAi73PgZdkQ1ezg2DR6/3q+FGNfzBOQsID3A6+8VjBZEn/h0Ez\n/IeGzWo5feUtWypPhA+wspZOUSMXNGdiUbBHRBE94OLJSQdjGcKAMsag7pte\n+APFYVhlVWA8HePlrpZ7Ygw0RTiwV7qxnC6bs3dPEu07F7Xk2UDHI27ba7MN\nlpYz8c38Fq76GHLfp+ap1IPgYKhTps0qo4iYHSZ6zq0oGtYep6xC8A8Ob80F\nwQEe\r\n=flGd\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","gitHead":"ea3d195cdd1b3e05357e4979018ab9ac98b940c4","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.1_1534433190167_0.6486065314250007","host":"s3://npm-registry-packages"}},"4.0.2":{"name":"react-flip-toolkit","version":"4.0.2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"66b6b94dabf7fae76e1d21c012dd64f6fdb76309","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.2.tgz","fileCount":30,"integrity":"sha512-wbZ0/R//rTYFNB/vw1/IP5f0GnFd8z3RIupYdVpSJFStS2S8lrGmUhpb8/F2aZ0zp8mR0RS3cEgoB7zC2MVjzQ==","signatures":[{"sig":"MEUCIEyqA3vNZcIyEwXkQkfbVuKroOCiIeC8d0EXOKSRMZJvAiEA1ZaDck6F4tIyncNWvpP6eZkMRdRUPhnzLo8kSPoj/bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZiOCRA9TVsSAnZWagAAk3cP+gKEl7sVxbwnvrPeK3Pp\niE2AGANBVV4zoC+PhdQ2leH8Ut90lHrsxO4jhNdzCC0vZ0xtV6NraWRQOdEZ\nJFRO0K7tegbk7eTFeuXt0rRTFw0lkOLsyWFc5jcxGswlTMbVCt37p0g75nxF\nAdDMWZoyT9onGGieIpMX1ccVhMQkhaEcAb7mEimyu36/KgM3HLFhCC6DTp2o\nBkO/s2ZRIoMoenRVCBI106kGkdGbN1dXMRtxBHWzvGUv/TtET9UknxszByDN\nodyuFOXLsoNsrOPP9seuejkamBe5/YS7x8u5EY+u6k5xEA7Tf/nijpL/h3vt\nBhihfpzHFQHfBnXOESbrRKk6RLJYnq6igqTsQ/BZ67NmXr0sTIcVz/B2VVHW\nIbBRu5eLB40jmQD+J5vYKucn4ssDxVDCTj3bCeAZYU5Jm2K5XDQnzIkoVY6T\noPJ518ns2dSvDKE2I7E7tWF4HfxfcWMB8hXb6skSkbmBPMWkYnGDI7oy8C4s\n/lZNJu0BIcGVpS5J5FgDJzGW/cjjNhpu9HFbUVqrYGvTWGEJTeDpItx/MSim\nu1NGjq5OD8xxUmsBeaOcDS3GaDaj4w2+CGHWqJosI3yxezUUZZc0sTYGuZdT\nUCkp6QO+p25WxSK2K4D3RXJv9fV4YtWHuoKaZrVqMl8OA7duVEWvz4xharWT\nxzTd\r\n=vQUm\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","files":["es","lib","umd"],"types":"lib/index.d.ts","module":"es/index.js","gitHead":"b01c8a158a0d66f666c9ea2fe22c42c166b7ce17","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.2_1534433421893_0.6973877294039594","host":"s3://npm-registry-packages"}},"4.1.0-beta1":{"name":"react-flip-toolkit","version":"4.1.0-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.1.0-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"5f10aec7753cb46fa09bc2c48a4d5058c59d41b2","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.1.0-beta1.tgz","fileCount":30,"integrity":"sha512-5FjvTOofGe6XtyvYoTvlS7gKy2IJAQTqQaMO9Ee4INXuqCv9S4bFeqDL+dpA1xc/Yd0zPoi4pTJ/qPW1l3q/rA==","signatures":[{"sig":"MEUCIQCTy/NDlIbdrmtXIV6Tw8CuvsnTiMC1mESQtyWomx2fGwIgTkAI5jmMeDACR2MRtvMDYV8SAN+CmZe9LBt0I4aFvQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiZWECRA9TVsSAnZWagAAmoAP+wWzPVUcfIHbqFgMmL3+\nCp28zE64mvDZZDdOLBjQHSqWT21HY+W7cU3zVXhfGnZNN4Os/GHYcuIvrA3k\nK1klolRmSygTJVnhwotTw2ZNDhBv9sMsv6sDkbRb3pQsb9Cy1LqI09R8Xhkp\nVrMJUTJCugQwSWzyf7SRA3NAQ+pz3sCXMnfsO84qrlkk7L9Bo/WlaXh5vWid\ngs+oBZjxbG3YfnjzPI9hlwPQlLmVT2j0lV2n7VUrmsFPXXQE4DOcPC+d1zh2\ndlu6SII97Nvac3vEc5b+cEJ4yz5uTYD3kf3EdWHm348TaS8yTHlxV4QVcFw9\n3Kb9R9JXzV1o9cdBIu4tGBOd0XHNuMD1pwkZf1jEkuQHKDkGYr4ENcYSrHUT\n1u4NKstqP3uC/p9NjKtSt8nLjtI1e8goVh64V0OgBqvMH1mIv4FuvJ1Rn04W\nEVMJqjXg9iyZZdY50aBpl6x1L/dmHooegWIkAQKQ9AkaO2VLqJ3w18Plb/Hy\n5d+EvrinXZzixpb8FnBJ5WD8lx6M/85ATXbLbdzsIQkvPr59zz1+M19tt4Dy\ngbLBa+bzGIeG8xYOQ20O7UZBlkSeQyU12vOZuSQ97LV4tSFsv6SqFjKAWNeD\nsCoyxupAyiMG1A+c4lCUCvoqCeg5nq8Kb2+lpcSdP1/fv7VSXCvu9Lt+IuAu\ni12k\r\n=kcy1\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n\n\n![React-flip-toolkit with React-Router](\"./example-assets/compressed-demo.gif\")
\n\n\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n ![an animation demoing onAppear and onExit callbacks](\"./example-assets/enter-exit.gif\")
\n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n
\n{this.props.text}
\n \n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"c15c25a168336df11082cbf784cd33e7a1aab485","scripts":{"test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"yarn run build","test:all":"jest; yarn run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.1-beta1_1534046912628_0.7083620932276988","host":"s3://npm-registry-packages"}},"4.0.1":{"name":"react-flip-toolkit","version":"4.0.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"bc20247d821f67efa69d6c291062a6ae81c0449d","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.1.tgz","fileCount":30,"integrity":"sha512-p8pp3nphLo5EX9fIbawVZwY+ARATq/dYJUymSOp34l/qeEzdDTgULjD+LdXskRXtV2mzOQzMDCU7WHJ0WHvesQ==","signatures":[{"sig":"MEUCIQCjlkzaFF7HfwdTP1+2dTcsHKHNuGFcC80vaEaVlJkuKAIgV5B/LLflmOsB2stMXAOwIAFho2F114D5nUypc5WybNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZemCRA9TVsSAnZWagAA+0UQAI96awUnA/8BUIUdCJnJ\nt4z+tD1K5d9GlE1YsgwaWqcHpYnd1Ybz6nd+oF5FPE0lOmhAHXAHetr4cNJq\nQoWjfez7EWwXRwdoveF5e+55grpfyak/in9W8HKJpj+hrXKE5bK7o0OXwwLL\nI0ewc/9cUBK4zrM6u+k1s0m0wTBwOS3Yz3a/4skFA345zeDMneIV/GZ0Z1XU\n3Di99Aw32J5t5IrT5CX6t0crPBCtCGtYanlk3+elaBjksklBW0hRUEoeMOVP\njY0bDlupMGdwEd/5rq1mChs3nePQEizEpiTV2tZaCl05f2T7fRYn6omoYOFJ\ngKJB7wQbrz9qyzgn/1inhxQScz0bZ5nLW8V7sss9TbUYu/Tk5fcmEqeeqTAV\nYNBFIDgKcHGFPSPiZiM+WRQjjD1MHIkrsyYLEk8Q7RDK0pyCDVG00ChoJm/f\n7pAofEAmWVpAi73PgZdkQ1ezg2DR6/3q+FGNfzBOQsID3A6+8VjBZEn/h0Ez\n/IeGzWo5feUtWypPhA+wspZOUSMXNGdiUbBHRBE94OLJSQdjGcKAMsag7pte\n+APFYVhlVWA8HePlrpZ7Ygw0RTiwV7qxnC6bs3dPEu07F7Xk2UDHI27ba7MN\nlpYz8c38Fq76GHLfp+ap1IPgYKhTps0qo4iYHSZ6zq0oGtYep6xC8A8Ob80F\nwQEe\r\n=flGd\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n
Image Transitions
\n\n\n\n\n\n\n
Usage with React Router
\n\n\n\n\n\n\n
Stripe-Inspired Menu
\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning and outline the `Flipped` components with a hot pink outline. Here's an example of solving a problem with the `debug` prop:\n\nThe broken animation:\n\n\n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n \n```\n\nWe can either wrap both the `p` and the `button` in their own `Flipped ` containers, or add a style of `inline-block` on the wrapper `div`. To verify once we add the fix, we can rerun the animation with the `debug` prop applied:\n\n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"3608c1d7ebdf8530a18077195969653574f3f9f3","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.1.0-beta1_1535743363885_0.021178751981005606","host":"s3://npm-registry-packages"}},"4.1.0-beta2":{"name":"react-flip-toolkit","version":"4.1.0-beta2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.1.0-beta2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"fd108672188db3798ac4ae5a0f0f3a20690bfb01","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.1.0-beta2.tgz","fileCount":30,"integrity":"sha512-FPTEX9QkXsm+I8rqLuEYVUn/TBPiwFcWs9n7T6fhxDl90BlBVbzaMOcu/JMUYqgXLoEMliVSyqBctROr4z6ThA==","signatures":[{"sig":"MEQCIFD8suAxnYHfmLxD8UAoI2sec/fEQMJl3llS+svdJVEvAiByyCqCUxSpFkny5ll/epCgHj55zZJBtjrxcyBHuWed6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbia5gCRA9TVsSAnZWagAAYyAP/RX2yTOHPPpUk+tat4ty\n59xR7pMsMjMqXw34cPs2JzaSfgh1dAvhdRorV77U64K3V6RK/dIsgAivwdl6\nqaNgdbomH4TawXHIIYZ0Ij0JPG94DtkBSNNjYEalgUWa2jZGZYODO4aswci6\nlgq8G4I1whwUlzpvf90E2RXmdQiZwk6fwkV95aQsiMPTIA1IePcv/M3I8wWI\nfFrKRxfs/o4DFUn/qqmdDbZadPYSyzkfpczt32giJebHGXn8YHV6Ur+4fa0b\neDVoczT2z2gapFeIec7HrZZyG8lSHtpema41c0MI4FM0Ua82dgc0YvFPZN7y\nlCsFuJjpQg8CPETfZDaRK1Adae+sKXpRw32sQ8DDDj3j/hwyibaFRl5J03D+\n4vQ7amywmNO0VyMbWJfyk2E2iCbZKpZ15GchEOqQUoyEKySQpds3N0DUulPt\nde8hjhkMfup1LQD6xW2b6NiGGQA7i7lY0VVBTD9+eixlQz+l+2K+Lorb1tk2\nW8/IvCoGjWBMtz6+TUa4QR7Ngpubru3vYK++FTt6qqucgNYLvqQZOQFOMecu\nV/NdnBmJVSnrMovJ6fJ9rzkILxz1SnfXLi7UwKGcudmt30BRnzU/3Du//8ub\nZ185U6FNvXht5VR128MBhkl6iwtNvKatlOPYqImOiPzr1NNk0/JYzgQR9P0Z\nrekO\r\n=GGz1\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n\n\n\n\n\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n
\n{this.props.text}
\n \n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"3608c1d7ebdf8530a18077195969653574f3f9f3","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.1.0-beta1_1535743363885_0.021178751981005606","host":"s3://npm-registry-packages"}},"4.1.0-beta2":{"name":"react-flip-toolkit","version":"4.1.0-beta2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.1.0-beta2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"fd108672188db3798ac4ae5a0f0f3a20690bfb01","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.1.0-beta2.tgz","fileCount":30,"integrity":"sha512-FPTEX9QkXsm+I8rqLuEYVUn/TBPiwFcWs9n7T6fhxDl90BlBVbzaMOcu/JMUYqgXLoEMliVSyqBctROr4z6ThA==","signatures":[{"sig":"MEQCIFD8suAxnYHfmLxD8UAoI2sec/fEQMJl3llS+svdJVEvAiByyCqCUxSpFkny5ll/epCgHj55zZJBtjrxcyBHuWed6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbia5gCRA9TVsSAnZWagAAYyAP/RX2yTOHPPpUk+tat4ty\n59xR7pMsMjMqXw34cPs2JzaSfgh1dAvhdRorV77U64K3V6RK/dIsgAivwdl6\nqaNgdbomH4TawXHIIYZ0Ij0JPG94DtkBSNNjYEalgUWa2jZGZYODO4aswci6\nlgq8G4I1whwUlzpvf90E2RXmdQiZwk6fwkV95aQsiMPTIA1IePcv/M3I8wWI\nfFrKRxfs/o4DFUn/qqmdDbZadPYSyzkfpczt32giJebHGXn8YHV6Ur+4fa0b\neDVoczT2z2gapFeIec7HrZZyG8lSHtpema41c0MI4FM0Ua82dgc0YvFPZN7y\nlCsFuJjpQg8CPETfZDaRK1Adae+sKXpRw32sQ8DDDj3j/hwyibaFRl5J03D+\n4vQ7amywmNO0VyMbWJfyk2E2iCbZKpZ15GchEOqQUoyEKySQpds3N0DUulPt\nde8hjhkMfup1LQD6xW2b6NiGGQA7i7lY0VVBTD9+eixlQz+l+2K+Lorb1tk2\nW8/IvCoGjWBMtz6+TUa4QR7Ngpubru3vYK++FTt6qqucgNYLvqQZOQFOMecu\nV/NdnBmJVSnrMovJ6fJ9rzkILxz1SnfXLi7UwKGcudmt30BRnzU/3Du//8ub\nZ185U6FNvXht5VR128MBhkl6iwtNvKatlOPYqImOiPzr1NNk0/JYzgQR9P0Z\nrekO\r\n=GGz1\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n
Image Transitions
\n\n\n\n\n\n\n
Usage with React Router
\n\n\n\n\n\n\n
Stripe-Inspired Menu
\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning and outline the `Flipped` components with a hot pink outline. Here's an example of solving a problem with the `debug` prop:\n\nThe broken animation:\n\n\n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n \n```\n\nWe can either wrap both the `p` and the `button` in their own `Flipped ` containers, or add a style of `inline-block` on the wrapper `div`. To verify once we add the fix, we can rerun the animation with the `debug` prop applied:\n\n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"da29aebd80d15ec805e656e08cd1caedc93f2a96","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.1.0-beta2_1535749727752_0.9514640377744186","host":"s3://npm-registry-packages"}},"4.1.0-beta3":{"name":"react-flip-toolkit","version":"4.1.0-beta3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.1.0-beta3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"91726119844b7b9ab05224ac41e868217a54c05c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.1.0-beta3.tgz","fileCount":30,"integrity":"sha512-q+CEtQvpG3KvfJe8ok5BWCxGt/6APgTUEqFPQjxBm07DvfvCrk4Mr/oaQUliX+5HlwjtytnrPAcgAWcw0pN4CA==","signatures":[{"sig":"MEUCICcjBY66bsbxzHwER2NzzuNQ980299IWM/hlprGCPlQrAiEA3ZF+igCSocew1So25CSuJkIN2DorJ1JK8zt7ECUwPKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbirqUCRA9TVsSAnZWagAAP0sP/3//qEt8LUvD9CZQqdcM\nfPUK/fyt0YJvD21rqSKpNNDFk/B8Zy6hr1KaVlatEm7lpFgyVauAuILuWimb\n1bdUvhxZh/kZzeoVPJfu03PqFRxP38s3YNKI5vIHp3bJf85zMaLEBPYUjlG5\nQStt+eoGAQd8FGJhFVcTUyj18z/kEN2WP/qeUZJGrelKE2Ec1YNL+AY+GODH\nQlod725ff1Nv9KdmYwrIcucs9SLYZxS26YzZIWxzDjw7scj/yy8hTjjmSouC\n1nef7FeZg1EewnA1nsn5k0gWlcrL6j+zymj5xmbxZgYSNYt9Ryx77rpunPgh\nzpS3oV8H7jp/n4Dp1isIt55GwvJUKibyco/msVjF/yjq28LdagbAA53HebZ3\nW7f6NzZ210gimgAkKZ7r2WNFUBtb6Zza8ZprxIibXUYDKbmRn1cJArlT1uZN\n0JcLDMqii/QDPS5KygIXpZ4+0axfY5IKE89xQ903aQxT7r8IxKaNbxxbu+75\nlD3AW63Pj/jquxPI0P00hr5bKzqDP9P8V3vGgTp5ehsK67u+qSlJKrLTDsc6\nxhv2XZuQ7Yl8hw5OBLDUH5A0lmyvvY+dTyNZZ7JAzkw5/1OhapglHxeWKkLR\nLtaShA7IQgHzhqEKM/FhCIWKjlCbffgky9gohG/tzv39XtcXMkr00nHjlG5f\nwA+w\r\n=YDtd\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n\n\n\n\n\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n
\n{this.props.text}
\n \n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"da29aebd80d15ec805e656e08cd1caedc93f2a96","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.1.0-beta2_1535749727752_0.9514640377744186","host":"s3://npm-registry-packages"}},"4.1.0-beta3":{"name":"react-flip-toolkit","version":"4.1.0-beta3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.1.0-beta3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"91726119844b7b9ab05224ac41e868217a54c05c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.1.0-beta3.tgz","fileCount":30,"integrity":"sha512-q+CEtQvpG3KvfJe8ok5BWCxGt/6APgTUEqFPQjxBm07DvfvCrk4Mr/oaQUliX+5HlwjtytnrPAcgAWcw0pN4CA==","signatures":[{"sig":"MEUCICcjBY66bsbxzHwER2NzzuNQ980299IWM/hlprGCPlQrAiEA3ZF+igCSocew1So25CSuJkIN2DorJ1JK8zt7ECUwPKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbirqUCRA9TVsSAnZWagAAP0sP/3//qEt8LUvD9CZQqdcM\nfPUK/fyt0YJvD21rqSKpNNDFk/B8Zy6hr1KaVlatEm7lpFgyVauAuILuWimb\n1bdUvhxZh/kZzeoVPJfu03PqFRxP38s3YNKI5vIHp3bJf85zMaLEBPYUjlG5\nQStt+eoGAQd8FGJhFVcTUyj18z/kEN2WP/qeUZJGrelKE2Ec1YNL+AY+GODH\nQlod725ff1Nv9KdmYwrIcucs9SLYZxS26YzZIWxzDjw7scj/yy8hTjjmSouC\n1nef7FeZg1EewnA1nsn5k0gWlcrL6j+zymj5xmbxZgYSNYt9Ryx77rpunPgh\nzpS3oV8H7jp/n4Dp1isIt55GwvJUKibyco/msVjF/yjq28LdagbAA53HebZ3\nW7f6NzZ210gimgAkKZ7r2WNFUBtb6Zza8ZprxIibXUYDKbmRn1cJArlT1uZN\n0JcLDMqii/QDPS5KygIXpZ4+0axfY5IKE89xQ903aQxT7r8IxKaNbxxbu+75\nlD3AW63Pj/jquxPI0P00hr5bKzqDP9P8V3vGgTp5ehsK67u+qSlJKrLTDsc6\nxhv2XZuQ7Yl8hw5OBLDUH5A0lmyvvY+dTyNZZ7JAzkw5/1OhapglHxeWKkLR\nLtaShA7IQgHzhqEKM/FhCIWKjlCbffgky9gohG/tzv39XtcXMkr00nHjlG5f\nwA+w\r\n=YDtd\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n
Image Transitions
\n\n\n\n\n\n\n
Usage with React Router
\n\n\n\n\n\n\n
Stripe-Inspired Menu
\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning and outline the `Flipped` components with a hot pink outline. Here's an example of solving a problem with the `debug` prop:\n\nThe broken animation:\n\n\n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n \n```\n\nWe can either wrap both the `p` and the `button` in their own `Flipped ` containers, or add a style of `inline-block` on the wrapper `div`. To verify once we add the fix, we can rerun the animation with the `debug` prop applied:\n\n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"b079124fd6f905eaeb2b3788a3dacd53a40fbe4b","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.1.0-beta3_1535818387292_0.33060710204095733","host":"s3://npm-registry-packages"}},"4.1.0-beta5":{"name":"react-flip-toolkit","version":"4.1.0-beta5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.1.0-beta5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"67710f19e0e2b9687cf3e06fc358128e11203341","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.1.0-beta5.tgz","fileCount":30,"integrity":"sha512-rO4lLX7tG5H7HsSv+ZhZpYfVCfxRw4cE5tZYB9YBcmFEsvo3+2U+Un70Rx3g32ac8ngVqjHNt5YqccDfGJIgNQ==","signatures":[{"sig":"MEUCIFWQ4/pChiZN7Ybn6UZCfa9fW0GwOJ+cWHdHrWWxsGJ6AiEAlC53zj7zMB3ixHXeaXpjUeSF5KwYijWlE9mC1rh4Mgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbitQCCRA9TVsSAnZWagAAgp0P/0ej1R8izQ2U6R+YSpJU\nRAYH/5wwUsPCUdBRJsSX2xtaS1T2H2XfXNcAJnSnMjaPT3mfqDocqeN0WIcO\nhbYpJSrN9m3Xcnd7JiIBY/XOlgVTBkxgYqNaRPrHkBeHdHTAkhaGFgj81kX7\nyYZ2S2pnEgVn8LtivJtF99O3OXO8Tv1QfI7KpAQYoy5n+FZuggDYySJAQ23Z\nuMho2vW0l/nNyX+0bgLdOvCauXp/xGA3xuZNVJcTZpddG44bqB+90o9MOuWU\nu27cC3hYacn1mJ+ZdNo6V6SGT/AsCY8XJDSnR2vJIvML/LHDTQSPHoOQAVSX\nFCMNVX70z5sW0hAA7J10lWuWCO0rydCKA7OTyEykmJsswAUQaNhIyifMiHAU\nCAtIWEgkZVh6X4jMY8uvU2EAZ/5GfIzwU46ya2fyAhmjgiIc3A9a+kznBj1A\nD0aMU0vPUMxdta1zcoq2oEcvLHiLrTquMi0ll6SNuDRKvkDtkizi88Ir22Cg\nCd4IOltOGV8QXBJfgwCL/7vesvfHHITA4/Qc+L2WuDyMdEMVpzFgdFSJ7knU\nWkHAXCdQsQztcQs4sOT+eLqSDe/bMgkwGLSJ18nehDYQY5PlMcOzK16R4CUn\nycqIRvhNo9NOcvG1Sm5uIOmhEFuHfmbkBJJvDlCByrXi0mWfNgLSuLpv5J4C\na7RY\r\n=R9yZ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n\n\n\n\n\n\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n
\n{this.props.text}
\n \n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"b079124fd6f905eaeb2b3788a3dacd53a40fbe4b","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.1.0-beta3_1535818387292_0.33060710204095733","host":"s3://npm-registry-packages"}},"4.1.0-beta5":{"name":"react-flip-toolkit","version":"4.1.0-beta5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.1.0-beta5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"67710f19e0e2b9687cf3e06fc358128e11203341","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.1.0-beta5.tgz","fileCount":30,"integrity":"sha512-rO4lLX7tG5H7HsSv+ZhZpYfVCfxRw4cE5tZYB9YBcmFEsvo3+2U+Un70Rx3g32ac8ngVqjHNt5YqccDfGJIgNQ==","signatures":[{"sig":"MEUCIFWQ4/pChiZN7Ybn6UZCfa9fW0GwOJ+cWHdHrWWxsGJ6AiEAlC53zj7zMB3ixHXeaXpjUeSF5KwYijWlE9mC1rh4Mgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbitQCCRA9TVsSAnZWagAAgp0P/0ej1R8izQ2U6R+YSpJU\nRAYH/5wwUsPCUdBRJsSX2xtaS1T2H2XfXNcAJnSnMjaPT3mfqDocqeN0WIcO\nhbYpJSrN9m3Xcnd7JiIBY/XOlgVTBkxgYqNaRPrHkBeHdHTAkhaGFgj81kX7\nyYZ2S2pnEgVn8LtivJtF99O3OXO8Tv1QfI7KpAQYoy5n+FZuggDYySJAQ23Z\nuMho2vW0l/nNyX+0bgLdOvCauXp/xGA3xuZNVJcTZpddG44bqB+90o9MOuWU\nu27cC3hYacn1mJ+ZdNo6V6SGT/AsCY8XJDSnR2vJIvML/LHDTQSPHoOQAVSX\nFCMNVX70z5sW0hAA7J10lWuWCO0rydCKA7OTyEykmJsswAUQaNhIyifMiHAU\nCAtIWEgkZVh6X4jMY8uvU2EAZ/5GfIzwU46ya2fyAhmjgiIc3A9a+kznBj1A\nD0aMU0vPUMxdta1zcoq2oEcvLHiLrTquMi0ll6SNuDRKvkDtkizi88Ir22Cg\nCd4IOltOGV8QXBJfgwCL/7vesvfHHITA4/Qc+L2WuDyMdEMVpzFgdFSJ7knU\nWkHAXCdQsQztcQs4sOT+eLqSDe/bMgkwGLSJ18nehDYQY5PlMcOzK16R4CUn\nycqIRvhNo9NOcvG1Sm5uIOmhEFuHfmbkBJJvDlCByrXi0mWfNgLSuLpv5J4C\na7RY\r\n=R9yZ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate size | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Enable nested animations | ❌ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 🤷 |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n\n## Demos\n\n\n
Image Transitions
\n\n\n\n\n\n\n
Usage with React Router
\n\n\n\n\n\n\n
Stripe-Inspired Menu
\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning and outline the `Flipped` components with a hot pink outline. Here's an example of solving a problem with the `debug` prop:\n\nThe broken animation:\n\n\n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n \n```\n\nWe can either wrap both the `p` and the `button` in their own `Flipped ` containers, or add a style of `inline-block` on the wrapper `div`. To verify once we add the fix, we can rerun the animation with the `debug` prop applied:\n\n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"803b983ef24eade1fcc5e34bbb7898402823a955","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.1.0-beta5_1535824897608_0.3827360605493271","host":"s3://npm-registry-packages"}},"4.0.3-beta1":{"name":"react-flip-toolkit","version":"4.0.3-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.3-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"21613e8d197f85c3695d3c1d225ce2c7ac78efaa","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.3-beta1.tgz","fileCount":31,"integrity":"sha512-xoyjTSV0/j79hKQci0hgZFuZuYCcCmy3oHfidGrYDZ8T+A8nTy2cO3N2m+dGCQ7skbREbyBK9ZvbqMnPgPr/dQ==","signatures":[{"sig":"MEUCIA+8h9dqeNKSV+Qno5OrjbDPNQafShNttWQgeRRkEVqdAiEAtsMqdqzo77hcqd2sniNvP/dxT/AbfIKDfoLklsesmM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjB+8CRA9TVsSAnZWagAAFugP/0XSk7QlgBQNuS93M8UH\nA+oD+hNJtJ2jRSjWVJEN5qF9MKXaEsGoAIK5GEU6y08GhT78pMys1i5bD3Sd\naXl7m9oF162BHtimtngRTWanjihK7oxWmgL6a9+7+mNkH2dVKXJqU2DKvEMp\nJIW+MO4t3ESP6+VHsBZUx0JxEiZc+n6+tEKxtdxS8bHCNtlhL0QvpOT6RlJz\nij0ch6wdnoO1c7Qzx5jiVzBmk+oP/sZ+p/SLWyBoayLS0opeaPn/tx85aGhV\nXscepIoFRNPwSikq6uTjPHPXrxjxICyM5L6cJ92Ezt4eHstOe6xqgM3qUjbi\nTpsYG58SanbZqktyWKiSGJVg43c59tVp2+1DTU+JXc69V4cymLtfKW1TuQyK\nLdMFMU8pe2oS80fzw87n+54+tW6afNXjZlQQjK6ysbT1yj39LMRYKZ+vvZO5\nyeGyR7LiYnDvCGvPo9U4flONA4JMS0BhUIPIMhakCgP7qfzG4ty6koLBs1VB\nWLL4d9UFU462FDORjxRORWEQjesh6E2UTN3KmiHAYFRqXVba6k9wkUogvRT/\nGX1hVYXwmOeLWSfUxKaEQNUj2T41rC98ap6jV8eUjNf7mv4aVZSiBXPUx52j\nA+DZ6s5WNRRVL3VQecH/XNY4F3X/5l2suaoXyEhVISlzUYEQq4Vy9aT7TaqS\nWB+X\r\n=ZOrC\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :-------------------------------------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate scale | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | 
|\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n\n\n\n\n\n\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n### More useful: tweening different elements\n\nThe power of FLIP lies in smoothly tweening two completely separate elements to appear as if they are one:\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nconst SmallSquare = ({ onClick }) => (\n \n \n \n);\n\nconst BigSquare = ({ onClick }) => (\n \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n
\n{this.props.text}
\n \n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n","gitHead":"803b983ef24eade1fcc5e34bbb7898402823a955","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.1.0-beta5_1535824897608_0.3827360605493271","host":"s3://npm-registry-packages"}},"4.0.3-beta1":{"name":"react-flip-toolkit","version":"4.0.3-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.3-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"21613e8d197f85c3695d3c1d225ce2c7ac78efaa","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.3-beta1.tgz","fileCount":31,"integrity":"sha512-xoyjTSV0/j79hKQci0hgZFuZuYCcCmy3oHfidGrYDZ8T+A8nTy2cO3N2m+dGCQ7skbREbyBK9ZvbqMnPgPr/dQ==","signatures":[{"sig":"MEUCIA+8h9dqeNKSV+Qno5OrjbDPNQafShNttWQgeRRkEVqdAiEAtsMqdqzo77hcqd2sniNvP/dxT/AbfIKDfoLklsesmM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjB+8CRA9TVsSAnZWagAAFugP/0XSk7QlgBQNuS93M8UH\nA+oD+hNJtJ2jRSjWVJEN5qF9MKXaEsGoAIK5GEU6y08GhT78pMys1i5bD3Sd\naXl7m9oF162BHtimtngRTWanjihK7oxWmgL6a9+7+mNkH2dVKXJqU2DKvEMp\nJIW+MO4t3ESP6+VHsBZUx0JxEiZc+n6+tEKxtdxS8bHCNtlhL0QvpOT6RlJz\nij0ch6wdnoO1c7Qzx5jiVzBmk+oP/sZ+p/SLWyBoayLS0opeaPn/tx85aGhV\nXscepIoFRNPwSikq6uTjPHPXrxjxICyM5L6cJ92Ezt4eHstOe6xqgM3qUjbi\nTpsYG58SanbZqktyWKiSGJVg43c59tVp2+1DTU+JXc69V4cymLtfKW1TuQyK\nLdMFMU8pe2oS80fzw87n+54+tW6afNXjZlQQjK6ysbT1yj39LMRYKZ+vvZO5\nyeGyR7LiYnDvCGvPo9U4flONA4JMS0BhUIPIMhakCgP7qfzG4ty6koLBs1VB\nWLL4d9UFU462FDORjxRORWEQjesh6E2UTN3KmiHAYFRqXVba6k9wkUogvRT/\nGX1hVYXwmOeLWSfUxKaEQNUj2T41rC98ap6jV8eUjNf7mv4aVZSiBXPUx52j\nA+DZ6s5WNRRVL3VQecH/XNY4F3X/5l2suaoXyEhVISlzUYEQq4Vy9aT7TaqS\nWB+X\r\n=ZOrC\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"\n\n\n# react-flip-toolkit\n\n[](https://travis-ci.com/aholachek/react-flip-toolkit)\n\n## Comparison with other React FLIP libraries\n\n| Feature | [`react-flip-move`](https://github.com/joshwcomeau/react-flip-move) | [`react-overdrive`](https://github.com/berzniz/react-overdrive) | `react-flip-toolkit` |\n| ---------------------------------------------- | :-----------------------------------------------------------------: | :-------------------------------------------------------------: | :-------------------------------------------------: |\n| Animate position | ✅ | ✅ | ✅ |\n| Animate scale | ❌ | ✅ | ✅ |\n| Animate opacity | ❌ | ✅ | ✅ |\n| Animate parent's size without warping children | ❌ | ❌ | ✅ |\n| Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |\n| Use springs for animations | ❌ | ❌ | ✅ |\n| Easy to set up & beginner-friendly | ✅ | ✅ | |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [Quick start](#quick-start)\n - [Simplest example: tweening a single element](#simplest-example-tweening-a-single-element)\n - [More useful: tweening different elements](#more-useful-tweening-different-elements)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n
Image Transitions
\n\n\n\n\n\n\n
Usage with React Router
\n\n\n\n\n\n\n
Stripe-Inspired Menu
\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://literate-fly.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://literate-fly.surge.sh/guitar)\n- [Overly complex, nested cards example](https://literate-fly.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://literate-fly.surge.sh/portal)\n- [Spring options explorer](https://codepen.io/aholachek/full/bKmZbV/)\n\n\n\n \n\n
\n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n[view on Codepen](https://codepen.io/aholachek/pen/qKeLaN)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n\n\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and [Wobble](https://github.com/skevy/wobble) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning and outline the `Flipped` components with a hot pink outline. Here's an example of solving a problem with the `debug` prop:\n\nThe broken animation:\n\n\n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n \n```\n\nWe can either wrap both the `p` and the `button` in their own `Flipped ` containers, or add a style of `inline-block` on the wrapper `div`. To verify once we add the fix, we can rerun the animation with the `debug` prop applied:\n\n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, seriously think about giving `PureComponent` a try!\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"614312521cec5c1cd3c8af67f92d1627e0f6b43c","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.3-beta1_1535909819352_0.5099898619958132","host":"s3://npm-registry-packages"}},"4.0.3":{"name":"react-flip-toolkit","version":"4.0.3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"aa11408a2dae53806ad4d16e4e0b8125b8166941","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.3.tgz","fileCount":31,"integrity":"sha512-7HdlWa7RQvamXtT9bHYkThEwmgLIwW+27mCcPGfzrCrP1rLryJ8f7xj2apeg0MtcDir6lhH247blDwAlHCT9Tw==","signatures":[{"sig":"MEQCIBZVVsO+1V25Yx8uxNyTurT3ImmbWodDefSM/izd/TO7AiBQqMU+sIi7OkgH6zz8ht2JetDw7MTTjVpGA10PpHXC9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjC7tCRA9TVsSAnZWagAAIwQQAKNab0IA3okPzye/Y1nw\n5WV7cTG97QzHpdGhJU1w9FSaF0HYT+8Tf6cQWwwfNkn7O5JECIQNHgvFypZy\nJ1VPaoHGxjVm42MmyIhPUH2J8ZZqJOjno3DL6M0QQ4uJgCWsGN1hiETBz0W9\nQgCrRheR9tg6RSswLJVwuOHA/dfWb3mrHLL3E+BxZDc9JLZt8O/a1XAJzHY/\nzYwqm4c22yuXXX3yPJkAiAHcDRC37J915AiE8ih9F6sfu/pkgmjfGmweBTpn\nkmudX688/FJ0v7x7x7Lmwp5lQVxhYHlmT+jn8n1fBh7TxzwCKajhtgrzQO0S\n6PmvUIWgO4NU1uUe+K9SVc5mzosApEcibyYnpGakQP8ZzQ3ile5ynUXat9bD\neWQwk4vgRRKP7YOIfPq1I2maLWVd2csbrVURcRvYly4R72Axg9YNG9CBCKW9\n2GwX0dHsvWNbOs6vc9Xn6axKzwRCJhQjTFsHtdcOeSCQ65fHyucBfdokTIBy\nQBpgwlAFmk4X1WzNXEWwaIBI9vfNf2Z62D97DfXBw0wPIP+ZdFzA4H4dc6XT\nd8RdY7PoDjGaNgtbF1RcGo4HmS1VAJGBi3TN3eqeQk+Rt4bX6i2SmzJBvUoW\nUrqvy5apqQXeZOAGGHIx2Hjn544I7q8OMRs1uh2oxZacr6NeIvdgVyrWotMB\nD/Kc\r\n=bmVC\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"f663fcc30f732257b7783e302ac76fe783c61288","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.3_1535913708828_0.29774660511066076","host":"s3://npm-registry-packages"}},"4.0.4":{"name":"react-flip-toolkit","version":"4.0.4","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.4","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"6d82cd24c6eaf301e43ca8fccfd094356733d765","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.4.tgz","fileCount":31,"integrity":"sha512-zb696uUTqo5x6/wqYCLlzZTJTYxWzwdYCwtVEZQ4wC1ZKcJZC/cdkx523jnGOxipzw7AQ6ov2hx+waipotoNPA==","signatures":[{"sig":"MEUCIQCyOC2Kt6bjmcpKUWPt7SueSTF6hXsmn66rNXyQ01azAwIgJFwcosvENu1Zbk+rFpdBbqOq+ByZKYm7u4N7yiDE8u8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjDNECRA9TVsSAnZWagAAjhcQAIJXKPBU4sILf6cw7kUQ\nv9KXqCJvhMtY20ZK9L/kP4WhSxhmJqjPADjerxeJP+lYIDPdUTS2mID0tHPt\nRLJdPdFuS35MRVLQDfmAX4Ab0gTI03UEQ+8jJrQPcz2Jnbkj78IffkZ3J3On\nCqJAjtf5+RXaYhkTFlmwwUtgwtlqBJcqK3jJB8+f8cmfiQ9opu98tqgewqM1\nVMTKxeZ/ye7N2eJHkTsmIyNQUVmVHell3XmTJbj7OlkXarFTvIMg8CywOO1w\nHU25gDVlXZZgnYC4KQHdT/JCXhdyOS0lfZhrSttFy/0rOdK2np1dlP1ALkFf\nEhek3HBOXDIioZ4yFK4msqZ/v43WPZSvNH2LkgxvZDDUDdy+/fSSHU/z8AH6\nlofyxRNAkZWWagBgB7HTi5cEcJxJdnRlQy72fErRcXSpvQTWqaVFS143yfgQ\nVVUAy3VuoYx7PAZQpINmeKYnVbKv8LPQXvsdPG26DD+gZ1vue+ZzY8jXXNPZ\nZOnU1ApVT//nTtnyhfv+lZhT8y1r+D+oR4NurC0sLiui6fSqw5TLSjo1Rmk4\nSinJlbW3xAomgj46u/m/PdoVey5vzZ+0oI6dtf+xvmHK01LR4DSHKPj/7C1x\nB+i+TVv41THX4S0FkOfIyR9+ztDtVZSnsF+rNRFncdRuVeMHytFYB9QN/euv\no5KF\r\n=k0z3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"c4c158f92c60a3fda739658ab9734e01cdd7297e","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain literate-fly.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.4_1535914819149_0.9088370768012972","host":"s3://npm-registry-packages"}},"4.0.5":{"name":"react-flip-toolkit","version":"4.0.5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"0e936bea5f57abf7a3359c2cd0293b707a1e906c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.5.tgz","fileCount":31,"integrity":"sha512-kTfPLzxEVk8/4bFFHDWkURDIgupZHu+6QYdRTDMb1J22I/ap2dcLEK7GN7jQ5M/ejER30tWNLapY9i+qx+H3pw==","signatures":[{"sig":"MEQCIG0Q9BdtHuIMUsKsWFrgcR6ZhyH4oAVU95m7MhjrbeoMAiAfnfl7Jnwu6V1TUdZD92wkERpzcDvQhKZWBsKmX7H0iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjEtJCRA9TVsSAnZWagAAp1sP/j2ehQd95p5GDyqJqKq8\nROPXReoysTAraQiQg/iSn+5ksAITuUPerrNI39FDE3fawgOJdGBj1Zqywedz\nq1Pm6IEk2QVKRrUxGDQ9B0L1F0Rg0C3/QgkBAo76FJgaMcuG/6gmVEluA15M\nRzjTwMR/LhZUftzfQ+6+7kXsjqZagLOr2GKyb8bnTgxy1qKPeBo3GpWLUiwk\nH3U53nXJOpyQVa88Y64bGtkQjzA2iJNL2vYMq0emYFRoIRP2O9/4CPt/1HV/\nGqeeinsT1L9ZAuAqZqM24zn5NzVMqnYi4LLhx3ItboXAn42FilRvnQkepUvd\nYgSyYz3ijyrzJibHFJLpvaGmyPRoHAe0moYuqcSjnkYsilidaOgkVNF73Kum\nqOQsdg/71bLKqBPp9wfLwCFOCEwJjdJEWO/kxKH1fMzoDn2SC0fSISVWRDs+\nL1EDdVzW4eqeF+FKe0HT4avoEU7WLrc5+3quoqFWXQye1DhymiH7n5aHosW3\nSKb2PfAvWEsZaaFQ9m8o3qCOzjNpVvnThT03hwTHq7uj6mzqFch5MqEmao3I\n99gfU4ewD6aGbm1zKLwKQpJq+Mfa1X45tjQoLj5UcZPs2uasn3mpAELP0VVp\nbPZIjDUaYyoO/R5IGyQOK0yeLde3/eid/pF9gTiBT9kuGqU+LpphtaYP/PQf\nJsRV\r\n=QO7d\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"193e0836a275098ad6e707b77318e7a8a49a6f97","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.5_1535920968763_0.7578084037674659","host":"s3://npm-registry-packages"}},"4.0.6":{"name":"react-flip-toolkit","version":"4.0.6","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.6","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"d57d9b6ca1d641be10fe36d3796577e1fde74a14","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.6.tgz","fileCount":33,"integrity":"sha512-7LWBnjlAWgZ02dtCrI1Oi1tjGJkqZ7GBSnBRxHbX0oBjWZ9opplknS5wYvcVDF2JVVMx+nC/fZjb87mvLdDadA==","signatures":[{"sig":"MEYCIQDB+/V+VGSJ+ZLkMtN1AzAGqDi2QJOCXW1e6ujmNHXPiAIhAMV3QLW2JhSt39+cUwuVZI6rUSSEFxPdsnm0zikeNC+/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkaeBCRA9TVsSAnZWagAAwQAP/jBQIVBtX3Xyd2dDd1Ra\n7SVU/lp8bqJi4r8XNz0v8G039UfdSQCIJsR3Hws5nF/iuS9awsZJlfQJOhYx\nUglNYoV2WtIXoJjK3B/SbQLA/blYjDN2aF8RjBbfkgcfBHZHQ1UYwXo7IY0X\n0eZKJ6BYKBtTi6SFQI9aAy3t7aVdUczjFNdba6pn/paotVeauxbWwBt5dudC\n97eNfOYI0C6WvoSR7L5t+W51Fu0Wol1UhSdWC3SM+zDuNyOW/BDbKviM1KCU\nlk7fIh8RpFOtp7st2AV4TYIkMLBPhJL1lOhlaXSpLsIlmW9QOHVHUDKE14UV\n4PUy4k6f5CuDbPmnmpBHMRnQ0GM1vCoUKwgFl1FWu5MWalkLnqcLbqvcDRyc\nkPqzsrBaB0d/YqmlC7Sc0HZGKMWc4SDMeCzr4pfcXfIsBK76bhQu6niIuvdR\n1oZJBE7CYB1TvrlszVrqzf6mRuyq309iNNAcU09TSZJc1XduN2IXj4uVD1rw\nloEI80rTQvp2LYRGWM5yN9QCZPO6tbhyOJUf6J9KTxCgjZwPXeMefZacZwJz\nCh2jA3SBMp6QZsU1KVNYydwtMzqc4kUqQ5BmFDwRksZMLwZYLWk1R2u9Bbai\nZ7tDYpWM4xGfaodKjNTM/YPSgzc5EPW3zRMsuadBquU93u6Zf9jMgCquY1SL\nRtq7\r\n=eUAX\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"111091946536e8b6281f1a28131aa62bf42f3593","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.11.4","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.6_1536272256024_0.61147503696324","host":"s3://npm-registry-packages"}},"4.0.7":{"name":"react-flip-toolkit","version":"4.0.7","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.7","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"95ff5326fff4eb0a2c58e5c73072d582c6a87efd","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.7.tgz","fileCount":31,"integrity":"sha512-SbhoEA7NAxkDWs5BH3fsU9Th74PvGItnw6Bp4HoI14Em0nlZSAHog/GvRKCJQXcXKlbTQA84iA0MdMs+jl1OQw==","signatures":[{"sig":"MEUCIAcbtV5vIvOJn3K2BwtvXkL/GR8ccD6C1UHSTxDNk10zAiEA3u6Nlk/0LV//Zjqo73HkqVPwUwWoOZ4iJyjqdPKIxqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":344444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnIxdCRA9TVsSAnZWagAAzVAQAJ17zfCvf1VtxxXqt8Nf\nm4mFEbYVJibRAK7+GIFgHAx6blO/LP3MUNaZa//dSJEBRU2caIzWIrHD90uP\nv3XCv8KH+QvEh4UnwlYLZdfRb2DCNqumsQbC3l3M6HWluTWXakveJH+oupxr\nFNhcud4Yj/kS5bb0oaCoTtJ/pHj+9y7nvgzzxiOCyUmK6WefgobQtivDUja8\nccdJT2YheNLJq60GVmKB7tpfj0/sOcB+XqoDy35xoEHkklZZsnrCi9kbpjtN\nWE+gW3A81CWF5I4p/ozqFNJaNWn1IJfjOEPrtOUX67XCWiwsDKvnQcw+cIbs\nM+VwClDKxovSBdLNKKLaWQxuYLpiNHE7S9dbBiAl/mzFL42fkAV2kF+LLv+K\nDqQmdWTHfoU8ZHS5f2yd0uxrRSk4q6g42O5+ZwFpnB1lzQ53qXvHlT/Y0s2U\nQPu44OL4uMaOFuedKingYs/eIyogc7kVBHtyQUCSkuhhyynFT3NtMGUYdgqD\nSOq69rBfwdrmAGEzUYB1BHyhldCxxK13dcAo8ecqbqPXkC4N3AHE/kg1V9g8\n1Icggbfrwy/WtPuSkw02gZ6XNVWHoQabdlcU1hm1YkQzizAJIFczXDez5yxn\nvbMZ1JQC9Rxjz0SuqVFJn3X2mh32YqLWAbG262vEn/wwwGOg9OPjK0hHFrms\nyJyA\r\n=WbLG\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"0e2655f2b5ad57bb5a43ab1cbed0be3feb0b9296","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.7_1536986204277_0.7500615600537401","host":"s3://npm-registry-packages"}},"4.0.8":{"name":"react-flip-toolkit","version":"4.0.8","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.8","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"514a4b6e2c4ce4dcea7f40340c472153a94049fa","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.8.tgz","fileCount":31,"integrity":"sha512-1yKDUD5fgtNALhQBjT3LNG+VPpl/A54pE7cTit5OUcA1KxMThsk4Vb6SOqq+VJkteEHuAb6cLj8YzkJ9MlKdeg==","signatures":[{"sig":"MEUCIQDsmsBOLdcMfFYlFWuRgsBCWRcJee8jwAwcNaALeZhhvgIgJM06kTRInw+BsnBXVffiiUoKrK8vJoqTMTc7GGOhGxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":345734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJboAyzCRA9TVsSAnZWagAA3MYP/A3aZYqdUGBD3C0GIZNX\nQJk1FJX8TWh2/lcOKwzlpuXfOHGGWk5dhSJ6xgqyKwvR0KKif4ozjUDtBfoV\nIED31eM9kWpPEa5Lb179o9RR49M3NN/UHwiqAJ0RcRKVqtKjwK989HSshMkP\n+cdI3M6SZwy30qrD4Fps0OSiF2ha6SQ9nAHz0OW1gnkvMTvk08sFXV9oalh3\nikVeW+j+VbHiZv6fcM9UC6/qasLK4UK7yHQQcojRh68MxzBQTvPMZnfF+TRN\n9dfAnT4kC02ne9PjT2ReCX8V7mFcb20mYCaIo6qXBFoG+50ndgDxHAI1Y/IB\nmszIM20VV04OB7C8RkhRmOdb3NaIzrRjd9x7BloO3bh8KWqbQ0ge/KdD0nQS\n1EoynkPxIVgi88mgbujj/0hUbsbk/RzqHOEy+vxGdI8e1iCNye0X3AAGTFqB\nX8IdGaQOGvsmdS/ka4dZdh7kWMjFwRNql9GBKDPnwFydgBbKBMX0YS+OQAFs\nTsHaM7EOIJEwNlF2rudNmWoARq41XY0wj9clibsiWghUZe4RxHFvjEmpT0Bo\nx/P0sUp7ix/9Ko+fj7W9A0e2vXf5hxRL8wohJav+7F3TvNVDmxZEaGfV47HT\nBXSgSeaKQyJsIPL8j0oQyzk+uA4okqfR4fTYLMRnzbcefjaiupsW0Idf6rTo\nHNds\r\n=gmrU\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"17c563c61ba7c27084daafa74c5d2102ce2d2752","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.8_1537215666567_0.7417625442322544","host":"s3://npm-registry-packages"}},"4.0.9":{"name":"react-flip-toolkit","version":"4.0.9","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@4.0.9","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"1b3633f034a1757e4b7b5f614c1e4d4c00864188","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-4.0.9.tgz","fileCount":31,"integrity":"sha512-Yv36tiR3kKgI9YvYTEgKgRz1w1Un1gJ+/Tnzn/JSq5oPZZbr5fS36isTPZuX8umCnWDVMYuLld1JNO7WimlAEA==","signatures":[{"sig":"MEQCIB0B3aUPWyulHmkC2Xe5kvOp40mquM+p27XEVKn+30GaAiBgE3KH9cKb6/DV4uuSpLEoHx+oOjwHlOj6uryw6R0dfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJboBMaCRA9TVsSAnZWagAAqkEQAIwmzK4KFCvLSd2yFe5N\n7gzTPj46QmadRgnQW9mSd/+cxBdL5u/5SqjAclYz5rsMbskbLS/+IX/U7ZCz\nY8iJ+wuyGXVtkX2S9zHyjmjuX98NiRqEqkQK0LFP9yv+3UelLHK9sT+Iu+x8\n2OZiF5z2rpKg4idYno1k8eLejZGTvDHFggvbplngCRR0xQdCSEuVZX6Lb82x\npnf1VA9P+s/txJTHYq69vxwc2X6GsGcdQdKogGfY+EpdCWQrB9VEsKO4YQj9\noqsmxReGSCpM1f+44W9FHi3DLLzD14XHPefNasTsnmvIcqfTYzHytR1/PY+F\n1aJCbubE8MDk7kMm93CyKnlP9vB1xK62hjvBvWKpEbfu6M8yGniY1ZzdTHoX\njlhGJzgiZACpNFcMZiiDIlRDeQFr5VWjKmPFXhRLAmzbg64z8sKxi3wGZ4dY\nNdlm5y1f5mQ3ugPxBQyluL2mSHafvOXqQV4kOCglq2x0oCFU2cdR9TqpXaOC\ntSV5M2sjzjtDQEEFs1tZ4JKRUaxO6kC72aZ9E0VHAX3ARDy1kOgkk+kNlPR2\nsvPk7XT6tJjJCttyBrwCuzDozbEoNqF9AkPdLJkIL7bO74n1UEZjSPReyfh3\nCswyiZMZry4JV+sOFaBURYSae5/wNOK4B4R0IVvjtqlxgFOApq5AeW+49xNB\nTPTE\r\n=IH/y\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"dfe6890ba570a1c5b7d2f975e0aa93d002786b8e","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"wobble":"^1.5.0","rematrix":"^0.2.2","prop-types":"^15.6.2","object-assign":"^4.1.1"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.21.x","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.4.0","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.9.7","animejs":"^2.2.0","react-dom":"^16.4.0","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_4.0.9_1537217305506_0.8040042789653083","host":"s3://npm-registry-packages"}},"5.0.0-beta0":{"name":"react-flip-toolkit","version":"5.0.0-beta0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.0-beta0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"feade92b49c5da55aada9aac470cf18e8d396251","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.0-beta0.tgz","fileCount":51,"integrity":"sha512-TLDUwSmjQHlL+GcNJxS9twvM1I0F9f61PAbbPfDHFOgqU0cEmanAckyZ62SO6TQEiKtuypGTTlu91Y5Usj4wSA==","signatures":[{"sig":"MEYCIQCvGh8r9lxss3CdS6/7Fq8Y6+b1KccksUWN3LNIDplHRAIhANxPatlRHJOzAmpKwxgnmO0hK7bOzkHKjrLYnVVbTwLt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrZAFCRA9TVsSAnZWagAA7joP/3jIfzudFf8lT4F1n4S+\nBolO56oHAq6x/RLvjFsI/pGmn3Pyfj2uacW8pTBvkYLnq0lYmPfgvwJi1s4s\nsq6FYdKe76RTW5SCFXEimHpMm5am5X1w2GnewK7rHjsBU9T3TFyv40YCOZul\ncVxx+NIaAQfmAz5YwCfg0o8k/XpPDrPl1YR7sNx//pNYxjurW3bjTUukmk14\nZFJaFIt7WYfNG6xpvhur89rEyxMpiZBh7wdlpR6NGTCVUfZz7nqTZqiW4uUR\nA7lb3xBWNmol5slCtE6on349nVSn6HJbZVQ7fpruLNN8P4tCwswTefnAWqbL\nG+oJcjZyCX/Tu1iqhqy9b8gAo/9KCjkNPJOUiKVzD+VLxKH22JPtZvv1vWrj\nKXxBbrlvGQ+22O8hPxrnVjeprMw386lTxrPmFqh3wkW1QQKURuq1EHjNNDIC\nkSivM4XHrVRJBxH48B3sghGnv55GkZmgsg1fEhiCYuqtTsE41Mn9x0lP4p92\nzUBLgrzPcMjZqTn00KL3z5YOGR8tngFdVUdXGVWBqQ0U0RRfjC/Lnhbvt4wR\nguq9XYZZ16zDRMVdTcqW9d/TaWbxg8k5lcsBaKyblle7u8jyJiTIyZoON2Qz\nCzqkmbhXQmzUKLRoEU1pPxPeNb/sCtW/DsfMcXG8rFjGIxqN0BUgdo4RBUF+\nhw25\r\n=jrSd\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":" |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [**Quick start**](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n\n\n\n\n\n\n\n\n\n\n\n![animation for the selected state of a list item](\"./example-assets/list-transition.gif\")
\n\n\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://react-flip-toolkit-demos.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [Overly complex, nested cards example](https://react-flip-toolkit-demos.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n\n## Quick start\n\n`npm install react-flip-toolkit`\n\nWrap your container element with a `Flipper` component that has a `flipKey` prop that changes every time an animation should happen.\n\nWrap elements that should be animated with `Flipped` components that have `flipId` props matching them across renders.\n\n### Simplest example: tweening a single element\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of the `Flipper` element to behave differently depending on the state transition — maybe only certain elements should animate in response to a particular change. By providing this data to the `Flipper` object, you'll pass it into the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component so they can decided for themselves whether to animate or not. |\n| staggerConfig | - | `object` | Here you can provide some configuration for any staggered `Flipped` children. The config prop might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to all staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped element with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n### 2. `Flipped`\n\nWraps an **element** that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- ~7.5kb minified and gzipped\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"9541fe0ab073044708f2e37bf37bbb0e713e96d3","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.6.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-motion":"^0.5.2","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.0-beta0_1538101252879_0.010077444089836352","host":"s3://npm-registry-packages"}},"5.0.0-beta1":{"name":"react-flip-toolkit","version":"5.0.0-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.0-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"e05a47fb361bc711e2ce4be7f9016128d31c8504","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.0-beta1.tgz","fileCount":51,"integrity":"sha512-QhyfGxoE6+OaoWKMkIlh3Ia7fECxSx1lebZOFmKVmoUKRYkrmvQsxN3Loc6UXdN85pduAc0Ru9eh7SQ4wn9flw==","signatures":[{"sig":"MEQCIGYwsTp1GdDJe/hkZtO1fqSm8XkYbU7wGQqC5q1gmO9oAiBK/0e3zerGwm+Ij3OTii4Q5GSbxvQaSBjsbsypbocRWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrip/CRA9TVsSAnZWagAAWhsP/1mvWukTzVgnrkt0ziXa\n6JEymxzNPACu15apyZHZEgFeskRlQCEwvoXWwWEAk0RuSJP/dvKYGsfWRjlq\nUJR/0A2XHg0TiD3AVKDAtjI4FDls9+1XC1Ev8fEYNAa1TIUdhTQDr+Q3DKfN\nxO9MuaIuuVEJMvu3HCSAza5tArhDbZTXFaIhoK50LzxE/sGaWr/69VYuQN1b\npFIG58Mb/nP26TbzO6/IcwOKd2X8GokHA3gTJIFmKJoYzFb+SM4AGMO8SAGb\nu4Gkqq9sGYlSRSOyGH9ZDVA5IvTz/a0ecjIraj61rjXxQo4vGcn5YNopGzSE\n18muXxXBJ5o/WS0TKCzZUuRBAdABn3fzqBbP+oRU31ZNMIcxy6bdC5LYiJhF\n/mdM/hCW5qMC8I9Tb9r+MLKdGXkQzr4OfAY838aVjB0BvGH376b1DHuG77x6\nIYKD+o3AavquMkvlHlw1CU876lvL6OVf1BN4XQHCp5TCboE7S//R9YvcRMAZ\nJgOMLKuytRSmDtqbh4e95jVIfXrVZFa2q4Dl89Ljoms6q9R4ZjW9a5DZ22KI\nGgVRFtcA0uALYPFjkA8HBaOY+9ldWMCQWI7o7fs+VSDwujpj/SkS4lS8PA6R\nnGUE3HtgQj2gidLAY+Acd/afnDN+EaR92Hi/B+zKDEj4ZePedfJCsIxO8va/\nYFRL\r\n=8y3X\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":" |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [**Quick start**](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://react-flip-toolkit-demos.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [Overly complex, nested cards example](https://react-flip-toolkit-demos.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n\n## Quick start\n\n`npm install react-flip-toolkit`\n\nWrap your container element with a `Flipper` component that has a `flipKey` prop that changes every time an animation should happen.\n\nWrap elements that should be animated with `Flipped` components that have `flipId` props matching them across renders.\n\n### Simplest example: tweening a single element\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of the `Flipper` element to behave differently depending on the state transition — maybe only certain elements should animate in response to a particular change. By providing this data to the `Flipper` object, you'll pass it into the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component so they can decided for themselves whether to animate or not. |\n| staggerConfig | - | `object` | Here you can provide some configuration for any staggered `Flipped` children. The config prop might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to all staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped element with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n### 2. `Flipped`\n\nWraps an **element** that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- [~7.5kb minified and gzipped](https://bundlephobia.com/result?p=react-flip-toolkit)\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"9541fe0ab073044708f2e37bf37bbb0e713e96d3","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.0-beta1_1538140798466_0.35539916418410744","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"react-flip-toolkit","version":"5.0.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"3dab1bf8f444fac249c218832176536ff8a5cbe3","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.0.tgz","fileCount":49,"integrity":"sha512-gPESXPmMhlQPiEdquVbh2heMHvKLddGLorJAGd406sUrD0dNd2OusMfTpsqWKeK60cnYjfjFmWZA805ep1lKow==","signatures":[{"sig":"MEYCIQDrLBca+PwptNzQhDx9L+5rv5CTogBWvflVvP/aQIZoMQIhANCCeuyheBfrG//wje8R/9Gszgh/ywjS6weUSKWmbBfZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrkP0CRA9TVsSAnZWagAAzngP/0DF42IsZHcWSOqp5jL+\nROuaT9ijBX945+K9TzhfvNt+/2Z1f33OCAGQLlQpJYXRU7byng0Wo1czwFHF\nKKB0xUk7ZZrgqRZeWSDm2ayrKPjbPOwcdBSy064EfOOW1YzPfaRz2iRl0/BM\nSEj7UoOv6aTGFvnTXxYvRMQyZOuvxHXOUrBy6jkghQGh17TdjMHXlGXG23r0\ntZyrC1nxq0s0aulEYooIE9Xd4lYfg67t5q4MriY8/XAqyewkGpfHzZ5pmDGc\nlokmJt5WaDfRtZDcftO2IsnIImBWX5o47UScxfLCw8KzMu+qdED567Hr8p4L\nQacEXRkGnjllwFNd9Gj+26fgWTu7C42zGpi+B5kaCnzy3505CxtaNa9BJNHj\nrmZJ4kEZrxDwn2kT+byYwSFSkpiQY15ILYDOQk/u7QrMJ9mkUuRSQsRC4B3N\niCbNcOMOsVoVLlWBjKFfulT+lVpGtLSUDMhWuE72yXUSl05IU0QWVmsTTNLr\naFW4qs9iGJwJ1wvLk8k5mRgDa+FMtzDCMlsPy6b1urD5kZUklZfpcH967nYN\n0do+szeanH3aewCC2cBWDtzarr6caf8x8JZhXuMQ0hAfalEHhGshLTo6wnY0\nVJrT0J8aKLaRGOm7FT6IlTnyUb3N1zDIWlw6GNpdip1H4jK5ZN6k3n1uVZzN\nFV6Z\r\n=ZCVP\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"1487f50b1faff7611d9c5fc6f7beb441a5f82e08","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.0_1538147315315_0.493375746676773","host":"s3://npm-registry-packages"}},"5.0.1-beta":{"name":"react-flip-toolkit","version":"5.0.1-beta","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.1-beta","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"4d9218267190fac2b3f20de7d71175057116f51c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.1-beta.tgz","fileCount":49,"integrity":"sha512-iRAbCoVXX3qg1h9B7RXZ5vTKVDOuKgojV0QhQvhRBni4GjDR7J60ID/yXcu8GdqREG/MUhaIXJ3FBTAvTH8duQ==","signatures":[{"sig":"MEUCIGuaXOn0H13yoKUbuD32T/ojy6vnosi1OWQIbUwU1Z4hAiEA/1AfJAShlPY5R21ZeJrFFeYAJ6q2JFAvlOGMxk3srig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrqc/CRA9TVsSAnZWagAAy70P/3SHjQ6LXh2piwhqqVZn\nSqN8vK0jTRZbOUAXbyjv47a/2ZPSoxSpSkko31jw1iRIIxZUpCYB1rFdrtHY\nv9OhU/jklvF3oDPGO7wSutovSJvcbR0f1RMrofmXhcTV+pO6VDmdfXZH3H3e\nUzbPomPg2uqNXG4v9ZqyGsjqgWxy4RkAH1HpXicHwaTwg0uT2JYZzuSrsyB1\n90EaXhY7iaQs6eqvEbUpwKjXgqSGcJD2MaX2FNaCauUNSTSxBr5vJ/LpTC+t\nvvOFzU9XF6AWGMrsyfyAoWAMZ+UT4f9qr7ag4KeUoZ5Fuayu0VIQ3dgFBX/X\nqss9IkuikbVFuJpns54HudwAn+RFL0W4sPG4L9mWB1OTfoNQ9Prdkd8vFFIk\n67cIQCZiPsA0pbQXjT3mQq/9S5dFrkBciA9hJlWIsik+ORr5jaxF/OccXltn\ndfWmJmIupmFOmxPTqMkVWOMUJwLQKa0ht6bp4+doNICp4stPOIIEPEMxBWcm\n1UhZgYYoV1GWKHrp+YFOWrsASMfsekizUcIT44sKpO2/xLqFBZMmDLjCBsX1\nzk0xVe+9+8xohuoOwgrLj3bUW1dPiqrg6g9ihCxQ59h5CIEYGgkktJ+JvGQl\n7IQM41Q5yujc2Sdi4COrKHsCY5DOvNm8Mi0tyRZYI1rjWS/fAfNpNoh4kwkO\nOTzV\r\n=bv5K\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":" |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [**Quick start**](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://react-flip-toolkit-demos.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [Overly complex, nested cards example](https://react-flip-toolkit-demos.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n\n## Quick start\n\n`npm install react-flip-toolkit`\n\nWrap your container element with a `Flipper` component that has a `flipKey` prop that changes every time an animation should happen.\n\nWrap elements that should be animated with `Flipped` components that have `flipId` props matching them across renders.\n\n### Simplest example: tweening a single element\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of the `Flipper` element to behave differently depending on the state transition — maybe only certain elements should animate in response to a particular change. By providing this data to the `Flipper` object, you'll pass it into the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component so they can decided for themselves whether to animate or not. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n### 2. `Flipped`\n\nWraps an **element** that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**For the most seamless results** the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.\n\n## Library details\n\n- [8kb minified and gzipped](https://bundlephobia.com/result?p=react-flip-toolkit)\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"a79e9e537889106f5c6bfc4fa3aa77756584484d","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.1-beta_1538172734520_0.5202563584579765","host":"s3://npm-registry-packages"}},"5.0.1":{"name":"react-flip-toolkit","version":"5.0.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"b7d3d9c249d23fe36777d1d62de0ebb6030ae936","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.1.tgz","fileCount":49,"integrity":"sha512-TH0TPmI8OWoa4GgpwoDAvr6rjgkYD7tKzHgbxy3Fd1xatQZy3c1D3ExMAMLPKAs4ZP4oVESIQH1J7n98FmK49Q==","signatures":[{"sig":"MEUCIQDIQr+ctJVTh7FO6+4JkL0Ofucxah2V6M+T8HTmAUCBXwIgbbASuEL56OiDcUat5mQfFrugt6koCqBJn8KIQpiGrAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrqghCRA9TVsSAnZWagAAgVgP/2iVwCM86EmDSEKs10U8\n5GxCw1P6Z9Sp2vA8IaZmJF1LrcYMSCIhk+MPNCSIIyt8wyT9vCCTpwJWqztJ\n/dUJ7gnpafidpsMXSJu2YDd2fgEVJuVh/0U/rVV+HCm/GUrVZpsfpxGs+TpV\n05DFClGvR5V+rXgFh6ThfM/VCwRWc7fyesVLBlwJpl7Oc4kS6CcnoK1m1djS\neouTPdDsa9bGUzRxlPf6H5XKKju+WB/qYwiuohSykPJrsm7RRebLtlhr8ELN\ncVz7xGl1rdHxiuKDpT0Se3xiQ1Xa+M3FBO9FVg6vRwZe2O2SXJKy25yvxQrw\nc0dFJrjPXu/a8FpxDy+yu+wDYDr5XbFVB+Z5vXd7cNtt/agxQZtM1Bk6IBgw\nQL15PU6bAnKHZ1VnWzEmd10egzpE4zyJHEE/aW8EG6a+PcgYlxG8CNcrfx15\nYk9h0jndHpxJNvDd6C9sNOpjFi/nLkrejSfB0Fog+9aOEwO0qGFilMN/J8w2\n22swAZmWSk8XKC81MHdw976+7wWwOpjTX1eyACYMxsYED7IJCtgEItDWDg9I\nSxWzeT5Do9hNZIMl5sk6GV0BP3dnCm9m6sE8UtBBtqvjoIBCGaitEEFp4BBB\nMNo5JG9YrgMc6WvFhkiZclmPmV8zPSnQA1jC8u4tWv5N6k6V/ureqasPa4Th\nPqkc\r\n=7gCA\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"6e6e3596967c1e0bdb0919588ea129dffee3de03","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.1_1538172960363_0.7349160413039129","host":"s3://npm-registry-packages"}},"5.0.2":{"name":"react-flip-toolkit","version":"5.0.2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"ca18805709ce8f0a3897c46bd61cf71ef33aaa98","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.2.tgz","fileCount":49,"integrity":"sha512-li9eQwcHlVNy4oo+AoHi9w2+5O8UcjFq1e5zY08QqidNQV4nBDn+wV5wKWohruO8EArGUda8GoGjUjvy7ewXxQ==","signatures":[{"sig":"MEUCIQDgSb9t0i/RmOsWZGQgcJrb4uePUD8v8XDbSyuha7OafQIgeVqJIhl4sL1fF48MhS8ZnHcwYij3kRVv4USMOHprxTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtoYNCRA9TVsSAnZWagAAN6YQAIMHd472o96gOoPG3/Lp\n8Mn6iQjLczDApzHuzyoi8uMbTA8UmWFp8lUS2VJz++8f+HjcVEKGJox1YLgF\nuXLQcVMuP+H6h3u2PJ5jGQI0J8Vjc+CW/ZGhNl7gss1jX3wxqdRc3eOKSTul\nPwg+NxVer72qMV59eL6a3hWgiVn6FnYvRpsTxa6t3PMFtvOFxngh6aXMVbUu\n3NHpRYVgSnieWx4Vx1hLgZx+ktFjDRzCGUAIfYE3SxyFpDah4ydxEbcy/e/3\nEXcG99vs5apQd30C2oztoLYv7DB0SQ8nLXgTDgDo1+66zFbOEn/P7hBXDIcN\nAEPLxtzCNr3SVyDJENWSkYjePFI/DtmabmJzcKh/SqvQqS/u1jQ6mjUPkHlu\npetJBE8TekwmOihGr3Lh5aE3yS0zK+aIC7S9Rw/i84V1W6+Bm4X89yKoH69f\nJNS95qeBBz8MP0jEIxpG77XeMrsJD2kqeoN0jYQvIj/La1BQrS/16ClWhnra\npxzoBcjnbjuk+Qid1qneuN1qF3TnkzwG7uh3Rw6xyaBsklp05wtXPbfFTvBf\n7F2Kf+RfWwPk7GfFraL/kIC7RgQUOPcwEG+v9Ww2AbSo+PQxYsb6Kj8TVqbg\n4ZGJsNgPFZUiYw6PUfycR3RlOTAcC6or8ucm22Ww8K44rHT9xQdg64wfbrZt\ntY2W\r\n=p6r9\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"7e8340c030ea7777ca4517ea9aabf53c4b6f423d","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.2_1538688524745_0.7832685283388194","host":"s3://npm-registry-packages"}},"5.0.3-beta1":{"name":"react-flip-toolkit","version":"5.0.3-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.3-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"f6afae5e09e506eaeccee403cc2d1f3cb33392ea","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.3-beta1.tgz","fileCount":49,"integrity":"sha512-8hZWQWSbXEWCTZIp8pkSXiOIm4nDijbjkipoX2VMJvuIsFgigZzkg0i0KpNoKuG1bZ3BL/jgpGKxYoTB2eL5lA==","signatures":[{"sig":"MEQCIGRSdKAiPgiux1ngiy1bOiw69YuCJ9zi9xHDPdyGrNdwAiBr6cDt7ZnjtP2kVbAlFofXiV/OkpRI7A46SRNIMhkFXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxogFCRA9TVsSAnZWagAAoMoP/RuJy80gKAYiK8hzZklZ\nmcc5Q2ojz0W1d9Jd/IDqnwvvwJJXtzO3kUlcL5H8Kg77FB9Mz0LPcXZkKISf\nxft7cxqzJi/xItPl7pRsbVpq912ZbtK8fxpb9z/aAgNWv9TDIESn2SFWShVT\nGeu4m1GOKqzHPVKECPHapnn+Wpl1WuTf9aRovwiUq14x4hsT0V9P7rwDylGW\nZs2NmTOwoN4rFmiNV3cacmmDtE27lU4o2mIUI+h5OS6NysZWiIHMh0/1Wn8Z\nMsH4g74k2Sttg+YtBsJxIdKKOi1ENePz6iwa2NgtueNwKG6k3dtyLkvTfQOs\n5sGKu24842KAsEKZQGopwOywKVWnBMjubZskU4ESPJtYhgMJH+Y6H73x2R7S\nV8nSHFY/DZVlL9ZDJLSD0QxFp5JII35Fo+BsTvP+0C7TzdmfpD8K6p2m1QmU\nApp/xGN5wyngjE6qYUCkv7NrkXaH3He4H/4pR5x4QKisMi0eqsbcgmcB3V4Y\n/WIXWgWNCWiRjUKSizoGbElDB4AqZaCvFgD1OCP4VbHdN9dO95RkK+4lUTta\nzJSOj+tryn9JKhEY1twdI7lMeyzI/+v+3o11TFJ9a7zcVlI79QPXH2soiu9O\nHiLWpCh8T+t5N/9dxYFfJdA2MHZ3vCxz10zJ/joUJSZ5fZjEmL6qCce6Q9Ip\nAm/K\r\n=MrY6\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":" |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [🆕 Interactive Tutorial](https://alex.holachek.com/rft-tutorial/)\n- [Quick start](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container** for the most seamless animation.\n\nThat 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.\n\n## Library details\n\n- [7.6kb minified and gzipped](https://bundlephobia.com/result?p=react-flip-toolkit)\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"a734f8fd0d43bd9e3aa2a06a06c9ffbeea6b3d93","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.3-beta1_1539737604593_0.8468652903281","host":"s3://npm-registry-packages"}},"5.0.3":{"name":"react-flip-toolkit","version":"5.0.3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"3d587d7ef809c5007209a798290af9c9092b7b76","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.3.tgz","fileCount":49,"integrity":"sha512-0IOLx0kDRS8g0IGroMU865lMexyVbOpyKczg81c6LLSOfFCXa5sIxet2OrQXU0VSGcZ8vt2xkATSe6EQjnSQyA==","signatures":[{"sig":"MEQCIHPiTmokqXXdtm5KlokvtbTecKYwsNzk6fibvQttrsriAiBWJupF14xUzxB3nC4nFYo4GPKOV5YUNJiBWpZM5TVV1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx8bRCRA9TVsSAnZWagAAxRoQAJFA6CqNoyslBvg5hVwA\nRDC9BccijNoMdCI7B0TK3na4S8S+4zcXGP7iG1lrUCRYTgrBllsM7wix/7Ub\nbJIzf44p/8kPEtDyNSnLJHTPMQEDcec7x1Fzg15CDdWQy6dG9PiueVV84TGl\nNBjv0C2i2fPX21f7W/dLMX1SrqqWgIhgp7XZPJDizQVbWrh2TB99XLTKY6Vn\nMCELf4svKeujBaOEpKph46FlVAbms+ZrMTtI3IvHlXN9DUWXE1PrXq2KuYP7\ne/IOsHiw+HcHIyocgPALuIvfu4XloBlxg4MwuBoGgLEBJgNt+LuQjLWjXoW/\nQBkARK6o0PE7yluyCVXsq5PTkiMQ6YDQ+qobDDxoXTqbWwUpnAc4V3riY2x9\n0wgjQsJr9k9hwD9l398WqUjop+SPe/UXjViQIGUx4p3+8+rpBfYIqtT2FFpm\nE1fpkx+gFiCUAy7cQymDBTKkW2IOBD+UGExsmurwMoRp8loR4BghflnGQ2md\nAwSStyRIruIMrURF3puMx4BGfMf4oCMf4PONUdK0SjDYcEdpUHt7VQ1PIG55\nup0ExvP7bVefJD8ZRBLBxrS85xDiFKnCLtzIHY9kDlPpBzt3nuiWPWtjXNz1\ndDETEtE+wNi5YxHtDj9A7N+2MgZDR5qrvkNebqlNkNqpYdX+m+sNxg8WEnpZ\nPCZb\r\n=eG7D\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"653e761e52646d269615139ba79121a42326dcc5","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.3_1539819216077_0.22968963863233594","host":"s3://npm-registry-packages"}},"5.0.4":{"name":"react-flip-toolkit","version":"5.0.4","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.4","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"2db0f35fa5549a01a69c58c9eda64636b67efe62","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.4.tgz","fileCount":49,"integrity":"sha512-ZDDsgulEjx78RbECAXKig2Vsi6CBalHjZE8DXjLAUrkSIimcvrWJRfSFdsIPwsp3xGN8dH/KgtB7aAWf9r9iSw==","signatures":[{"sig":"MEUCIH/QYueo52E+EJsYfN/kIZJhkuXooYiLPh60r3D9ER9sAiEA1bPFTU8CGYbHRsma0m85QX24GfhvIks7Bxn0W2JzIoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyfDICRA9TVsSAnZWagAA+3IP/0GFpS/+Kj2q2jtXKb1e\niC7egsnUDYyMoLBMtdq0g+Ev84rJ/Q2xEu/KiRhsdo+hfmikQNBKKpYU20Wg\ne4qrM2B1Y2sCVuANlO6ORW+/K9/a/NjwfVxgKFQTbVOvlMbCHv+kQcF0ffP9\n3eMNvQeB4LdjxwulPBW6R+nmqQvq1lftCtadB3BkRUml9WBFu3VWXUBsQl/f\nQBrmk8zGyinvEynYbGf9xWgkEwRqZrXJNBpgBtutGVee9mintGTpbFwcQWw1\nxES/5GwJ+1xeFfX7XfvpQIuBHBcay0+MJKtEC/Y0yIwJ47LkRadtQ5KTOIe8\ndg8mtDaJqvUmWft5xPGZEyPZBgHmk0H1GsxAZnZbrDqgDG63wDM2U9uWt5p5\n5mbNa80DODkWSBCtpLiTBS3kGnLygaWlZNf2x8J3+7Ibb/TwGT/KhEBRmhbU\nR1rU6bWHz5Y1+Kz9XPoGSofFMtpdktxovxnI/RlYAKFGQHQH3a1SAATmY5yz\n/E0YbGrO6btGiMHgXBSbCegVYhMeKb2SvKgispTl51LPMRUkJSLtn4+QBZf1\nx8Ch9mKYzxF2R5gg326tFA6SIzpaisHNSRAjqQOYpoROC5ssTlzQDwgRxQkT\nRfeNaXq5lWc4qjVgpvOpVRfaxFiecuZ4P2IPoxevzXzYy9LsczTUM80LT8PQ\nF+FM\r\n=Qg1V\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"f47bf1f35536f724edd3fc82fd262d3edc010d59","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.4_1539961031499_0.578207151714847","host":"s3://npm-registry-packages"}},"5.0.5":{"name":"react-flip-toolkit","version":"5.0.5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@5.0.5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"3289ca6a957117e231b87847456701f2e5af7144","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-5.0.5.tgz","fileCount":49,"integrity":"sha512-6iGUEVBPONjgGGvpHS54DDRfZyy0thoZgpavaizGMCLzkoTpA+Lkh0k4jUZBPbRu/cGpNHyCKk+0YVG/bQmGLA==","signatures":[{"sig":"MEUCIQDQwT89OcjF94Udp26p8b/LF+jX4mUS1chkZRhqm+vCyAIgTwMN6c6Ca2SV/aupPLiNRl4m/MwxHEoRknF2SwZHxEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzIUnCRA9TVsSAnZWagAAaG8P/i6n/z7iDljJnOvOkczV\ngfYo4K64miNFZEEZ/+5ZVF1besFHycbg5jile+YzO3SXQVof1uxES+QMVxQX\nrYe1XkIr3IGgjbgv6I0CGr5EEoGsaE+zE2JBEz0OjP1S/Ov7RImW8drGEwQh\najxv9C6WGtRD0pkh3BE+0QB+8UyJMLVpZWqU8j+OtoEiAgeo/Hd/euIzT/VU\ncXQ5lR20OQFVoLe5AmdCHqLtLISSWSWnHUf91eb56QeMRSxzxCDEDxV0eykg\nd7Yh+QL/EXb1PYzi/J+3mHnkYxw6zHb3QvDt++cixS3LcOISOIVHm4u240oi\n4F0CH2x2CFDjJWFxoAGzR6S/yMdZ7Zji8Zhtnhul8af7VL1kFBeCrSwTeohS\nbgqS5PTvB5VsK0vazKzdY1cjpVCYqy2hRtbXD7C940iZswN3ogEfT9LF3zyP\n9X9F+DM+53qPh5ZRjSasVkCiqX9/9DDCYkG/MbLucaKEbYmHDTTLTImARG7G\nrkRnrOZjCBnZZu0uMmA6dcVbqqi4sMVywcX5/Bdsg86tQ2QVOsvrGwO9otC6\niW+m/zzzztGB5x886JgZSJfObFZ7CQ+b0dkbTkIMKsf9aagkis1ES7JPvKRr\nB3ysrmLmtvEjXm6MxW/xWyWIGdLpzJ868TY7q6HmI2l+dFKzCLINo08hfIHV\nNra9\r\n=vddz\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"b781d42eb18a6c4c3f21216e3babaf60c7d9a2c2","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_5.0.5_1540130086655_0.10072301957752816","host":"s3://npm-registry-packages"}},"6.0.0-beta0":{"name":"react-flip-toolkit","version":"6.0.0-beta0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.0.0-beta0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"7b53d9b0f7cdb8b9da2939e5fd9d2de3e1fed5f0","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.0.0-beta0.tgz","fileCount":49,"integrity":"sha512-J6t9o473QWfi0J4HPQlce8IwAbAolhbKlPFmdjHoiFboybCHATnILdA75P0r+hMZ66IrkEuMG7IchNzuZjkPhQ==","signatures":[{"sig":"MEUCIQDtmMJHTL/cFeiFNRgcIGwAqo+bND5dhiKX45eGCalvhAIgYPZIWMvlz96vKmf4Xzjkxbx3DUJ4O5AYXfCej09hvfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4Zz/CRA9TVsSAnZWagAAUMMP+QAMLCfIUs1d4SoLqJs9\nmP9kh6vCsafBDjtTsopUDOzUU7dWH/sL/GySm0/NVj0AeK+bwrBE+otGuSI+\nE14EPHwP6Btq3e+wBLZ/744MkWjtwIbAvdnnbPSSp3lBwPhBMdEmEFGuSaNg\nWfIeECUzBEZm/GKdGmH2TkeihQ5/QRwrBxmlLSrWQJQZQvRkLP2/iexZletD\n8/Ti+WckRWJBS+g1gGawKZy3VQXt7VGR62JDgUjs9CAXzILYdJaI4DpPSZ6Y\nz7bYzGToZijco4iWNdFxkgXm5WcYztbbQUGLwlRTeajCwoeduzuZQVP9OpwA\nAhi6BBdpoClJyIhCCkKQXGP+fQe35av4D5HTWb7+XGbfli6poao906fO2SPh\n0oNtzRNDqaBkwz5E8ElVSW50eoADzf/j1FxMNDoUz9f8ofL8bI/wSxJQp3fa\nW2L+8rg1U7Pw6KdBMgyweu+L+4RZG7siHFmXbXppshfLS+k3JL7BJjwtw44B\nnsRGpU9GPFZe+5OAhBHZ35S3uRArkk1IJR2CyA84S5HlHnnjJ+V0uNoRsLPH\ng7EtiCcwPQl9+fRW8QsuOS4tT2oiNfrxjlw47DFhDY0icCr6ajlYyoDSkwS8\n4TkP3PWITvYoarPTfuCKI9XJjrewMTe6t9EV5hZTrQjNkrj0nVHRfnqLAQU8\nKPu2\r\n=QCG3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":" |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [🆕 Interactive Tutorial](https://alex.holachek.com/rft-tutorial/)\n- [Quick start](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n ```js\n handleEnterUpdateDelete({\n hideEnteringElements,\n animateEnteringElements,\n animateExitingElements,\n flipFunc\n ```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container** for the most seamless animation.\n\nThat 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.\n\n## Library details\n\n- [7.6kb minified and gzipped](https://bundlephobia.com/result?p=react-flip-toolkit)\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"b4be0bbd464acdde3e91c118e1843d169b684797","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.0.0-beta0_1541512446172_0.47984028252450317","host":"s3://npm-registry-packages"}},"6.0.0-beta2":{"name":"react-flip-toolkit","version":"6.0.0-beta2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.0.0-beta2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"a894e5d48efaa77d54d5d975f1a8eda4d95f8da9","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.0.0-beta2.tgz","fileCount":49,"integrity":"sha512-fkGj93ZCHjaYxxSCRE8+B0CMbxkDCoWRAx4PraWL9r0ezoLOHqNoJLAqcrryzXbTfSDc8L+jsBhMrMGlHFGiZg==","signatures":[{"sig":"MEYCIQDuAYbEGKpEqOhMlo+dkbrAWAf2Of8btUrMShSThIKyQQIhAN8ivU7IyQuhPuxZtZnSXZDMke7NisC2HGznPWpApfKv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb46OUCRA9TVsSAnZWagAAxbYP/jA2KIeBpAaaoMKa1/LC\nW39MeHLR/C2c0My5rMoU7rsEDqHW+cJXi43oIx79zF63yZqDb01iGB9GJopt\n2DFe1dbqwv855tuihFPxVJVAJwK6VSXY+dBc7gp5WPDcSltpZ8avhqx0iX7f\nSRYfj5Fv3DRBuoOIuNnv2tKH5paZAJNFZOJkoSsMAVa7wM5RByeAGWs69dgg\nbtPMpftPK5WTNLplkudhdqzp7S/kenhuwXPhYPn6Mrf+5WhiMtBcC7xqeqSG\nPSKmVcb1Kw4CnkCUxt8SGxqMvDIpIh3WNZg138RY4jPrmFP4U5aO2yPISKep\nE8OKdmXy0wps4QNoTaV0iMcmngIKSV3nOhXD+XFoSYys3rf+DXD5zTqftx4M\nnrHJ6z4bciUzpex8WXbRIIe2C2aTqHjRJTg49CXfpJ2DJNblmBuWjGBQ2UXz\numRHQFJMysiFBv/KV7bq9qEKYQLU4CUL5C2JfMEYL7u2vn8iSiDtMH7RPGSW\n/NjTCTcB9y94XuqWIfSFhUUHwdibFYgQ/VFhknm6FNqzMdBeX1OuT86T92yZ\n1RxvxbW/Bb53vq+hey2gCljqxgXaIaZqvBg4+TgIXb9eoxMv2oZZSaCd5Ax3\nHfVmTQPNUOxnV9lEZu5BVP01qco7TT2iZBxbCiVaN45KX+Z1PYMiGBZ+NwDL\nGEQy\r\n=dY/Z\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":" |\n\n\n## Table of Contents\n- [Demos](#demos)\n- [🆕 Interactive Tutorial](https://alex.holachek.com/rft-tutorial/)\n- [Quick start](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n\n[view on Codepen](https://codepen.io/aholachek/pen/oyKJgL)\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n ```js\n handleEnterUpdateDelete({\n hideEnteringElements,\n animateEnteringElements,\n animateExitingElements,\n flipFunc\n ```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container** for the most seamless animation.\n\nThat 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.\n\n## Library details\n\n- [7.6kb minified and gzipped](https://bundlephobia.com/result?p=react-flip-toolkit)\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening:\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"5f3f707d7416a31dc2b6cadc252ff42227d2c988","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.0.0-beta2_1541645203390_0.12843232714573682","host":"s3://npm-registry-packages"}},"6.0.0-beta3":{"name":"react-flip-toolkit","version":"6.0.0-beta3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.0.0-beta3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"5374d0567a717a8a2b51538874a419aa33694251","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.0.0-beta3.tgz","fileCount":49,"integrity":"sha512-0+OiZ9XH32467BkhHLGcOvrtnC9xRkB0MFbLt77Kqh5MVlIS0qNyWxxamwpdmwN/8/UzFSgmOWwBrOaoyefZ4w==","signatures":[{"sig":"MEQCIF9+6/kg5T4fRE3jWNTjOjf1j+eL4zjw699aa84B0EtdAiA/h1tmqVBTzPMgiEcIyqG6/6F1YM8HFZHaT55R4/EU+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":407110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5NwMCRA9TVsSAnZWagAABvoQAJ/v7VZJC2F9SOB11Qbp\n2LYW1nRs3FFqxf0OmecGQJp6Mi9DJrwtlPJ8Pa36L7cwHH0e68LAR6FErOAM\nmca3B21J4eGUPxa37cup65fM7nAe3JhJRGZveGg0hVuW4V950Ak/cD8OWILr\n0KTxfPCH92kgYYAb2fX7BRh8H6EX2KvIw2HjP6HS/vkNHkbCX11VA4f7jHDM\nR+UbtZmZetbSKxy5SF4cTiJfIKnZoWLdLkO2Y87MY6HjqmqCRVM8u0omAxTf\nY4bJ9fZOm/xgRu5333A8Ya7E/23wX4aCotFixFAltmfu2MLwhEm4UsjCFAe0\n7er4fj2PQC/5wQK4DwGOyudYlvFedbDoev3k1Y3CyRTdUdiS04DR+zNbFRrh\nK/LuWziPYxNSSUGogKJjdEuffHRbENW7ArfHNF/GHOv+n1HfETocW1HU/wVP\n4zTQciUTbWC9ZofqeD8BFsKU4gHfEHGJGDp0ZtVoCNKwaCyEBBdHDvQh334O\nM9Pl+BrnUoNxANwe8W1idQ2o3UoLEo1SkY9URsrDkhrelVGe27WcCwWZwqfG\nFB0fbIqzgJcysfRzKQOhKi6c1bMcCRV44Za5Tx2JNrvPc9KS5F5PIHkv5yf0\nZxyoa5fv+Ol4ozFye4hr1KNguM4sAXQkRiYC9Gi5WB8H9mZ8qub7QMawKsPv\nqtTh\r\n=kcXY\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":" |\n\n\n## Table of Contents\n- [Table of Contents](#table-of-contents)\n- [Demos](#demos)\n- [Quick start](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Basic Props](#basic-props)\n - [Advanced Props](#advanced-props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n - [Problem #1: Nothing is happening](#problem-1-nothing-is-happening)\n - [Problem #2: Things look weird:](#problem-2-things-look-weird)\n - [It's still not working: try out the `debug` prop](#its-still-not-working-try-out-the-debug-prop)\n- [Performance](#performance)\n - [1. `PureComponent`](#1-purecomponent)\n - [2. `will-change:transform`](#2-will-changetransform)\n\n## Demos\n\n\n \n \n \n );\n }\n}\n```\n[Fork it on Code Sandbox](https://codesandbox.io/s/j7klm66885)\n\n### List Shuffle\n\n```jsx\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions in some cases — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or in other cases, you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. The function receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n ```\n\n[Check out a live example of `handleEnterUpdateDelete` here](https://codesandbox.io/s/4q7qpkn8q0)\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container** for the most seamless animation.\n\nThat 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.\n\n## Library details\n\n- [7.6kb minified and gzipped](https://bundlephobia.com/result?p=react-flip-toolkit)\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"562695cf6c0cebb9edb9bb0d3f38d462f402f7e2","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.0.0-beta3_1541725195862_0.09770066700488833","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"react-flip-toolkit","version":"6.0.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.0.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"d7cf471d4328fc7b34f42fe345bf335bf05b926e","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.0.0.tgz","fileCount":49,"integrity":"sha512-bDonsbGR+n6rb/yNHL3QHgxCkhy/KW0YF8yA+yeS2fRbn2H78iP5yYHC6WaJYdIDaU+emljEe0inGfniQlvx6w==","signatures":[{"sig":"MEQCIA45hEmZvIuZ+mULKrSCQyiplB2J56AeKiK3X+RcuyUJAiBLj9oveAl3LOJ30nnB87KrCgb45h8Fwh7vxB/m1+efxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":408319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5ajQCRA9TVsSAnZWagAAMqMQAITWf138lhxXwneZguht\ntYo5pFoRDr755gNrdMAKn97RLVkKBiJdAxhIoA9ghEpah8ec0Wyg74lVp578\nLaR5/VlPvWvWJ+4M349WDemtePQIorZ7/fSqNol1+Vs9Y27sq7LdSui61toP\nx6uQuePQsMP0W6KCj578SJ7I3UVZhri7cnqTlJPsn4iTJ4Ecl5NPdLNvm9Qx\naZ8EzApqYhIrWBSQbJSnuvJVNlCJ7NW1CLPhpu//I/P6jqoeenONe5KDbP+T\nOGNXzgwbJSGFyvnsUCjtf8AtjfpxiMQ4GAibIU9RC5/RNWceaZpU1ISDdRi7\n+APdH7oDjqO8xEbMvwt370+2EkG7GL9MkH6xrR5fqt+cBbsXEVEbq70K8EQy\nM4SKdCBH/P9icyN0GoVm98vE+2sNboFBRf9PBYN1AY6oTdgJmLtUQg6aGB6l\nz0MIBFKOnox0CbYBUHeY4K7nVWyPeosQyaL6h/mGK6/cqhvliW71++Hhv9xb\nOZpO2Gy4JPWt/vAmfIkypi9Zy8SEhTC5MpOB+keUP9GhwVrxbGNlUw+iLEjc\n4wcoo2r4oRmTVMfLbwYLhFRlrgU2cyPdlOrHAV/fLnfC/BB4MseM3LiJG4uY\ncmqZVlCRCrHUHvIsIjvVA9hK7eqJe2jxRShFdgxZM598VEhQtfGPkONjjMTV\nWTx5\r\n=gAQs\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"3927aa80eff1adc7659757840c0c67dfe19290ed","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.0.0_1541777615896_0.7249136543792352","host":"s3://npm-registry-packages"}},"6.1.0-beta0":{"name":"react-flip-toolkit","version":"6.1.0-beta0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.1.0-beta0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"33e6329666e3a10d9650554059d14e9fb4569cb2","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.1.0-beta0.tgz","fileCount":51,"integrity":"sha512-RQ32CgXXTnMHW3WbK+qOr4pCvjKoRxpz2tsW+vzkhKQvyYSE6jlPABpCCaytg/YMMZv6vFil0u1V2oGh1zNjxg==","signatures":[{"sig":"MEUCIQC+oA5HFrkn9r3/BodPbFwtpvNymTJW/WldGgDi4occ+AIgMTXAitgTg/p4cA7VRynNBIAhRHzoQOFkFZ/XMtMZbtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5cssCRA9TVsSAnZWagAA3S0P/3Jp1ScbQwScRXCscm3v\n/15PqLP2BHyNLE9E6b+HDPt1ZCj/j0fyWicXzmveCeCNzyHYy/ReHUr29vgK\nQelLg5DTepwUSiMYmmBqcPjw/dnjXefBYHEIaK2aUArQ7jAWj4FsyLUooc0B\nLd5qP1tGr3gA3Zqj2YamLhFJuANN5TI4gMwXu5L/kPfBy7Khq+l+bsX40B2o\nFwRu/lCEVGcOr0Qmi7DQuEJdcXuSdWRhzB354YSI5ocqDAdrnHTG12pad9rP\npV8IhgBLhXrDbklGQFojwfGWIU6q2qCNoajGvo3l03KKOaExZ2pkaCd9fO8f\ncHLpQ8QgP8a921Tvit3WZ+jviJuONiJLu+4BaTrv3y8a1ew6svHtt6UIE9ZL\nLldqfMG4obPWrCNZ8DSVTZvZ5HWbg8w1b/3LKyD82fCjDTYKI8cjYxHJ6JzW\n8xorZ5Bj08P87jLjs9gl5jJbJ2dNAsYHjTmY28uSx8+GyZJw5IWpXB06fSX5\nzYUPsxJMWL3o37yr3j+X0MkPA56P18c6qn8j9KBteSIrZzgbblDEFl60sI/s\n60vFP7srbQq5JEBPdolI9FmRys3Bq8xWK/80m0BBShkLzt1HN1nsDs62pO3b\nJG6k4i/f4UdKwM4WQDcsFk2Lal7l8ZRk0Trt+nM6rEcWJl2j/IwU34e/A0rp\nFc/K\r\n=EVX9\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container** for the most seamless animation.\n\nThat 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.\n\n## Library details\n\n- [7.4kb minified and gzipped](https://bundlephobia.com/result?p=react-flip-toolkit)\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"06fb8bf8232bf40e87dd3e5cd9c355aaf9ae0511","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.1.0-beta0_1541786412105_0.956133964694148","host":"s3://npm-registry-packages"}},"6.1.0-beta1":{"name":"react-flip-toolkit","version":"6.1.0-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.1.0-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"2adcbaffd16f3b02990d314e7e919c73de8193c6","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.1.0-beta1.tgz","fileCount":51,"integrity":"sha512-wCCK6gvOynLjCqOhy/JT8hHhsqggwo8ncTXTKHgII7OkgANcJyypD6TtLVhYhy4VzNn1VT3jWCGkhQ9X7dQEcQ==","signatures":[{"sig":"MEUCIGKJhOiiP3l1LwgVUBmFvd9OCHOHccpKjsAV3Dzp9hy4AiEAvzRaES+SGHr8n0hijlu6T4b4u47XK8AFJmucb27kYcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":410681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5hEyCRA9TVsSAnZWagAAdJ8QAIkiXt7n6LYJkZlWn1gc\nNyyFHBawSqELRCluRJjghdSq1w1BTZqLUWS+6SihGUtgGTT27X9HpO3MCql9\nWnU1NGrJSNCYXMcLO+h08S+ZOzO3LTdDzu/uxsYXDCFxrcH4+Dc+3+Ebq8Wm\n51y4jdyY2nmUoNQUkNFexwr58Wt9BmZYfSMkDVoio8CAEDUY6iUsbx3uFtNm\n5x+LXb8eprC1J57iTEm1LCSUKk4V1+0hGIwvk6KHEP+vr6qH5YxTO3qbLkwA\nbh+Fl4TYHbIwCYmFkFrKiyg02XEf90cK0unQkPEfTym92xLQREGATArtpf8T\n++jV9O9fneS4HTcAvO/nkSHtMwtmYB/OxOSFL1hS+en1zxREpdQQcWS0rYjL\nDl8LUJuiQiB/Sbpca8iPYeuN8iONA3ntR6xW7MSMGqZh29Pi7SRdF/5qN3ap\n1/24gMNBzLa7RgWZFP/EaAGnpDRiNZZMLBS8ydeqfM4mk2mpIaGw3Y/z0qpv\ny0VW8XdwsdzcRjimydP8G0EdLfpAgKyRX8usBTIK420NvutsqKVjWh7AfGrz\nG3/e33i9P0fuWX1c241cewCBCGorK5fKBRycAPMKa6gBN4v1uW/IySX9Rwe0\nWF/19MLExLSNTV2CFMgxerSNjicUE7zkBxSZHy+QxC9nvg08zVhT0x0hElhs\nUDNA\r\n=TgLI\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container** for the most seamless animation.\n\nThat 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.\n\n## Library details\n\n- [7.4kb minified and gzipped](https://bundlephobia.com/result?p=react-flip-toolkit)\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird:\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### It's still not working: try out the `debug` prop\n\nIf you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"7986fa13b8b6b1150ae331a9826617cd12ee8747","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.1.0-beta1_1541804337700_0.2577275620394006","host":"s3://npm-registry-packages"}},"6.1.0-beta2":{"name":"react-flip-toolkit","version":"6.1.0-beta2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.1.0-beta2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"aab6960ef47c924a4f586213940891c89bb48b19","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.1.0-beta2.tgz","fileCount":51,"integrity":"sha512-NJ1/hl1aeCP31/1emUyQ4rUSDYgYPOKdHh2TTeN4Ennl+8h86qnh4QTmLcERbfdSyAwDpMyBXgeKtyrIh34dfQ==","signatures":[{"sig":"MEUCIElrRUE5bOzO4J5ELBu0iPk7LQw7yfqVh6IWyLbZtlW2AiEAktbXZR8IsO3v1Fwj7Ed8d2GTsrz0SoNCN2OUvm34UaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6JmzCRA9TVsSAnZWagAAAgYP/RO3S7LlahFbuCacws7d\noR0f6Ghe6vwD0fOAHE8cWjhbI8Jyg9ZgoIbOuOQZIK5IFd0HI0dMI2K619nQ\nnZoPQSjjKgpnp7b2sM8F6uLQEnQDF0DaHdd8BWNuSSGxVWOoQ6F3njVFyxkv\nw0OckeLSciK6d/IXpfhTZbMssIGLyQ/r7X/Q0tO9MOs6JyKPJQY1V6I1Wg2t\nOKPvZo5Uk7ouHIH+qJtgbgnFhtvFD5SfcySsSs3zc04DUlCBB0hfnUN0KnuY\nzof0fI3oQcbJ5DoFjWExDf7Om0MsE6gngpLopbFLLO1r52vbviAoqrTLG//R\n/CfVQVOmSC1KoDhYVOMFZ8Pf8PrD9aWeYHafBRpIiwMGyZaCgVbbEeoo/b1L\n90E8PsBdOn+kyT0yYjQZl6PDx7LjcYgZeXDrxtJpvu/prOGgOt/fU+0iYF8g\nBIIAxVQI4/T66uD3LObR+Q/is3z1OwuEB8so8GsjxTzW+W0DLjrJ8Jn+OTB7\nbbFWuv5SZaPr7tsh9vyo+ukhfA94GthrTPnSXfuacIVX6RKcoMuaUay51voG\ncywUY4685RRR+QSs4prQ0xlZtbjaPJ6Bhh2VjxQtrTJcsMHpX0VinsZzul1A\nWWklQePNBdhhaPBACxn0o72olbrjrmiSWCv/XC/Purt0dBTapegWWH8V4KS5\nT2sG\r\n=/YS5\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#scale-transitions-made-easier) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut for many/most 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container** for the most seamless animation.\n\nThat 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.\n\n## Library details\n\n- [7.4kb minified and gzipped](https://bundlephobia.com/result?p=react-flip-toolkit)\n- React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations.\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, please feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, `will-change:transform` increased animation frame rate considerably.\n","gitHead":"0d416bc81db3723998cf715973c701eee1ad4126","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.1.0-beta2_1541970353970_0.13990372406514062","host":"s3://npm-registry-packages"}},"6.1.0":{"name":"react-flip-toolkit","version":"6.1.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.1.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"d3d4e1899565600ea8dfb66eaf8f358cc26265e5","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.1.0.tgz","fileCount":51,"integrity":"sha512-ReDbgVyzfp42xPGEx2UqY0N6noCsfMyADQuzo8Ref8jW/69AwQ6/MSlXbyFeMAx9GdZuZzapy78UEdoNGOra5A==","signatures":[{"sig":"MEUCIQDOTXR7cTJjR1cfXP2orpbkMrLu8hxdYab5XYA7RM/g8AIgMDFy/LeNpFiv1ZqDfn6dcTJNeW8K+df8UwSEslXFI9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":415675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6ahbCRA9TVsSAnZWagAAdigP/1eRWwTGZfLLw47LEh0R\nDF5EKRNvBwXkSiB92MwJr1apbfLjiCGzxfS5PQjAjC9YwzBhIwfjfs878Jdq\n9fNaPOF0ma2x8ESp2xE16+mJU4dUn/XDvsNQEoCMPXsIYhRdFAALEk3tMVMt\n2s/DLnccGdoRWVNk2nB1M1P1X3/2SSmvsXDzmAGZagvO2hIwvoVNMyimeJgS\nRebuumNhx8wNWX1pDj9P96wjJNDsr/Lc4Qblu6scCVgyesfugfuOj9sjtZcX\nhj5cj8eZwxImtvDFy5Cdu/qQVZXJrkiAFjyGk0VJY/+AJLedkGcx8NFxLWmU\nwLmO3aDItjjsyTANC5Aeiu39wy/Ijp47nuxFv06g/Eczf+0ypJ302JVQy6NF\ntV2MA81rjHi1NcrZ1lRJA+fNQeBgMX+MCk1YffPALCW8NH+IJ6f/o6cVIDhg\ngXsn4+myLPONOgMHwIi4yMaTI2g8f7bUXuCB8p/aozOdqn1bx4HZYeWUgqMs\na4WGrYXC+HytlrPOf3ZsUdgff+gBNUiH+2KAHJmnPfD74lxQaPQ6WPyP1WpO\nks7jUyAzD59Kx14IaN2jzUeroBWjOJRiEua5RJxn4DzMd9dISOHPbapWIyhb\nlUzQNrJKoFwm8b5hoWrT6vgjO7+mGMzhsphJBGe19QIQpORp9B3laP77JYnh\n4XEY\r\n=MO9g\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"49ebd13df930ab88311e62abdfd0823dcfaccd26","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.1.0_1542039642368_0.7987442720894509","host":"s3://npm-registry-packages"}},"6.1.1-beta0":{"name":"react-flip-toolkit","version":"6.1.1-beta0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.1.1-beta0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"dc3877003e54178b8738d369ccec6830796692c0","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.1.1-beta0.tgz","fileCount":53,"integrity":"sha512-S2e7gULKypdWuc9i9iRWjy8bwuY6G64/xnsm5liZskMPR93M+WHk9uPgVDwRtlFxjao7T5GN5i51hoDnbHT0DQ==","signatures":[{"sig":"MEUCIQDRa4HHZqHB/H5grReMX8/m4p8WIc8vK1IP8jnEqhnVUwIgFpi84eHvH58XTpzJSrL4yzoPUJ3pke9uUw4cNdkAwfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6c/kCRA9TVsSAnZWagAAwRMP/R1Y7ahoPdqF86uvX/Mw\noGOIwr7+JTEnoeMW55iUBe/9vSmNBn+GO8rB2j34mP8vC7eR2pop9vQVh5ol\n0YoCwf5o4QNqOPlgI72t0D20Sqw/yWAEShNE9bsFU0VXSgAJWB1zDeAbpvLn\nbeaTQeNHPZSRDJ6Hr41C8/YWyZjT+OXW5kvQ3ZBl0ddf4kdMK442tkI8aHb1\nMCFrwi4GIHHfzLCVlmVci7197v7tw+BEDoFrOMmHE9PWwS3fmCTmWs3d4wSx\nNRdmyafH8hnecBkPWnBtVAH+Rf/Zq5X/ndMxmu2m84IYQ4Bz8sFSpgUX03LR\nh0NydtAplZZmssEhvYMo8ubumVq949Z8GjeIVjxMOYWGJIv4VscDUmd7pv1Z\n2lOmzOCOJS2omNFX2gTY00hAxSvmhI8zZrSJ5ZO/8pbjtNUtFU/UPkA6h+Vw\nPyyZrUvaM7kzd54cjUd12d8TBsQ2meF54L89oXD8QhKHXWrJekjuTsG7k+H2\nEjMGVEidYVClwZqQmmfImfpAWeSeB/qa3hkNWP0+TOKkTGl+1+JvTFC1un+k\noHhRfi4GDLJTthyaocHRJEb0tuBaBl+16ZaLBnPdwxsZ8Iv0fyL3OaANHgsd\nC6TkdmuWnoXaCyRYUstKYN1Bv78ES2Bt1Y6NLUyad+o3rz4OpxvebWob9dz8\nQOEi\r\n=Q3Zw\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","gitHead":"ac944637372916b9a97a9fb015ad7e49f2658eb9","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","test:vanilla":"parcel 'src/__tests__/vanilla-test/index.html'"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.1.1-beta0_1542049763808_0.38174929650207323","host":"s3://npm-registry-packages"}},"6.1.1-beta1":{"name":"react-flip-toolkit","version":"6.1.1-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.1.1-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"da52129c6edfebb6e105cc54afcdc1af2adcaf49","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.1.1-beta1.tgz","fileCount":53,"integrity":"sha512-iBTGe7jAAuU0QY6+sBzB78LsQRKklPRrkzf6Pm19yUAXa6S57Lsc84N3aKLofULCdjcFRxncCAzld2jQQ8ORmw==","signatures":[{"sig":"MEUCIDH/ZOA4og2lee6q7IdmFkn4Vn+impj78BTkFknL5PxVAiEA/C8FfeeFj+SQ3TloBYQAfbSpbb/Na6ww1fZPeLELb08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6eQhCRA9TVsSAnZWagAAHmgP/2eGct+tLAH8Zbk+Zc1d\nCeGLdDzb9Sxc/zFYEGhfSrfS0HTZ/YFdzhbkVgLQNgiGCo7MjbxzjHnXeZ9X\n4DM0lh8a/NnfD0bD6q8yQ3kCnEcHBDfq4FqU1vUTOW0ywse2D15VMRPi2ErR\nwURsGDi4rJ1J0x/IIlodft0SWO9W+flf8M9Qy/bKtdjjjVroiVg5rK+5LMlb\n2Dp1y37hvR/wU0JApkLRIDEIGUzbg6jRXygySnLdf9Vh2gH/GK9HSjjnfVFc\nD+SmrLmR79cv3HOw2ci5hMaqYY6MfStEERJQSoJkDy3DryGXL8RlH5vJ2ZTK\nh/8bf7yU9CgIItNMrZ0RMptZ335X0ji7JzcPB4nbheHqloE6ywYoKUO57CzQ\n9618zDAojYLg4W1zCkUmRuQSYapzR1b/ueRHfqXU6lZhKXR1gbc4YD5HOXnb\nF0wicPkYVk+EGjVlajXkbSW28LQG0u8WunzAglqqtVbhYbZQSSDtA5BdfhXZ\nznvfVFWcHd/x+6vsjr59HOJO6n4xh1AYpHHMomYlZhyBT4VO/NFIcjuxg0bR\ndTpCxHU+G6vXxJpl2FUV63DtlluTUt8FcJ1+PbGAnc+5mse2UaMCu6deBwcc\n94leD8j4XiN/Ve8xlHacYtFbkY3MMOnesxGc2qvKpweZIvAxZFTfG6Bcdt5+\nbGr+\r\n=RuSg\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","gitHead":"b03d6d50809fd806ecf7fe1bb7ee7aa7ff482000","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.1.1-beta1_1542054945093_0.5053907102450492","host":"s3://npm-registry-packages"}},"6.1.1-beta2":{"name":"react-flip-toolkit","version":"6.1.1-beta2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.1.1-beta2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"ee2637a075eb9a6b1940b6f87f896f030059b45d","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.1.1-beta2.tgz","fileCount":53,"integrity":"sha512-4Iih8cz8mcOMnfGkK28JC8A5v4z1CEY6xVPUIx5aiUM+U6Byw3E+5c9r2CqnOoogdgjBc8ONPHKH+5CpEbcI4A==","signatures":[{"sig":"MEQCIAZ8GrxDMJFrVDyxco44/XCep9m1ei7KHxVKV48HYER2AiBuYLL6+5joKyigLvoOKTpW+j2OyRZoyQpFhi52u1l1gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6fgWCRA9TVsSAnZWagAAW+MP/i5eG9J5OAlZOrzVgTId\nih3DAWHe2PzB5txbRLIkegtbn/kIG0HYndRF70dl7gh8pTAd67H7yWKVO6RT\nWaAl2Dc/vGkGkbM21APLmrab6SPcdbpI7GaSjiFP2G+C9zixREahO22vOHCH\n4l5H9rg+dY3632EclPUKZ6Q2QCTOGqvO6BheXYEgyN3TGJOMQGOyit9xyStN\ntR5b53lRL6oHeuMp2w26XKwxE7QY5q9CsUajyHg2jCoxyx/AvTlk2NZ76PLU\nWB8CGN1sM63PzGa5/Ftg5eV1PPXbh9emBxnnZknENZ6eTi50/hj0LI6/8tsN\nxZvcA4RJypqLJAB2T9uasxlah0P7jRIXwy2aI/wqxYlJ06VrqVEc9X7siSnq\nN07kjW+VZcMILCaaRML8f0Hvl3pUwKEo+hKKeboPuJ1dGnA/MtRbLMciWqOV\n5GAoiFkRs6eUM+nLWhhOifWaSRooj/FSwtm3wL6kf3M8XR74OnGqZPEVaCp2\nqSGNG+eXHi6zJLYcA04YZAs2+10QNAOjJ8D0G2dhc5u4e1WmlmO7Q0myh3lP\nPRumew8y8i1EsDsRFOTSK7NXrooWciIB7PyUUfSjTikXI5tPZFTjY/KSU0Cr\nrzqsa4IKfsCd7EA0V4/ptVfN3ie4aRmZfRhVuD04s8h87c5WBTqHY3jFuWJ8\n3nea\r\n=opz1\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","gitHead":"dfa02aaf8a887cf6094160a2b9a080b6cdf7619c","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.1.1-beta2_1542060053912_0.5534961307002013","host":"s3://npm-registry-packages"}},"6.2.0":{"name":"react-flip-toolkit","version":"6.2.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.2.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"e01ec195bc459b184e41c92cc22ca05989864564","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.2.0.tgz","fileCount":53,"integrity":"sha512-Fv4FuBlCXQBWobPRyVYfeqh6sVTjmg5LeTEtuXxkGo2ZPGRPChIGBt2VWASKd0WW7srLhI8H1wydqX8DfxQb3w==","signatures":[{"sig":"MEYCIQCF1FFII6bjRddS+OAswfQTu0Yj+GZ05H0I+d4Ey2gWbQIhAPiosNWPZ8UjKVCF47Wz8wwNN4c5HzgxyyVec7ssqsFP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6hGDCRA9TVsSAnZWagAAqAQP/04SZ8s8/PAv1914uR4A\nJKcXDa7SGEIonPUtxfmGPjZMWDTXHDmZ+hPTqZoc6PTlq/XoYUlnL/q/YWU0\nxVWpfMWZVTYppa45sjrq7zidoGOkwbdVZyFQ0sr9EPTEx+jbcktAci6b+Ktf\nV9SIFCHZ1fjvF8rdS7MkQLz9lDXzHJwZjY0Bq8twOxENwUgpg96as465rLm/\nbju7g98i2Uo+BWOmcX3e3rTY7Gdo2uJmaFrpbXKCqR9j5WD9unS5q6e75HX4\nZrvmAtwxq6by1f7Dku8dXa4h2ZchHnEZ9CK2LcyYc9alKyBd4KPzZUJ6OAdA\nXQfPRDHyN/FfabKkCZ2XuQEVGy1G8thzEX6UWKkhK25u1UKESlKsyqQLGN4F\nhn7v/NP/6hObcz75HkLWjrb2jXSecBBymgrrML/umrMxIMxIxwUVEXqZxWsR\noxxcTy/aI9GXyjqZf+iw3xcOKygZE1/TqeB98xdnQYVaPwIgjyumo1YOQ1yh\nlyxAbrsVRdtbkNoSYv8homxbP19pirKOnAYgErv0bkjYAr3kIu7OhlRO0P/a\nn1i0NdKkr0Zp1fNueW0hzNImjXzN13uKeC8kmP1Kbebe4fS73aQ0MMP9Csnr\nyW7EPH6NqL1Hnv2AamIYxlKlH0sh4AYICBtS5sQRjzQqViE6Pf2m9U6lP4S8\nPNqo\r\n=CB3E\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"7f275a3ce4f43aacb3b3d3f3b93d3ee31cf01801","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.2.0_1542066562337_0.9481608716923493","host":"s3://npm-registry-packages"}},"6.2.1-beta0":{"name":"react-flip-toolkit","version":"6.2.1-beta0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.2.1-beta0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"02778ea0e26c0f6e0545216576ac50a21b9bfbbf","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.2.1-beta0.tgz","fileCount":53,"integrity":"sha512-PN17toYUkOilPSowgs3C8wGDJqbEeh9NS7yDfNWXRCCeRoCwHvmr8rKkBCtgVv9WtNOhzk9miFC4SEVHN9w8hw==","signatures":[{"sig":"MEYCIQCIIl2/7oQm3Vtgj4TJJw7nD92cM7YtNQfolRiy0ZcvjAIhAPxdeEwd0cKY4tY4Sny/euvGs+U3vr5khYkLaKYPX8d7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6x4JCRA9TVsSAnZWagAAqLsP/jQ9X/bBkACgaB7eRAj0\nO4qaEiBhKeQPjbRUzxfaLbVili/+M6dpmVyhIRNAvQXt1TjrrrBj/yOR6LIF\nVKB8NzA3swwxoYw2bstXuqdiMkgwtxTOjVraFhaHlN2Mntxl1R8fgShVcVuO\nty2lHWXKB8Al7RDLDOty96n1m1KbaucoG5gYOGE9mjHuFSFArksN9yf0pG9P\nMkx1wn7qijIBt8ya+wziOKNuIA3uCh6abs0Am6f+hHEr5X0A31k01oJJd9nN\nOJ+rmCjcoJ/juz4Amcl5eyHqPqAIKNG3vURAS8e+KwTBh+8sYy9EmICwmLgA\na8bN4QFBa3LVF5TcLvHsdlZfFPhEtmXJfKPMB3cix6/O2ijhqSaZ+2LXRgqk\naNYwqU1soLNhuKGdHdpTf+d3R46bFxhu3sPuGiSaBpPiT3mx3C1NDgnDMB4H\nECqdfccMP6m1kXliPjy2bAwIae6gCalXJTCCfr7v/mOjprtfoLkNNw42c8op\n+aIbV1vre0uDdnMNfilZWKez5HS/HEz577T1NGFxe5FPd/UsJa30hBHx1jRd\n4CXrHXePpWLK41wArDC/RphRi4EaTtqxuY25QqtH+8qmWeiWgpLupE8r9I93\nsDi15/UBwkN8EIQSV2WA/XAZuJwhirpEjyMsVtwENtnsa9G03Q9ewIuCgpI9\nVYTX\r\n=adyv\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n![a bouncy, staggered list animation](\"./example-assets/stagger-small.gif\")
\n \n\n [Learn how to easily set up the above animation with this step-by-step tutorial.](https://alex.holachek.com/rft-tutorial/)\n\n## Practical scale transitions\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","gitHead":"d8a1a6ccc1072c930b5620e2bfa87d81d5e7fdec","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.2.1-beta0_1542135305085_0.8520497483483735","host":"s3://npm-registry-packages"}},"6.2.1-beta1":{"name":"react-flip-toolkit","version":"6.2.1-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.2.1-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"57e85ee72e403ec08f0b9a00ca8fdb7185efca24","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.2.1-beta1.tgz","fileCount":53,"integrity":"sha512-ZpNYjwDdDKRZ/ysEqc8XBwmhnx/4OwcECWuadzoLqwID6Tk5xPOq/urvpvrW1Cl95fGdXWcAKrYRsx0QkUi1og==","signatures":[{"sig":"MEUCIQCLOniO/LG3gtg3kYMqNfYtFZpW4AaF+CzkjDNQj4bZbAIgXzcTPR41URgktGID5pXhneVxcmF7+S7mYW5yIfpKGic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6z9lCRA9TVsSAnZWagAAf5EQAJ7BJ0Yvhsg2MhtKc4B1\nlk/j3tkGNpRqI9guwpNYtK/7WNUwwPZclgoKX6+cNZHfrXgAuemHEHnY2N7f\naj5yIjiXbCQ+jebJeSKSOzFzn5rCyKBgHWrQbvU067/mmcU7Rznj71bPFKPh\nvtt44A+Jd+yP7AQWKRNybMZiBp1HZQzE3Ur09ODacexW6nOlXSlO9/tT+6Aj\niRQaRBnDyq4wP4SANMqtF2i2kJyA0p02d4P2Gm6wmi1hy42NglEq0egzVM+T\n0ktz9bAc3kLdoYcqMSVaoNSYBJ5d2W28cWfg627KbcqPIpYDF1+z8Ys6sV8Z\nus4sGwTeiEsOCt3QsNa+JqN1YYdIwl+wLPOCLWKyylGjvqblKP6leM/YPW6b\nOD6yMi/0cXvIfxmG10s6kOLONv+FB/cdTB5LSMk0EI1E1xipVOlH7PDxbXb0\n/15tAyJCePC347nkmPZsrriE41ZuxlCwsjGk0RLWi1nZNWUlxBzmoG7/yzET\ncRer1JY78gAzu49RR9kQSW4dnplvot0h33nhcKVDn21V2qTp/x0/GMISAuUa\ndLZGoDVlY45mwY+XhLBRHEwOHZzFpqDGoKDDE/kveMBWERt+OidGXsRLIv+N\nHQ7zssV5eMvHk+mO7J1jPWHaef+cDyTFqqQuZo0waJ2tj+55DXg4Lec3M+jo\n/szy\r\n=uzPB\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n \n\n [Learn how to easily set up the above animation with this step-by-step tutorial.](https://alex.holachek.com/rft-tutorial/)\n\n## Practical scale transitions\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - If one of your `Flipped` components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.: ``\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","gitHead":"b81163c3b41d12d40ba2fe1addfd59780d0274dd","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.2.1-beta1_1542143844677_0.4139082820990445","host":"s3://npm-registry-packages"}},"6.2.1":{"name":"react-flip-toolkit","version":"6.2.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.2.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"84a88c1594a7940d8c4d02c239909a7e3356433e","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.2.1.tgz","fileCount":53,"integrity":"sha512-YtooDBNVx2UN2sSwJDT8S2toe6s67OFF4SDcGoDJO+6JcOyMcFzR9fZ7Mbtlx16yJeMJ8idnibj3kRRHYGQ2tQ==","signatures":[{"sig":"MEUCIQDslyGgrl/oSa9EgGZO8NSMhMpw2HLJTw2RLMQLT13Q7AIgFfD7NIFuRovIQvI4/WLc6ZSqSbcmloN3tIQyD4uT+IY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb64R3CRA9TVsSAnZWagAA1I4QAJF0CUQILLUxwKbZ3nC1\nNabJtGLVMevTyw7Ew99Tm2qOK3X5vWKUhkBS8GRZmMId8qBJQmVeCX55kgSq\nbIukMgtsdRsF+Hk2ZeDE+AWLtLo4HAGzsi9WSshd1I7qmQAaZyYUlOTSo/9O\n5yhol8xleBfgJVaVyw0bbh3gyNz7OOq0y1VNEqxRYcwg7Td4Y9JhttOgUny1\nQcIlYVKTVY5zpDHE5HlSn09zEZkhNzz+n6oR3GOqqfP8nnUAWX6/0DRTu/FG\nHky8LZlGSDgcedImlPaoyVoIrd2Wuet5PkK6F0hHf7j9SJGumIa3nku28CYe\nNCUSsVQKOup6He1WkbUbePfZxbysGsN3tSwc1WHfTLBg8olEMstVUFnst2Om\nsUj+4DHnBek2w4Jcjagbnl71rs62uvcj7wo4n2bQcLMnWcpTMqe/DcbvUzg6\nw7h5W1wk4GsxHAdKOBNlWUXlHDTBz+x/1mykjPfXF6ZLIK6bIQcOpIsEfVpq\nShIJjBAeW3+px5V5w9yqkbmTXwAdd7l3dyKfwl/LyAcJxU/k6JA5HFAwzM7o\nH2CJtRW81k4vSx+Jvizw2od5uJikdE3urZPk0vtxailKB0FOwLfRtXpirbWM\n3HKauPgVFn+GjtWxSPltVOnuopTbm2t6cMLdph9gdkEMNVE1oRnzTsstBhQI\nQ8qS\r\n=GI0g\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"d44fb22a27717968bc7737816ecb82e3f81614c3","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.2.1_1542161526302_0.28552020939525313","host":"s3://npm-registry-packages"}},"6.2.2":{"name":"react-flip-toolkit","version":"6.2.2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.2.2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"3fec702b8e3d91c1a84e06b00ca338f112bd7f64","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.2.2.tgz","fileCount":53,"integrity":"sha512-pnAbiZuGuiBnVFHJ9R3ZwYyU/8kZXb/SnSNmIPiW+ZcqHI3qgMeqKYf/ldhsW1obgegUYBorlzyDqVQHG5Twbg==","signatures":[{"sig":"MEQCIBc1bE+sg8JhQd2mvAwLuVxs5gLw7JEDDVgNpvbJ/g1mAiBN+3oPGMnbRLBD7Oxj87lFYREIqt6nF1G2YpHmNDB7mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":426907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8tNsCRA9TVsSAnZWagAAD0oP+gJFs03nPIMUUeioWbou\nWhS16r0Zgo0lklDJ5nNgHq+UqeWj2p500L+NTcg9ogNGLP7QiqIMzFokxxNR\ntV9JDmGzo6XeoCvTdKoNawg9aDiylEsiYdaQoyt2JvpPmjbDRFrY1fO6YrxN\nyVzdbVmeJ7lrxBzTrW8ArfQYUmeRpN/nz2zobsqe2yQt4CJ8ASb+bAjpZ25i\n8GrLwy7Rea/NMh7Oc6TqBM1sXQMmzDHocPisLrZBP8gnwfkOf5kMltWmYH5y\ngNk2kvXD4LIjchXg4KQ27226CPBY1YwyovjydZvbHUzkg4/0l8vALRFEd553\nS7bywFiQffSRyH7INzQZpd6Aqr/kd9XumFjQg231qgYCN2TENSv7FGPcADpV\nJcxutMYEDDOkhcf/GOZdR7mfwvWND0bXbi4IqB4r+hO4UPRCrFMLqorZ5V9n\nCDuDWrslGBpQDKAEu3Yh4CbkDCfCdBYONkEGHAQC05+PQ7mhwQgL2xyztwEN\nQlz6l2sXQ+Lb2lgXGbn3BDqSuTKErqRdWQdPs4EtR9zjrx/rz6iZBY8t8tmJ\nj50e6nny5uqn5OT0/xT220QAsgeJKmYeX//m5Kitu1SS9gBPN73XFlsl6qx4\nTtyRVWQ5vpJoiyCk3QqZMKR8sCWvMQS3s1gOWnov5glDfhMhB+pNxi8AD3uK\n4FpD\r\n=75i4\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"232b89f7b49ab98649eb982def4ea07aef287b78","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.2.2_1542640491541_0.053132055841144554","host":"s3://npm-registry-packages"}},"6.2.3-beta0":{"name":"react-flip-toolkit","version":"6.2.3-beta0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.2.3-beta0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"c40eeca0f56a9ff93b6bc27e5cb6bf3b4accb5e2","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.2.3-beta0.tgz","fileCount":53,"integrity":"sha512-1MOiMg5tCIO8w2/kD8jLcsaoY8DsZbFsozzrVKmNpW0tWD21RscKa/cn70seGMlhpVfPtvnQmj0womo3a5fiWw==","signatures":[{"sig":"MEQCIFcu6hMbLmQ8MDpzJc7Ucsg9NsHwLhGMBdFEiI3XUtQKAiBpPe7jpaYT81Lr/qw4yZzEvXuhRbb37FudEiMqQhb7rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+q3NCRA9TVsSAnZWagAA0d4P/irnD/OWyiWxOLl2trGd\ndd/TaC4PrPAt2tyLM3+mQqKSZkGt05QMHZlRlb8xB+ZBYtD0KDARcqPDlLnU\nagAIhHmLg9TiiNqOF34A1g2Xul/SWQEaQppiXmyslgtXciCd7veQrdeFrf0k\n4Fqi7LqgRLAeo/HYkMqgKa8jcz8xt40dXNcmsB03hvXHxeEjq1K1wYcmysHJ\nWYxGeg50k6A2kZuyr7g7VfwnUGnp5wkxr0sb9hKoic2lRkpYdiOnGQp3dxwB\nH3RBip36oPBTEIh5WJRPub88PaMGFRwWq/gZdNyqbdGOVwsC2vGjx+TBPXz4\n9fbFJJUIlnHFq8L7wiqavnYqwp29ZAUxXrUgk+IdJHzoa3pUqyKT+EPwfRcC\n52yMzm+mGYZia6secGuJMYyqqA8t7/d/LkIbLjg9Ok123nm+rOAHy2bxrXaQ\nUQ7TV1a4U6d2DeTeTJGRmvScOpwXe+NsNr/Rh4TMLUU5tUjcchkXnSeqjoGR\nKVjPy2ELLMkbbUm++uzw98TNT8M2N4vDufREc4w93bk7Bw14KpJNNyZ6981Q\n4rxCptW+MkpMwlKKJ3QpxDkz+Rmjtpr/BmMWtodDsxGjsvP/+XyXikpqaUHB\nBrEFNpS/1SCxJL7mkDDrKrnAB22bnSeSwg2ktzzcAeUsB20yuPbilez54tlz\n2WEu\r\n=Pfqj\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf you want to wrap a React component rather than a JSX element like a `div`, the cleanest way is to provide a render prop and then apply the `flippedProps` directly to the wrapped element in your component:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou can also simply provide a regular React component as long as that component spreads unrecognized props onto the wrapped element:\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single child with the `Flipped` component. |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","gitHead":"2762a81c477d3d7977a6b96434155e9bc07c4df5","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.2.3-beta0_1543155149085_0.2941098899170551","host":"s3://npm-registry-packages"}},"6.3.0":{"name":"react-flip-toolkit","version":"6.3.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"6cd769034c277f302495ff80413cb4bce980985c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.0.tgz","fileCount":53,"integrity":"sha512-qJc9Bcq7g1nsHTReVXo1bFNMx/S47uzOw1auKXxsxk5b9k67cjh446/qca/5osT88OMYCvD40xBdFEjSVABGSw==","signatures":[{"sig":"MEYCIQC5o7URPk9E6zucRxjeTooHX0iLAe4B47Pv7A8Q7UtRLwIhAI3qbvXiQRKs40R35jF9xQGH/xaNVi/tnBzOyIjg827T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+rGHCRA9TVsSAnZWagAARREQAJ1BIMfXKxOseRGJwyFX\nbt0agYs2lziTD4rXLdVkAzCrhYy4MfIV0Pc1kEmt96i6Zm+CaZyx/y11NuH0\nhug576X+2fcWw+Dddm3agHYI8Dn7nR+vSQsr2xFKKwvpn3B962dnsLZOl3Yh\nvxX3bdIUKLVCC+1yq076bxV6/xgu4F5A34/p0+qxHi/rK84lt4+oMWsSpc+5\nNoYDgre/VxiHy6UmbQosy1eTocNqGwt4SPDupPIgAbtHgYWRA0F53xucozma\nYhrnET5XnLyQzqSrA7MxciuN38EZMUOlJ76c/lDdD7FQt0+UvM0yZNceim0J\ncxyUMMCERFx55O4dA8oRA2gUu/wUqWasulIED1pzFcuMdHRDU42ubaQyqdkR\neeIO9AW/WdmASU/DWJxyMBfdE6QEfOGPJLLf3Z1bm5/vCBPcc1RSUdBWTyjm\nqmBiipqFOoJId16pj4KPzGhxcg8LZkDxKdSowOopSAMLYGHhCtt5yhJ2R9Bd\nNTyfu/3ToP4uGnXIM3FqmH5bar8aoP/IlFGfYayxHv8z9KXYj1DVezIorv+P\nwFoFSq595EjqvMNuOtoz1XDA5Q4GOtDlj9DKEDpUpqfubCy7TxP3DC+mKLpW\ndUKKSk9yuRQkN4Ia5BGerl89mQathEB0LORBiFMgO4dKCiLXoq1ewVbrexX8\n+BQm\r\n=K5Z3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"62d3819b827d04556baac35db8fcdc32856d4aa6","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.0_1543156102094_0.059567285782485824","host":"s3://npm-registry-packages"}},"6.3.1-beta0":{"name":"react-flip-toolkit","version":"6.3.1-beta0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.1-beta0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"e87ecb5040f954b0559fe0ad450023441d2589d2","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.1-beta0.tgz","fileCount":53,"integrity":"sha512-hgvn7Hy7X3BQUnobW7jRCE8ZbaOypL/xJIpMOIYLj+wENHXeamF8y6+nmn18LVud6Zr51oLl8EK6UrbuJc4rww==","signatures":[{"sig":"MEUCIQD2n0BKShyzf0v6d+CrjVGPjsqtoFEQN15JyixThGCROwIgNFo4z2bkQfREkU+4PNXylwcHCMZ1q8wiDJjwkI09azs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFWtCCRA9TVsSAnZWagAAXXAP/1BRMAw+oN0fcqit1VJ+\nGQKbWTA4l7vRH4iHtViccujEIL1a+wHeruHpLit2f4JHixtJsblcVa8Nu9qA\nU+BBj9BMRJCtgZjWf02EETZ0dVrai3hzPx8yg36roxBQkNPpi3QSTroNQQ44\nv6jijiSmd0Lrv0Brtm8kEzpjkF6L9VlrhyPQQwvdtzzbzAjmw9+KL3onRmpm\nz/TMFdDwceAQUhRk0HP3oXRWZwAxbejSqcylKOIbOREPWaXiMJnP/lj1rbtp\nzJIpfiTG8v718aeC0Yu8yc7doRdeTLlS31IEI7C9SjKdeutPAG0Mjg5pDz7W\n/VUPawRzf3WmvqtTq2/y5ugBs9yGRvpqSz3VJ95Q9zZLsEEjrFTkqrdnYBD5\nrbhCqFqQgPDO7NmIQ037NANW5+2ckD/WyxPj3rHcV+c1eIH4BPZ8p/p1cV68\nBnecuAM1UkjEzAh/G/dbKBFRBqISwb4ik9IQ+e8PFH0ybouero8VhBiLQ1f4\nG8rJ9BFMMkP3quNUJIenmY5QeynNOfracAgwfJMjLFBBo5QkVWXvzxuCFciJ\nbV2mcMWl4BtrTgZ+tcViV32j5IECHJ+Xpwr5DK3N6U71STF2u4Uah6KyVBw1\ncCZDNmKdzjiyz5kLv/IVlYK+6Gx4rnlbwD9Fb4U9YTwODQVZdiqT4RSrHs8B\ng6Sz\r\n=Be0v\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","gitHead":"62d3819b827d04556baac35db8fcdc32856d4aa6","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.1-beta0_1544907584843_0.37826841234268227","host":"s3://npm-registry-packages"}},"6.3.1-beta1":{"name":"react-flip-toolkit","version":"6.3.1-beta1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.1-beta1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"8b71b2fb2a07227cbd28380eb66cd7397375f82c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.1-beta1.tgz","fileCount":53,"integrity":"sha512-/08Rjz2kfU7QwITEadAZAtVo2lhHRynZ8u7tVprXSzrDT+gnTiKnHR9FI7qhE9udgiPLNwmXsD0T1H/gOHtA5Q==","signatures":[{"sig":"MEYCIQCCENk/wDv6lULIfbq2Jjzp36yW8kIuPRBbMU+oj4+3KgIhAL4JE3UvTiuW4yL7QNXec9GO2jQi3dT5QLdhjpxJ7GPp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFXEgCRA9TVsSAnZWagAA/tIP/09K7P619WJ+Js0l6pEP\ng98i6oWzlTJgojIMzAm8R128iOaFeBC7shxxHm8IMdW9k+LJezhnpatGJtxE\ndOLi0BLOSysWBRjmiM7ChmI8hCnCQ133RslYUZSqrgTo8NemMAcLs4dI1nI8\n9GE9TbctugKnigWFx19DhUf5ox4uP6hn6yFjUpJcQYpVAbZwEG/3dUv1Yjqy\npzT5aD7jKnMBf4cwXlaNw/qbP8RSFdFnYS6JfYDvL6XF+GE+AaHiEp9xGdBc\nOhW+m4WRwoWCcFLpand7svQ97uSWnCGdn/xNEM05sbJoOJ/hPIo69LP/ygf7\niW0Lg4/x0jV1zFJ5N4Q597U3WxpDnzU6EwhKueew3kajcD7aCI7vLqSNqikA\ncZ2Jc/S7aOTc63IXkmqDOYeb+Bi/HOQ4mVEzfYinfMkCDOFqd6Eg0DlOwcDt\nVNh82Ng82o2i4LpAKJubiL+LeIyjOgtSWXbFvVJ/Nvoxim9jOjg9yyFtBfZF\n25+Z0pFrN0aEyCbLs9m0J8ObZVsweq0XQpvyzbZCoff+MXu6ioQ9WeUB2Ao/\nbA5Dx44FhEEgtKCUpOFEF2CCCEr/gTvJPt64/ATwcXxFhfzZwriCVR3MpXSJ\nDJ+RdhWpDNDil93lPbo3N2Wv2zhtMWzrI/wemNDn+S2N+SfrHxc3rFxOFkp5\nprLk\r\n=TxBO\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","gitHead":"62d3819b827d04556baac35db8fcdc32856d4aa6","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.1-beta1_1544909087996_0.38471140387568004","host":"s3://npm-registry-packages"}},"6.3.1":{"name":"react-flip-toolkit","version":"6.3.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"387039e4c506df95286a51b6412db33461836148","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.1.tgz","fileCount":53,"integrity":"sha512-2vQqZVvzVReks67jcn0tsioK8C//rs3aFpOvDURIPZs1UTKOIh13SeIV19uq3Y0o5YmmkQYtPXikzrcifACcXg==","signatures":[{"sig":"MEUCIAusBYlggXX1sQJubG0corpqSzEiDogEnaY/tGdcWqxZAiEA5pskaVZBIb8FEj1ciejq8wYN3VkGL5yX2UgFuJRn90w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFXJMCRA9TVsSAnZWagAAGY8P/3XhHizI+IA8KazvHQ5N\n19uaNuwyzsv4RaNj6u7upttOhgRgVAidSioq7JfpTteEekWJLIzcGsdM8ZFp\namLBUnVA8GoJVmGf5ULLLaZXKCA70Ag1B37IiKSbsU7fX6zQgmGe92Q86kGe\njqfDP+9Cxl9D8X9CfDhB17w7nyLHOr7tTvH1KuPQ/0/efZGpMXXF19gEAsVX\ne75PhKf+OLAkLZFDimxjt+lKIyEWfobHFyuQ7VXE3DK2WsQ+oxGmfNACOZjw\nQdYZv0ZgkbM4vD6cyG++1l5JAV3cH0Ylj4FkUIakE7tHJN0hz9eLiVuBSC0a\nkLYXsvn/4CFpORq0e1nK6I4SweFD8sDKioPJa0EPbsg5xKRWezcm3NWSEnol\nMK69Xng+tacbOTTBGQpDbijtf46xAhI2dYUiE5csJFd4k5tEXesnuOHklw03\nOgR/wtqKWexOPh5my3toPtqXFCywGU7scLkTYOQ6k2pcMRbb5ZaPgLjm+uy6\nHPIjnJb1tLDanYy0KTxvIiXApvRaagVfSMvnmcmjvfe0mlFzvgLkHSBMsT9g\nwm3D9A/TXc8JbCl+sGYTmHcXMMZRHCKwUxjvIn89Xvg416AoB2q8MGOl9Bv9\nrzshv97woTx8NIIS2Iz0ePwFEt2Wsi1Xaz3YVT1a0WfSacl1oiyLo987xcDx\n8xzx\r\n=m5s5\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"9e1424cd4665d99bbfb61f52327853ad51fbb5ec","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"5.10.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"8.10.0","dependencies":{"rematrix":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.1_1544909387774_0.7168219821082944","host":"s3://npm-registry-packages"}},"6.3.2":{"name":"react-flip-toolkit","version":"6.3.2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"001d805125757e6f40dd16366a46537114d2a44d","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.2.tgz","fileCount":51,"integrity":"sha512-ApXTpyo2NKuyM5INqqOAbt8UU/wGgc+JOBpdgW0r6JURFTR0EICCGpy7uFE7JJtbpFonO3Avw3tBo00p1fgafQ==","signatures":[{"sig":"MEUCICLAU04FiJuOCWzbwXCRGs0eQePyTmn+egjt1SwUMfv5AiEArvDGD6JvSUcotSB4pGgigDqlJ10Ja5Akab5EsYyF0k8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":424879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcJmftCRA9TVsSAnZWagAAjtMQAJPkuX5NGA3WzhVhO+3l\n5EfocEJk3nsCBxWywffnGGLGH/RtIpEw3AQfuXVFxhQK7EaBXACa0CvfV44y\nsqKqvItrEhgtmbpCPcGy2k8ixj0XOCBuVI9sMRmjw3DHQgk9YjuUjc0kRyHa\nKbzxlsXP27Y12aloIoqNLkdYilCJPAtXpde4Kr9Sk2T+DqfTCrwcTmjBrljc\ntTTA94HZ1n9WaH0CnN1NQXO83synhYSPtbgsF0Oh2E5LBnb9NGcAwvo9s0aV\n/d3wR3kdlL7xbDtIJlBpMNWxaz9tGrigZwI8KdAoec8eGq1XSP1Vh1XhKI/Q\naNigh88ZdhVEMnnAqMQYxAEurOjd6AOKJx0UGwdkCbmFONR8J5T9kn7tySJ+\nWniVKD0IGbeHflg8A0yVULxZRXcMALe+keIHW8WS9WAu2n1jD0o7KTqm/3es\nzYDPj3MXwHfcDN10366WGob6KfLrs+1J5o6ornfNIbW4ArEsOfrhoKrc1e55\np4RL95gdUVYg+jSqEIvfjU8rZa0cSU4DnHy7qU5EHrDQJtrwgBHGBtMGbJB1\nzkeyOjMdfSz67oA8ybeYlpSUZuAtSWp6PqdIz3YPjN9OJ1WO0qDqLzt9Vjfy\n+fMMk2axjW4br1njSiWJJYq2hrE8GeI1EPIBTwkqQ5Ih28iahGv7OHKk38KB\ndqhg\r\n=TWil\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"4f424d17f11523483cd93054c2cd5da4e7d27a9a","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.5.0","dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.2_1546020844748_0.14926097050745457","host":"s3://npm-registry-packages"}},"6.3.3":{"name":"react-flip-toolkit","version":"6.3.3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"199db86b5f656555035a482e7ca6f3f01db8c2d7","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.3.tgz","fileCount":53,"integrity":"sha512-rfwkDKeJmSoJerYwOCQGCWdUaLpfGAN8kpREsOVKEFmIl0VKRkpwu8FRZ0exOL76p4gfRYZEo+TF+ui10vvFtQ==","signatures":[{"sig":"MEQCIHWoUDMBPkqACtGkBqoBx8L8yfUSQfiXGIsUh+Ar2xMpAiA+bxVldeIirQ37AgUJfL6RXFeTM9U8bKzL7e65zl00dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":428585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcK3ugCRA9TVsSAnZWagAAg2kP/A4n2E+kmdRjRsxdyery\nSGlM4u2Drd19dyF1YiYr2IiJJnpt35AoXL9CcIOad4IGjbQfNT9smYhtNEKd\nudbb7PnEyKei0tqHaW4j7wbsAY5dDMpLd2dmztWqaF0N3slB4e8LCLlBOX7l\nRQYF6WqFeZQUP3gk2hI6LNNRvPuatoPVu/kdSYsryWyxPZ4bJJ3cCO8gROoM\noxUggAEN9B9ibOzwr3xPjMaU7Fjx8xbZnF/WDzsrZeTvd/CbU6N+cuud9aIO\nJ8dTDHMWAXSlusCwmvByN4bj1T3vWBPacTBWJsXTSOi1g6uGag63lI4yu2Ib\nMovQtjoCk6AhIS6UIRW4cYG20+gZvtfeP5oZWu2bql94BhWdldJNvKSGI0/z\ngKDCeFI7AYMddqMyqqzzs0uEYMhrmT/vgBiyuWOMo2doANRj8Ut24ml+qSOK\nt7Wsjcy2FsNMrvEs6HjkpLHxy8IpVTOy8twuSLioQdNHCNAQrD/hczj4FNz/\n7U4XdJF1qpAT7Rn9JCzeo+hV5izmv1GcpEPDG043GLGn7/oooUR8Fd3LvX8q\nTbURvuz7bmaqt0+m2qld51pf+cmElyRXnx2gSkriyE8roaKVDlkz5Da9Nlwq\nsKK69mRSjNaOhlj6u194zyuOx/v2GcYy58ETuQ1iPYqHtLsvwBLj9niBGOji\nJfSL\r\n=pGzc\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{"^.+\\.js$":"/jest.transform.js"},"testPathIgnorePatterns":["domtest"]},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","gitHead":"f7ec387975c75eadfc099417e17726c196a7440a","scripts":{"lint":"eslint src *.js","test":"jest","build":"nwb build-react-component; cp src/index.d.ts lib; cp src/index.d.ts es","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.js umd/react-flip-toolkit.min.js.map","version":"npm run build","test:all":"jest; npm run test:dom","test:dom":"parcel mocha/testrunner.html","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","deploy-demo":"npm run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.5.0","dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"nwb":"0.22.0","chai":"^4.1.2","jest":"^23.1.0","mocha":"^5.2.0","react":"^16.5.2","sinon":"^6.1.3","eslint":"^5.0.1","parcel":"^1.10.0","animejs":"^2.2.0","react-dom":"^16.5.2","babel-core":"^6.26.3","babel-eslint":"^7.2.3","react-router":"^4.3.1","normalize.css":"^8.0.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.1.0","react-test-renderer":"^16.4.1","source-map-explorer":"^1.6.0","eslint-plugin-import":"^2.13.0","eslint-plugin-flowtype":"^2.50.3","eslint-plugin-jsx-a11y":"^5.1.1","eslint-config-react-app":"^2.1.0"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.3_1546353567617_0.8184024728959731","host":"s3://npm-registry-packages"}},"6.3.4-0":{"name":"react-flip-toolkit","version":"6.3.4-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"53a702d347ce51180e03d485a59d6ffe5dc5e712","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-0.tgz","fileCount":10,"integrity":"sha512-nUBihCc92ZJ/6e5bW+OZQDub1zktheQRUdxMjxil3HAiS1DNmaI3ZyC2BIuTG1xhEE4iuQ8OtzKeyo1t1gTu+g==","signatures":[{"sig":"MEYCIQClylfKHKvaWqgRhatbnEj3EIqxQMOQstWB1kqh+8OrowIhAPSZ1wwMOSy7pLelJ8UFdiAn1lWrpBX4xhYZ+1b71l5G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":586059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLR1xCRA9TVsSAnZWagAAkVMP/A6msZ8Aclg5pd9xGG45\nropPs830HS5xr7APQAuQJbNDGl0IsQQlL2FfYJ6RSBfFPAcV9HYyxIMymkL5\nywtCib8HfGkW49+S/ZIzgCBWP6FjwQlpMFYpyGSl7kGdYpqngqXV1n79koa/\nbc6BjwcOYRRNKkphmXbUMH2uamWkKvRtur5kWq1M178hqHByV1A+mar+N3Mx\nvPlpyBN5pLiJ3WCjUwWMK7HRIMbn+Nd987CZglYTbDUlyJtrNsNrfqXTiikh\nOKk9m+X4+Axu9DYp0D2Fc/KU+g8g/EMo5Uk4s3eM/us6va/SM8iSe4HdqF7X\nu4IGKL1alYOG9PWszsHYWDJnwuFkq/2C82oI6yT1N439Nn33ElA4U+qLGiAe\nmbjyINp31xUKa8FHEqORTpQaU+SFkEyvYIdHTy8P2xUjSSWkb6yjQV93Qftu\n41QcizqU6W3c/Iyqo1A+n0ldEfjqufHpqFJN0CCTmt8XT5O74AoZ13gV7M5A\nhBZbSRWM+kcCEyDs0eMxBWqPds9QNFSs/zA00VK+4ibMPViPuPKiaepG+s/1\n3DKhvxKbJwMBXTaCdLD4/WyTs1r3s2+hWTzLcGph/VcERWSGYfi1SC38qoZC\nc5gVT+jMDquiApELr5PuXgg3OtKipf4aioPlkpwCAGvR2pXXu6z9sCx9+YW1\noli/\r\n=m7RU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"dist/index.umd.js","engines":{"npm":">=5","node":">=8"},"gitHead":"3f2a6b17de64c56d24f194e39855877b4b89a159","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"jsnext:main":"dist/index.es.js","_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^3.0.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-0_1546460529211_0.4667393755756899","host":"s3://npm-registry-packages"}},"6.3.4-1":{"name":"react-flip-toolkit","version":"6.3.4-1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"548210a4a57d5e0903af02b3582ef24e4c1945f7","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-1.tgz","fileCount":6,"integrity":"sha512-L2lqeCHmNJnnFUEqtoZBuhwc04mD8ITCa9qP8MCrT4AsFdbj3ndjBLHF7uVSY3bhOeFLYLEfUnGEVH2Wg2Y/4w==","signatures":[{"sig":"MEUCIFleRiQRgEUlSJ8r1rvZh5yzOg5YrbYdAUEt8oc6P2CQAiEAg0uf+bunPpZAGEpGh440ffG3Gpk7C2Hbkjtx9SwIlRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLSFhCRA9TVsSAnZWagAA3a0P/3pNJFKiH/L3gLfPD/vl\ngdOUN2ARw2md3X4clTQ13juX5w9f1SRVPZsCkyL184IfqnPQfxhpSKkEdrkO\nDR6Gp4II9RlmHt6QRn7LwNKIcIUcFkII8ZCV+mSLNQI4qYwm4+cZ4ycUP7Rn\nIKbKBXWnj/8RBi+aP7ck7DvQF5bth9WFl5bYeqY6VxqtJVOIpu3txbMyFmeo\nTyUkAHrQWeBgxFfh83Ta+moHaFkNHPFkTG8H7JKux43jjlthovXHwb2F+b/P\nUq0dQUyVo0LOqZV96wwrZsRJXmP2vqJeOVVLBoBQWzYjpWB34koeqeL1zaRS\nXAmsSKco/g96D3laQb8BnH/lCvxZhXq+I9Ue4es/NmiNhA7rUb7lwHROMaSb\nHy58a5hlVMp/NxURzfSOxYRN94z10uI69509GormLMc1b+cL6I9nfvkpJAhB\nhof/BFVD7JRKEqDWD/a1k4AEb4as+k1RDjZ4BpazdMY9KXlkfbNG70fOg99+\nTMPQPIgk0yKB7cZAEwhtndsuhPOSSeFTvppMGfng+AblOTF2gQ5vWgWp1weG\nU4s6ArAurcQBVMpkPhMf1bcmW/NjkIoQqthmL9hXwZseZHnD1agiXTwhiD4u\nflSYfCnroxlXr2G9fAWvYIShXO4pfGFJeuZsIcFs0mLkMiw5PLVob8Ke5Ywd\n+kYt\r\n=F+T/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"d0e1f6d8caafa94ddacac46f8fb5cfd7e817ac8a","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"jsnext:main":"dist/index.es.js","_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^3.0.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-1_1546461536700_0.4073688231369881","host":"s3://npm-registry-packages"}},"6.3.4-2":{"name":"react-flip-toolkit","version":"6.3.4-2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"9b084356832a9f433b278373a8afb6cbbbdcbf16","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-2.tgz","fileCount":11,"integrity":"sha512-ns3Rsg4ARTD7MKl3uBTnxYg4FoA5Fo1znemAJcLX6QTnlN/6rwKnJiN3xsAN610PMAEO5ep1C5IqZppvyIj0sA==","signatures":[{"sig":"MEUCIQDa9oaCBBYBMoAcDprZNtQAgcHVXRoi47NUH3cSsAl08wIgOgqWyVsp5fUwW6qZCvADIeB09ButV5lM+KOE5g+vsAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLS4xCRA9TVsSAnZWagAAuEMP/Rtvr3/sXJJ5F8G/g7wK\nvgBIi80BnZrtFrqlenwPsS38+fjraq0qauGoosxlaWE6gEQ9Nj9zxsNorxAG\npSqJzgcV0K0Ds4DcQWJzAk/U/AudUF65ZtxPvxXWSa+Y/fPaCXQNcAOHZRyI\nJuRKL2V+IjX65gKTtizwUjlYnU9N0m7WYoK32P625eZLjO/FqPcf7p+kC3aU\nMauVB+G3WrzvfdVWg1cG8wlp0iFgQ4AvIDqhL/SIH8ivQbZzmzftys/Mouls\nO5QnI70nH3C4vBW+Vs9ehNvdp26orOtQqfz4BX1Hbucd4fQ4YmNsIJ6Z+TYC\nJA0T6OMBjOnV/8tp0YZmz+3mJ2i3m930J2m9dfGWtl+T049RaPx/dH5X6H43\nQYFOE4qA7ZdES9JJ2LhF/yhGDrZzYikoiSCWzUgNRABE8yMf8jCjRRWD2jJ8\n1YYnj9MWA1lnI9qhmDlhpyV9cF1LulWWMIUE768w31iDgt1axrSgmkHo0enu\nNcz/M0oPdU1owjylIZeNOjx/Kukbzl7SHmGJlXQS69blhY/nif7eHzJATbwS\nXvGHXmn1p8LzbFlMAlkL6EgDh11mEKh/qKWROQjCLGcVlmkuI7r7ZZcuBHDS\nYGBTdsLs4a0L50/NTXgxpokhJUWz95AZp48KdUi2wYNQx3BgT1VZg+isUvJj\nj3Rk\r\n=adKi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"b43fcc40dee0b58216c734e2f5781861b92c5e92","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"jsnext:main":"dist/index.es.js","_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^3.0.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-2_1546464817086_0.6664169806007185","host":"s3://npm-registry-packages"}},"6.3.4-3":{"name":"react-flip-toolkit","version":"6.3.4-3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"847aae020b6465cbd3b7ecb70a4d7e1e3fc65cdd","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-3.tgz","fileCount":11,"integrity":"sha512-36MXNvPKqfuDc22suI9O9uhKZ9C2ORp8isjRQdc/NwN3ptOMCL/sGgU/4JIBLtagpTgGvJTaJrWpYiYmwAr3CQ==","signatures":[{"sig":"MEUCIDOx1hQCkGS6Yi06obT+mJxOUQucwZ3ZC3q9ncvsxU90AiEAnmwQcH599WO5AVCMjHh9X6nHXRhZbBEdRT19kwAHH4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLTEDCRA9TVsSAnZWagAAD8kQAJaxHOFHfwHZQwRkFzGy\nn32+l5048RmSt8CDo+T8jbI7Gfnd7WomrQIkPGD3bvJ3kUEv9NRqn/oL+v+2\nwQ3W6Al0dY+qam12bm2v6ciL54wkj3ys5lm00qILoNtNeHs0MDVzWmYgkPpy\nA1eMdCIMlEi4gIek7OYSKMJ0Bs7wz/qe14ibdAqQpgqfNJDaPq8IlulbacfM\nKBuhu9ktoFon2hOBwgXRHiXpuQnhhWafHUdWhhNQH2Bj2lMjr354+menTpvm\n9yvb9WWKEib2pQPBstGywnKyy3Q2AySlYQAVWC6qqQ8S0dL1JnK9cq8BmOrT\npicnnILUisB+mGziNKn2jVEiAePu7/IkYsbthjSXoOQ7VM2xZtT1guSXoS+O\nrVI2uyKbagCDz2h1TTJ8FT26pABnsV2KXnj8mUJcstgIgFfelOgju2CwmYZg\n1DfMBkJQIySrf7KC/YkgeWIA6fYe3q/bZ7JCmQz2kr4uVbHe/t0pLsflmaq3\n2xLX0b1VQsdQV298UTjd/Ix4ksO40Lx/jTB3zAx8sHTcs4Ev6/wUOTL6UB1a\n/BprzcSjmpj5/biDPlpuMOleqYohU1R0DQuYHZGLeZMitYddbboE8pfjOCpm\ntRKyollDXMLGvqXLKBh0f9do+JFKEbOS40gD4vWNuEznn0wEoMEjQA8V6oEa\nxvX4\r\n=CoUe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"213a4db532c64bb6445df38ea6d171b79d24caa3","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"jsnext:main":"dist/index.es.js","_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^3.0.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-3_1546465538835_0.3250275092682089","host":"s3://npm-registry-packages"}},"6.3.4-4":{"name":"react-flip-toolkit","version":"6.3.4-4","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-4","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"7daaceb23c84be59298479ad7831f46d05cfbd39","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-4.tgz","fileCount":16,"integrity":"sha512-I14dYHd4aAUOgtXW9CHquL/bnb2v/mqCEuL8ATpNV/XpAO1WBgJzAUI00KgkGUTR+AyfaqsxHXAB7jqivw92RQ==","signatures":[{"sig":"MEYCIQCbGpvXgamKC+ElZuY4UBr1KtLeyROPUfFPZFxb4WJxWQIhAIS+q83K/TBRug22HKD9SEZnHR5hstZmxb5+6SBqyt36","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1160495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLUBRCRA9TVsSAnZWagAAHlsP/2cytVeufXpXuiBUtqk2\nVGDF/2GU/RiHyHgdjluL4PzcSqKsys79rbo64KK+CCOwF0imcJ3WXo4/uBwl\njSM4iNia2BEj8adFDvqcTunsxL5/0dv/vjauT6tr0/cmP8Fel2dA/wn6tzm3\n1NIxZeo3SA+LcDtyNgUfo5Fi2gjSilfTPAzmQ7ITmQXL481vG1VqHGxWKL1M\nUfkk52dCdY0A0jftJ6zj8xCVrVOTvfgMm16chUPnLgtdAUdryYwnFRdtcdXD\nj5UnCeSdNZ/C3NEd7UzuNl+abMIuaG68ADpVHXQHRWtWAqzFDto5JKiGQX/T\ntl3AAnaJrSgSFyJnPc7jujZS0Cg7mA6UsIWcMsXyJ4krmdjNva8+fcNL4/GS\nhxZdke0WYuLNe9iQjzTt9RHkKWIWjWzdXbADFRnLCyGuXlN/aciwWz1w8xGW\nPdxrtijayD4d8jH2Kryn3y2YJ4EwJE54xaX9rztX1hPMgXMr8DPJysSN8wzF\nQw6TW/xJWZifqr5olDE/15JPVPwl2SI4rCWJiaHC0kRqu6KqoC03SJYNTAsX\n5ZTsxsKx/wyMNLs5kt04tKS2VZ/sscv48xa7XgTHB2nJgymWVgVjCUgjzOQF\nYSs+xt/hl6l95XzQU0KIgrCVTbK/YNvvzGwjl5k4y6APAU+iCLhM3N/eXwHL\ngK7i\r\n=rdXe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"433879ed7c621ddb1bc912d40ac722ce60d90669","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"jsnext:main":"dist/index.es.js","_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-4_1546469456577_0.3242721919503089","host":"s3://npm-registry-packages"}},"6.3.4-5":{"name":"react-flip-toolkit","version":"6.3.4-5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"470acd9e94925607aebc9da70c62a7385b9dbf8c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-5.tgz","fileCount":16,"integrity":"sha512-nUDZEyurYcKoX+xXcdYpPFdG2v7EWwpWx2GFMoGnsP2/QeiU0tEqWmfDAcXTwCQdueQOsOHFlfPSAQTkJwVxfg==","signatures":[{"sig":"MEUCIC2TnEBRwrFkCy7S8c9l68+jWBdluj5V3/Md08b/UvndAiEAgTD/Emcvibt54FXN6eTm+DO5lVrdnoxZOXtfobObgqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1160495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLWm4CRA9TVsSAnZWagAArkcP/jZz2P7G+1QdgLab5oGZ\nxXT+v0J5Jy9APvmHNe3SS8ztfK2eJh/8JQZ+Fx/H3R7j9L09d2jO9Zo508kq\nEAZlBa9v2b+/pe7rn3LU12AbQ46Haniol2qRkr1Uy6IGr/QDPh4xmnO6awEs\ny0dqjyWe5o+UgotMmgpiKsWqBI1K6IKDbaXr4Qla9d8zr7TA4cDRvCgr1n2P\nXZQKlueBfS78Hnxo7m87G2GT/pybe3cfPanvE7xy4Vhlh8yzIA6AqrbXf03U\nUgf5mBCMOiF6q7c0Nm4BjExrPjoeiAjjI2EjzewzJPKmOx+33OmvT5qu8D7a\n4cikNwFHN4YLGMxzDaKfkbbPuVfU2RNQLwOse3cL6qYlAwt1fhx9CAN1Znuy\nYFEp6PRAnkJVTjaVVnO+CUWtZvJwKOGaSxHWYShlo7QvPotMfSAjeDpCqer+\nWNoRMlNXsXc5nFcbUDKtlP0Z+2VSlb+rb/d6kVx6bdR5fsSRblyvJIa755Se\neL2popaieWkkywo0Tbt8cNP0pltxMxI8sym/IGw7f9jzlLkl6ZLeDo5HxcEM\nQgEJsTG9g97M6kwRBbrlrKMHwhscc/lPDIQCxSqN3xtalsZEajYph2kahDSk\n8gakcp7jdo+9l3/vho43t5WKjUcM6M+x2TiWVzl08pZ3qRKbMggZLsh9ig3l\n6l55\r\n=Tg7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"b3aa5cee345202d655b09d59667a56fbd1a35115","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"jsnext:main":"dist/index.es.js","_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-5_1546480055727_0.1616310807504997","host":"s3://npm-registry-packages"}},"6.3.4-7":{"name":"react-flip-toolkit","version":"6.3.4-7","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-7","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"8b02b9b7d3c1673db0d40533cd0c988dd4bf7158","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-7.tgz","fileCount":16,"integrity":"sha512-cYx+scoqwi9YCkq/8PwcHxHPomzcATjxHnV6Ig+pnk+57NqcJCsKr7yM/oHaBL9uEKSdtcW4OmO1bO4/6MSoLg==","signatures":[{"sig":"MEUCIFlc7emzd1bS93sMmm390U5mRSfqSckSm+HxBvuJZ+30AiEAiE0Dea1yeoJBgY4Hm+IBMJQ+44CjEpu5TJH0j0E48h4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1147665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLjLnCRA9TVsSAnZWagAAt9gQAKCmNn+7S8eU2gaQm69i\nForMbIxH70hcQHB/uMzHj3fS5M75xdfIxQfJEXEJrl9FTetBJF2mE2SmaAjE\nXPEYieu41Ohi9sCvqKMMEkFXGmZbImYbqb9mJThk3IQWTssUW6XO6tH427vm\nwVOF1eherI5S+pqR8rIqrzFlNHLUVs+3DrhSE2jSAyk6mv8a/tjlLkDA3CO+\nCEXIP3VhnTQPuPuG7O73rVo21OEXFafidyvFaUCnaUTQ6I/LzONXSt0XkQSE\nvARy4YpkdGvyKfoqyOTw97rmhYmewQkXXrz8vxP8Td9vtWrHsSWjWoJpxJTQ\nQih0qRVu+KB/OlFPpAMnWmTUBqGcz7mnJkYfJX7kX2wymDsTdWlYeXDI+vWE\n9hWyvOLRJVOjECF1Mdn72Wy1L680E3xDigxLP7KWJMJ+WM2YxBEEMhcmJu8V\nBaGPGE8b1GIbENgULmAxXGx+IsXoc6tvg3/+ilQebjpjx4oQC6YnB6WR9tJ8\n5kI40Eo2ysBLwCdgaLbk7wpG0OLseQTGhIrBsnRJd5shk0zY74JC5XYSZjL5\ns8RfjnYM1BaEyaNMgvVoazjxff0VMpyT7JL8nRRr2g2Wdy5398OJ24xXVUmi\nEYdWSPVBC2t9uwd09HN3TFlHQHyR2LfjoxyL1FP7ehtWZ/0Tj+wGOM4vbP0/\nF5F1\r\n=eLFR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"c489726662ee32f78c52aad36988ece80b2f1e59","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"jsnext:main":"dist/index.es.js","_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-7_1546531559094_0.5695686627863177","host":"s3://npm-registry-packages"}},"6.3.4-8":{"name":"react-flip-toolkit","version":"6.3.4-8","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-8","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"d3ad39db5edc50de8046e9752078a8debc03a617","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-8.tgz","fileCount":16,"integrity":"sha512-XestC3qOdt8oqC6rS261H34RDK4VbePVvYsV1ozKAXQ3iacn34j9qPCxdhgVT7it1ysSP9byyA+aUgmQWLc0rA==","signatures":[{"sig":"MEUCIDWg1WNe5VeGIxCqa0nJRg/Jf58fWmvhH3kUjji0L7YnAiEAkKn7doMcbhbMqUpVRVSQxxs2C9cmhFCirAitJq4ALr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLjlqCRA9TVsSAnZWagAAam4P/iZcVEDB8h/6wgzzL/Ro\nTvFnJ9b1xY91tIA+NOD7McOO78bmRzWoDXzdey01rfmyBaLdNIXSM9I5nole\nYE0YSxsJq1H7+D/MGNNLSp/UDLNPpJU54cOhrHGDqKreI6bBT/GZhcr2MwB7\nQq5XWgOJtFWI2CJORg+hhFGFY7Xhn8RIG2Ul0t3j4WTCc/J+SVnLAAo6HLOP\nZJ25VlQ+89U3S/r6YYvLKE/4dO6lmM07qPzL4cBR3NAyUcx7zzNHzmIyEq0+\nuyGTWd44UsPoCvrGJOhj+bnvKhKGkKRSjt5ac4RIYiiSnBi4ysWq803frQ19\n8E6Jjs0kgK3cjDZ5nGOI9M3QC/VJiObDUDEJB+inZlTSe2qu1haJFVNm4jaS\nmSqqJCv/Slnxvv6Ias+pl7GN4qVsm6jyGvPFfiAdPvlUHCxiRxH56aJuMIVT\n3OwsOL+kwqh8EblrSIj3ApNYV7czMg5VqzPC4n1Fohj6mRqhNNFc6c0IlYTF\n/HX42uH6L9uLoYeqVDsh6GQDuJbUpo6jpnROocbsmVkBXhtU7db5LDMoq4lm\nnB3Yse/TXTkqKjuO+bpj2yYAyQz1lURNohGZK8wcw0KcskNoJzNU5ZwmF6XN\n088aiydzcYbxWIMNPiyW76UWC6CjTXI6B8AHG+BajWFKyIJqy7QzGxGx0VED\nWWOm\r\n=PwcE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"4a4f41037773afee65cd790638bcc5000c9ac812","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"jsnext:main":"dist/index.es.js","_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-8_1546533226360_0.9962355717546254","host":"s3://npm-registry-packages"}},"6.3.4-10":{"name":"react-flip-toolkit","version":"6.3.4-10","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-10","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"8409184e6f4ff15c7d19fadc42517cee95d7eab2","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-10.tgz","fileCount":49,"integrity":"sha512-cxkOSega2uKtQp7PTMpbmI4Q9LLCaDXaVE2erd20vW13fCBhz5MlBNI1R2KYC+59TFlXIFmUfdPrZAbN3IVLkA==","signatures":[{"sig":"MEUCIQCzexhFv24Mq+PFikvSWIrU3SrZlWsLlafU2OcO4ysGcwIgegUI1CznbmB0eDpfiKXB/3NjjvZ20cYGYGcmPqscLJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1504264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLmY5CRA9TVsSAnZWagAAaaQP/2uUAWA8CPFpvV6uKCRZ\nvQfi5sJDFxWzjKGaOPMNrePmuMATRafwoJ9jWNT3O0UMt1qw6Z/n3zM762CN\nXtBouZ1+ZtZ7Y4xB2fqs8wCbEy1tLrEPY5SSo/cPjIkpVdlT81UbyxZ1q7WL\n+DPAbq6tP9com9PgHYCHUBYI7Kt0z6TX616/tcRqNFWF+JkWM28v7sV+OmRj\nmHHrUPRUy5cWgbxVpvJEGcoCxtevJPXzrrKwwKauXrjBb5cjxVti5KF7Sexy\nQEbxi77vkPQwGr7nAfsrJWq0j0yXWDTuTIC3dvTdRgeMBvA4Ehr3xeSLeJ3W\nBO3o2FsIbJh3aEAWoUWGGnY93fuHtJe7pkyKJphShYLFBX4XT436DT9QDVE6\nJFnDksyiMBfcFD9Ig6dxI+MpYNLi5BG+NhYir+k6dhDKTeq45GzodGIUVb6i\nzDzx2IY3PJ5ab6NzuVkWINALxo0/0zLR0ZLwR1S3vi7SviXJKr2T62Tstrmc\nXtSsEnLqixL1bZob5XE7iUY0lgFAwnDeAZPlNFvzW+hTGqZqanbGjhKi1HQ+\n6xaJuIEffTt66y1C/F+taNF3DEXPEWLC3jBXOpzk6IVmIXTHLKLUAz74ga5v\nmAPucdRCiziMXrYeBoPo6+3N2wpTbV8fDj3NcQXG7Cv+O3ljWiIVVGljoZqh\nklX0\r\n=OcQ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"7d15ba2f44380163f2dd32e0997e12af0dafabbf","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c; yarn run generate-types","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"yarn run build; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix","generate-types":"npx tsc -p tsconfig.types.json"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-10_1546544696528_0.3544222463358089","host":"s3://npm-registry-packages"}},"6.3.4-11":{"name":"react-flip-toolkit","version":"6.3.4-11","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-11","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"7199680c54428eabd71f2d8b6635b29b27d9372a","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-11.tgz","fileCount":49,"integrity":"sha512-vSp99OLrJMP7OO4FlfC7NK2GW16UcYbFOU8DE1Aqa0GocdvavZXvZlB6XudRteNj2cPOwDEvmDlcH/3aiWhkYw==","signatures":[{"sig":"MEUCIQDcHSMcUfNN7Ayzd7P4BqL4fOihIOC/pIw8rb8hUNCULQIgIen+5sL2drcfqAehI3c7ROf2P0+lWItAne5SqKbtdPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1504290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLof0CRA9TVsSAnZWagAAGSsP/idAtbGnd6U9nJCnB+AE\nvjw3tTGkH/a1YijH/EBFsyw5ruvY0fqIrpZSjNJlekgq61cY0UPBwiqQqH2O\nF8RN8LRrKnLqs75Myf9fKRUFOpF6S7ohw3ZnRWvapsyrAlVlGlOXOOI85AVy\nbDzP2Jl+9wRJZPW+xlIUa0J9/bvgs9IFrjxR1iY/8ybHAjcPLmNJW+vWiAxd\njaV+gnFdcKteGbuJ1bgPSO4otMdmHGwyXCVSQHwiLhzIM4GpR2SfCKIYisLA\n4272hWzj0tHs3KGzN78K5Tz0L7sgKnEcmkDdyYpB9u8v3nPWtv7w6HmihDdE\nyjtGpG7KMskCGJpz5DthYR0JJf3TAthdh2lFszlt8Nxgv1psWkKU4LlG/pEU\nfwgolpEOIb6rEDam/v19C8B9nwQ/hceSbHBEj8+f7aJFEPad8VyX+nTjbUi4\ngmxZiDW9ZyFrH3n+M0O130Oz1FFHoqrBUkmPgwOMuONN0iC8GcW5gVPbT80Q\napvpO+43stRYf3z6eG4wbJE7piLqXSpyLfx+CLbbStLCk7f+DCyX/99dQI6Y\ntZFX8MOMuO+YAorpsTXbwyka3qtpy0ahKKiRHvAe0BHNkabYOc8/91LDWNf1\n0/pZBOFLgHoUpSf9klxZRJmQmYsKeJweQG6cE1M/qs9v9HQjW6ZW1P1sAVfu\nJYfm\r\n=385U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"a332c24258f21f075956e9bda67c57f370369b5e","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c; yarn run generate-types","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix","generate-types":"npx tsc -p tsconfig.types.json"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-11_1546553332216_0.08511487574257592","host":"s3://npm-registry-packages"}},"6.3.4-13":{"name":"react-flip-toolkit","version":"6.3.4-13","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.3.4-13","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"4887048b5e5e797b82a9b829b75a4eb094eafca6","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.3.4-13.tgz","fileCount":21,"integrity":"sha512-duKClsGrpOGvXeTbaIRdnYiMb8qC9OTejvETL7tU9as4YDcO+YNIUvh60wAYFfdjOLFgZ29uSxGQ071SUHmElw==","signatures":[{"sig":"MEUCIQCDNdEaYxjph55g1aNGX9kYzjMqvvrWuarkKAQ68SYwiAIgQeM1dygw8PDmYy2xBR7BsDVDAqoBqOHIlTHaQx9ceaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1489731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLpGPCRA9TVsSAnZWagAABy0QAJnfFPHI60YIW+LnMq6p\neY5bYzcQHaIABmaimUFFtHeZGFn+eVDL4G0uzj9SoVKjIhjEGuPXc7ap16w7\nzJfNorc2zL2Z0UtfpgO+pMS4qTk6TmMatrCJ9oUSAfTdZDQg1wuUiHAENgvC\ngc2VCRCerCPvzKPqbBClUTPbtzpErD2FraqLyb+Hij22E/8LjM+btY6eh2rC\n8OxyxpGwHzAciFMBzNHlT0y4+2A9PSkE+nlkTBK0YEMcIwmHv5jIku1DARUi\nMwp4H2OmG4QNFAp5RQGrd7Iy9LXEKZC+syfGAkEoKHEexWyBkn6mKKwFkkRl\nWpw/CeH7o+KlmucGvvFQ8s/k+iOO7dJrrXBAE5lOMR0iQtdNz7XMi9B3BqZm\ngxK63ebJhZpLqvFNJ/3bzDvOCqjPeS1HwLc0wUvl7Gon5BfPyvnhv8enN7u/\nKtqLWHUGz3A+FcnPhzyRkYfeeEBALfGn0m6tqNKC6uWQr13h19i6rCGrggeT\nzbee5SaxJKYp7yubfxx2PWisijzdh4ID7lYqmLd+IAQE+SFmR2/H4F7oBMvo\nLqCHUAtnFx6XEMqzbDxXhhNwNLegrLmmPNnru7XUhjIqOKrAz5YMSduvfm/T\nGBZfI70tqVP2XuHlrHBKJ8Mzp+xT2MXU0yR3V0pD6c6lQUNs1yxDxzDepHmZ\nDKM4\r\n=Ca8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"6732fd94a18036b08447162d0c866d1be008e964","scripts":{"demo":"parcel --no-cache demo/src/index.html","test":"jest","build":"rollup -c","start":"rollup -c -w","deploy":"gh-pages -d example/build","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all jest npm run test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.3.4-13_1546555790308_0.19217489828575918","host":"s3://npm-registry-packages"}},"6.4.0":{"name":"react-flip-toolkit","version":"6.4.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.4.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"0af62dfe588a0d7174a83913d19c969d7c244d64","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.4.0.tgz","fileCount":21,"integrity":"sha512-XrbSJdyp/xSIqpQ9pCH7ExFdBGD7+7hON2JDpZy8A2FWgAlwrrg14VySfOaYCaxG0Sb2zmU9g/7FM1u6pl0qNg==","signatures":[{"sig":"MEQCIBbQe3YkAd0aQt62YSHp5FJ2VKU6lEv06RFOg62hwpTKAiAwHP3GtMf1aY342UMoDZ5uVultnpfTHUjr3GrmXXfbew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1483442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLsA2CRA9TVsSAnZWagAAuswP/3ePwF3XrrSRNx6MnbC3\npSrS95ZW6fyG4GfbrVCTS3b+bmgAZi6XmKZlfB7+1vKBUuRGc/Fg7Dnr5eOm\nuvpOCOfLquYO6KVm2vZi+LznpaWJywjAiEOp4l/k5S/tgQIUU4TyluHuP8fR\nDtr5P89ev1Up3HT7U8q6HBD/PpKYYZPzlGrTABWWPMKFnjp9UD2rUmOhp2CC\nnOhEy8H1M3v8BQ8OoUArl/0Tc9lOlPkVGwaOqT+p8EnoI6A/eaE7b9GIB8c5\nvfAXb+b9thowoU84StQE1cye0E96jGJilZWF1a/1hWIU+WFvPahPOvfl4tKe\nfSxcNTueGzeTgcwL5hx+xOSgoZr6TMU7tQ8/kMQhosikNZmYEOwI8i4VGhnk\n8rt6buxQXOOi0tNjyO0JFLpwxr9y+2JXQq4leMJ/5njcETW+9ZcdbtTag2vl\nkBpbp0TlSEhe2HHF88G7e9CQlXTafGAcLi51tHst0iOPe2yy6kun+Ss304K2\nKApD3deqhRiBVNQfA/MNvgrqXa28aoQYZKuq3ZgilnlVpaoJh0P9Vbce3VNy\n5255nR667QpxXaE8MzBwGmwRlR43tqWyiFT+78A+4r0FtLK/6mWuolJmsTCO\n7NWzm2IBlKL6SXPkkUeQMbGDhoobE8utG30NGnzwfvrRRLRcVGxY5xPvpIVe\nJ63v\r\n=CLAJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"44d36f83a5cef5c9ad1ee6cc951e12d29376c46e","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.5.0","dependencies":{"react":"^16.7.0","rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.4.0_1546567733686_0.33353317817252637","host":"s3://npm-registry-packages"}},"6.4.1":{"name":"react-flip-toolkit","version":"6.4.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.4.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"53c112fbbf297206a716980dcfd6c33d71d2211a","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.4.1.tgz","fileCount":21,"integrity":"sha512-Z5OVgOO0DdnPhWZTR2tmyen3F4rl8r8b3AXg9EiG5DpLs5sCMVeFaHzW9+PSFPvw6Ama+hRNVEQxGgeddP5Feg==","signatures":[{"sig":"MEQCIFi0O0XMF2ZmDwe2Fhms6vZbFCB+vlUwc6RIysj30pBAAiALSxEYKcl3lcx0rHkTgQzhbBPNy2HSxoooGQryCffJRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1483442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM/huCRA9TVsSAnZWagAAoFMP/23dNREkxJMbsTTPDG3N\nRnxAHQUG2RRWafRAjaLaA+6C6KrM8Er66Z3ExCaX7V6pV/LQGy3ckSD3lFFu\ny0OEG/+nLFRqbIqS4WqgTdB7B3qQ8yLA7kIhk0Eo/A6VtKZc9Qr9RKvFlFGq\nPTNTUw+2IaG2U6sqqJVmXB7+8oufcDYD1WE+8/ZnfcDOEW3/byZeiZxsPO5t\nSXefBpB3nCjGCcNMqt1MZPAatXAZVtiKWI5RdpoAVpmgaeEyEXXQFxYwW0zY\nTUYb0rRzI+d4wTzOZSpDfLZFtokR3XE18OmEUi4ywFzQaoV0i2nmydhVThMx\n7znnxCEP7PCkIDdUpzOjquy/WbJsqVyE7BIy5M+7CaYM1bH8M+fU6zdYTerJ\nvyYyCHKTz5bocg6JnnGctiSFo01ReHPoVxw7LjByueWE50Zr8nyXGKvwtyCw\nIMBulGvQsw6QLOSsuiIKpp26JtKOiV3ojbdIhjEQIqJVauWjsyAPaPE6w5RM\n3gkdVoSfE+cguJx1/8ron7pw8bE+RYTfDqz9vVfYmTuot+AmnA2joaf1EOwa\nlRZ08oWU0QgZafuioKTaH0LiHOK3yXBHqWB2JZ94z8iUYoNg6ksxKJRq2gyq\n0QUiTH5+rtrAqnHHvindUvVpp82cBW8VhbPUt4r4cSkIajuzIX3m5wUu38l5\nuzrb\r\n=ciBq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"5be7af8c1fc1c355bcbf1248f995165a72eab5f9","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.5.0","dependencies":{"rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.4.1_1546909805343_0.030000504858394672","host":"s3://npm-registry-packages"}},"6.5.0-beta0":{"name":"react-flip-toolkit","version":"6.5.0-beta0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.0-beta0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"5df5c53cd990bd16b43a174abe0dcf3059b1e29d","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.0-beta0.tgz","fileCount":21,"integrity":"sha512-i+7KG9PenYuG0NzDEJHBgzt9hNYJbwsBcMmNGD/Wr1iqq96x490imM+rpQTH3OTPNwKRLWo9/CQchr7pSMJyrw==","signatures":[{"sig":"MEUCIQD8D5w2W6siUaF4LmCbBdNy3+cnpogP7H1e2DKvS3lvEwIgYALSMpzkPwUtOj+QsHhFpbUltGpEXdnFL8wbnTfZGro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1488606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN5GACRA9TVsSAnZWagAAX4AQAICDgq1OSjg7ke6UimK7\niR3mmwknHlXbe6sOnFRV7hirEXjJhMRZ44GHP7u0W05CH0/iZJAGmApN26Dh\nQfuNnI98kbhxU+Ovun2k9opgzp0KesnMFmzXMpV6nFWimkriNeilNzz4AgEf\nIop2+TYZJury0+kglhoY6Euar/bsza/tYXB9FSmlNV49RCfmp0tWPmFzET6f\nn94ktIOy6n3UbPek9iB3/RMxW7JlYPxXM6J2n5gLVCTno111DIS8VVigG4gr\nKV0OftgRtJPXN1TShknRAQCdeT+noxhTcYCtTU0kUcwCZavWkUET+li+QerV\nS4kgsiSniYHk/crjxsFYFgR7cm5//1VjJRTigl5qNN0afNJRADCzMHKktMK8\nP/xI7aRJ58ceM2zjIvQDadOFZUXHk3Fy9ea6bzYoF99kCGFYWHJDPj4q8cBY\nlQ488wFHMoKIp4+Ix2vi9dNXipkzIYa+5olNZMfgqscgddbIM1HEvszmPDQk\n8RpYFBrGBUrhQ2RrASTSD880nPjCFbs+5Y/aZSehDii3tRMKAAS/gIRtKTN1\nLropHqgf2YjU/6nNdR/JDQxEEUG+TRYeoPrEr7H2UgR5v/qiwiZ/jAGQo34J\nnfMnBVfk90V7VecUaQ7jjqMG3dyW4xNwLWgNflyTFeoXQOTSYTZjoM7g0X8l\ngeSt\r\n=FSE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n- Requires React 16+\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"c6648426db20e7b8b830998385d852a919243473","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.6.0","dependencies":{"rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.0-beta0_1547145599897_0.7732156192713382","host":"s3://npm-registry-packages"}},"6.5.0":{"name":"react-flip-toolkit","version":"6.5.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"6bfbdc5ee6eb1070b3849f9b6516e47b700ec305","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.0.tgz","fileCount":21,"integrity":"sha512-SOQgN6OoqziwG/fsxDynSwKqUxHWqnF0UIrltrnJNBc7ghO/jTnXT2FkoohKpfFivPCHyde5PGQjzIGd03fRmA==","signatures":[{"sig":"MEUCIGcnY0NbjGrBGYAeQ5PKGlT+N5uKir96Kl+t70NgP05SAiEAuuHOG7fsvXaSgsrzFUHgdM8la5Z2fFD3BznbLZgqDHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1488601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN56NCRA9TVsSAnZWagAA0MIQAJSaEPJPfGWQ9caoNBCO\nwGI7NJD3D/qWR0YNcC5N1tGtPjJj1Df90SN3Q2BKzCgc5bJmmlUsvJdM0c4a\novFQ5R8/a2rBVsSKPOhiDQDiIpKeFKKgmiEsXTSWiAdhnx4IapV5Y2jq88LT\nyugLoikoKSuVhtR/iU7mukkBFKECBu0ltdkrf7ajYfJJiT3ayir6bjW/JHIP\nsC231Cf9EEqXHhtPjeJDX+KGOUwO4hyGC1qXwWCbR07yOYKbbPeMs6jH6Sr1\n1B1UmKjUC8Gtsq1V46qCixk0sxWzl+oUkPno4UkyNYrWoi+wvjhsOoPJepms\nhr+04Z80AuMdT03NAImFv0NYAqDLK2PBdO48YBayO4ORgGhsJoAptL0gkhLX\nDPUYDq+nOrvz4lQoiAoo/CVZ64yGhe9PnDOu97AIZdvz8dXDPgrD4WibAcdv\nqi/oLJDm7Maa543ISm7iqJTXKq+/knOg+ZdqwXHp/oj0OQUU/R5xtG+Neqm4\noZuVfZ9uMdx1N1eRmDUR2oIWzS2vxxJe9bdNkYaIuvVz7QUHU7Qqlw7m0cNr\nZAsSjWo+3/elXY7w0MEb4b4wxB/L5Z8a0Njv1t/llc65OkdFSYjxwXK2Rp8T\nzjpwrsGElzR2/YEd37JXRC0O9hN3Ljng4vyFWOdT4m7hyUsUARH2Pp9aAkom\ncBY0\r\n=/mPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","browser":"umd/react-flip-toolkit.min.js","engines":{"npm":">=5","node":">=8"},"gitHead":"1ba65be03048ccbb8f0ad5af683cc8a34fa2ed05","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.6.0","dependencies":{"rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.0_1547148938264_0.6778414624730225","host":"s3://npm-registry-packages"}},"6.5.1":{"name":"react-flip-toolkit","version":"6.5.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"e034ceb235f86463a40d47c77736d73ddf5bc60f","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.1.tgz","fileCount":21,"integrity":"sha512-RL7qdiUToolzHenzhMBVQYC4ckdRJxN6pFu4rrQHq+U4uYFbEuG8tC8rmozBRhG7DUIfoKQTh0qpq6BZtOj7Rg==","signatures":[{"sig":"MEUCIFwFrQSNa82XypmqGRichyRDHNGOEBhd6Ed8vFQmCR8UAiEAiuplVg6mEMI6uP/cHaVOOBIHS/nUqt7hWseA2bpHGkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1488555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN8CDCRA9TVsSAnZWagAA4FEP/iy3o52Uc9+gH9Vi8bbB\nwyrhwNhWJdL5vPtv5KObAoXBMtQ9xtnHY/Xl3jr1YtYIWpM7cBjlchjFvdu8\nV1Jx6doSoEY5GxpBdmQfqU4BXqwRIrUiWC6TVUHf+U3LqjKZ4YKBzczMzXO9\n8jGbbv84RLRsJtqp9UA0ZJEbISwmUQy8ag5WP+zdda+dMJLKFTgLG/km5HG3\n8/wHwvpLXJyHe6LKnBDCoIKjTXBtFXNHJHpJKvmggIFtLW76ALHlWwqsvzPy\ndw6ltLUNeMrO96P5eAiFmEwzvsYcU4cSDNOdY4HBqpVju+u694fvVo3gu44u\nxT+x6c7Z8R4QpkSOxL1NyZ7JQEhQ9kA8LYX68YJ5/Drim8TzRG51kMy4ix1l\nqALlXpVCnZzHdUiXdYDnBUT5Lok/Hc/VlY9voqT44+pGTmeH9UGrjDkSiXUm\n3m8n66+cRQKPSVluUg2IQB88qh9+PibNGUNXDkPc6Fta0A8WNkJO2IqlDysS\nAkciiOSZdYEZZboocxb+aSRfDLqKcADqG9WjbIpnNnm7dMPzSdrHWJ9+UMhn\nAr0NbWnZeXlqEGBcc8q9Pr3AUkOLAaEUk6Ctn/wQmUOgmy3dT7YtAhF+O8ec\nSThZIGfHG3VzLaq3f3sMWEIt56mAy6HhVsgF0K7+mt2tb4ncN0Fi3bfnR/jZ\n+3MJ\r\n=5Ws5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"a582bc453b2221d8cb9e45da52228b02ab4c6cb5","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.6.0","dependencies":{"rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.1_1547157634348_0.26651174914602604","host":"s3://npm-registry-packages"}},"6.5.2":{"name":"react-flip-toolkit","version":"6.5.2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"770b0e7b422dcc657477420f835b5b160542eb0c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.2.tgz","fileCount":21,"integrity":"sha512-658po7dd4IVrb5/8nH0j2EeXG30UybzPdL1cT8vA92ERBsANm5LKBqhVLjUXpeY1WLWNg6YKWxDxJ908Dvnr3Q==","signatures":[{"sig":"MEQCIGxfdjpjDVzI8kL9y96luFuiZtYl6PRfaqDcn1U0pG3KAiBQcJMRqydf3Z2UroMDRi39vjYV7uqMBKyOm07rnt+RKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1487909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPUCmCRA9TVsSAnZWagAAYBMP/1eifD8EEQeM5EnX25zw\nR0HqlcIEzP3iwyrFi0dnOmllUGzkZoMLseyTj9GXiiFaW1KlwVbZLnjjKHhx\ntMbQ9Z/KmxVNLMkYQ6/uR/Enqlo4sBFkMC8gcjqOhaIYqCUJjmI4E3gGMHfW\nriRq6ttb68Vsq5yAmuJNieMCNjxFWDjpHd2t6AJ/vu/7SwQUUCF7neCeXy61\nVwF8A57ZDLwl+wyvGFnz0GtvFZ0LUrOjMqynr25GSpmuptTzh1W3tQNoId5u\nC48yYB4MphnRnBZFdoJzdMcmY2NwXMIAcmOzhXZLxOKx2N3P6SAiHhkxZo7C\nLDymPzcqez3IgDfgIKn4SMcdv3Cc5i+hIQ2O5Kvmznk14Q062qOV4th1sYVu\nvUHSA4QHH5t44JpChZdVIcDAHZqQvpfB985gwk4zoQ16OkulCfO/gDjYIzsM\ngJTEU/H89IhMTfVn6RcC5FJMSwDucD2oXA0lAimqkdkYibCzJTZ/09lPGrih\nHswD6efvbL30o/InkJiAJqgawzANmaaXvde8aqwo6xW6qgW+RO4wnM3UD7zI\nXczaufssNJ0mQZdE374MjZARJuSiVDVgBPrRjXAQa/xQiLzDZR0qOHsX8RCR\nyD+oSGqBfmFyG6Nt69Ip+HgSuTNoY3LVsIXhZZa8gFubcDee9LVxzABVOhX4\n9ts4\r\n=MtWs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"0069d8426ca00e88316f18b55257c0b45b8cd02c","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.6.0","dependencies":{"rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.2_1547518117193_0.8146084546614103","host":"s3://npm-registry-packages"}},"6.5.3-0":{"name":"react-flip-toolkit","version":"6.5.3-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.3-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"ce896e9b0e7052a9f88d1a1459bf793ba93d96f2","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.3-0.tgz","fileCount":21,"integrity":"sha512-5lW604+ruNtkRwq3OTP5eleNKOGhj+TJVQf3npO1+UUGjM+jGCvyNtP3js/GvZ7DsoVfpAiC5z5Yq2ABV9V1EA==","signatures":[{"sig":"MEUCIQDWuXuD7lXiTvlhnKfY0ZF3ImK8mvHrQ1oVxK2gfIaEuAIgQe575axsz37Lpi/vJOl06oJ1iFsDFreu4RF7YnghWtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1515107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP5BJCRA9TVsSAnZWagAAlH4P/AtGGCzeiKlSHRxTTQNl\nT9YuGZRUFsdDkZJG35ekWlgYvkf5dyypi7FeYhJjV4xFLEeMSkCY2QFMKOCs\nJQ8l69x6/4AaaBstBaaJfkntyYFPvqADB8ga06z7UzjspD6W3pgOKHA9HCD4\nDKIUskLFh0bVHQgfxOR+zRalSU4QLY45eTuQw6XbSXXSEKW6MX9vbjuGkfWH\nICL6O+ooCPQc0NX6MZnn1+cF/YJoMuFETdsOVVnJbC+PljWU4DLk7I5oskev\nJR2zFrQ77QHJlyYFTUlM9DZ2KKq0/NutfAhtvkqcfJBrHWkVFlyimIK4nk1J\nrYPon8UhgQJhdJPIxqx0jNJ7eD7FNcbEY2HavzLMNoFMQ7vPHECSW0JXSMJK\nQvGHMJNa1AR7wH/Qv3Y2Fq3WUFSR6IVf/HNEPk7dRXSMz41vttKbxxVjM0NV\nJH0lO6knA8sWtP4Sowaiv1kS1z17MGt0ExHR6UD+1+AK37G4lBeBpf07b4la\netubLKmHIcwR+c36TbfPsq7uiItg624nNx6qph28oWEenZkbF/mZ6SzVdz/H\nUwaHZY/XcA862v7q95FIn/GAx+xkqP3cq1D/EN46swZmdvIsgJNPNXFigKjW\nuFYc3FaT01bbAp3rpeashdeaW+lJYsomcmIZlGOQJgIe08NnOsoK2N6JUHgu\nhMd0\r\n=JSj7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n\n\n![\"browserstack\"](\"./example-assets/browserstack.png\")
\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","engines":{"npm":">=5","node":">=8"},"gitHead":"264c8d19769df70778b26ae4da94f6ac93dc2c4c","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.6.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.3-0_1547669576459_0.538366611385803","host":"s3://npm-registry-packages"}},"6.5.3":{"name":"react-flip-toolkit","version":"6.5.3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"3eef0d424d8d7a53a6084edc42a89ca973ffa0b7","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.3.tgz","fileCount":21,"integrity":"sha512-RgFLURIHsOlap99almNaqQDtnP/bQ78KA2nO1rtc7Hy0uZB79zuNo2HMkIsxh7tHyZcu40FPKSwiWBHSf1mhkA==","signatures":[{"sig":"MEUCIEi0JSvkWkDEw7Bv/yMlYVQHrj5DY1r4wSTvMq4lWzaLAiEA8e8Wh9dB3VKWdqWSNodsFUKhEWDOVuJ7CFF7xW7XGms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1515643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP6ZjCRA9TVsSAnZWagAAHagP/2qoHxjb5JMFWajdDClU\n/ohzDaxVUY1s3qb9dVeW7TULeNHPY9/VSsSiKsNl03dome12o8TKeCWp+329\naXuqzgTHC7BESN2rLwR6e8bmp5CrI39QLiPvb7lTYFN1CBV1fFaNtUB68/TV\na0wqAucFPgG7mfnTWGS5myj7/DFiSaTPpXcMNENhwqR7vL/Ak1Q2tNAdOMVo\nkZCFcqlAUhBIGFAG96AzRJNRJJtHJQ/91wmExASn6BIUXQJpHXlh75QEw1Ux\nSGQrpZSpMGaM6r1CZgPLM4nGzfyuQ3ihEuQYPXYmZOWTWcixhv7E1wlwfPx2\na+y71xHh/9wCW5kkn5ehTgMtr7ZPbV61yU5JiLxUEtaUz8a79mTJv4J4OpEr\nNIz/TsvCxUFjTwguXDRSQ2/Dex7Km7zcMNOsrmFITHD6q31MNnU1aVFE6T/k\n7ENiXcgl/EZc+XoDYREHJn5TxuyWH8fxr/Mc3R5repl/WMGiBTHkf9KCo3zA\nD/az8HJLCW8FpIN1Tceb54Hu0M+bHpMlgjl3HOgO+vtPE5I/njEbkPldlDAI\nxJX+ulu0H6Na5AOP17FiNVm4XL7xb0/mRkK3X39Dx2sxShDA5YYAayKDo5In\n8gA58E5j0BaL2CDJF4WSQNyUgvZLV5a6s96HBYLupcydplv7TLeuJaWmMn56\nUrFZ\r\n=5W/P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"529c6d8ef9a63ed830e52290ca6d89d3e3ec7060","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.6.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.3_1547675234601_0.21752154465632034","host":"s3://npm-registry-packages"}},"6.5.4":{"name":"react-flip-toolkit","version":"6.5.4","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.4","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"6eac89cf6c15d26edcf64d47bbfd9141880e9a7b","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.4.tgz","fileCount":21,"integrity":"sha512-w9IUIlnrWTVdCvQEYMtyfbuIgeiNVV+2bYpxcjlKNX79MqaBwch0X44yT8T1tdvxx3weqhki0ppwOE3BOGcxow==","signatures":[{"sig":"MEQCIGtThsB0rwVQOSrlzySgGXDjYW0PD+ndXy985TnXchyQAiAJ0tFmqg9MUpxsHtDZ1P2N1K/ukS8rAsXMAi3kB9yn8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1516057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQnLeCRA9TVsSAnZWagAAEWEP/0ncNLrFmL36dpy1pIXU\no9JSd0q7iyyJbEYmLbeLxUeMwNx22x8btSBu7EMJ7tl/c76L4303rCSzP7R/\nLcoIonRFcbDanWRYmlemt2SE9dEvch7Yyp9hdhQ0Op5tGZGcLXumt9IiQSjK\nl8Q3Q+wuiiUrDiUL3lbw/5C6KIoZRjLNLWof4MgNK/Y+Vye2EAhUNlgeuTEF\nTp3krJq6Cj04d27N3xhR/N8XgnOXXxjZo7Hjcb0lXnuRMZ2Ppo1K15r6dx7V\nrUBut8b+1HRIsbwHQaIIQUlBEAhGqGx4JE6IXngvHf3GJ6HQN5cxysCEHOCG\n4Z1BOGJ6r2xv6BGp7fLBO0OPfoYkB2MPthK4obLAsfIDfFsouurYP2/PY32o\n0VDDnrm0FDVRq77Z6WeBIOGMh6v1ZwB0wvtB9Mpp9KZEUkiRz5X5ahSyD/5g\n18vQ4tnkOGEds4GNnsR+8MBi6MNo+MqNFINvNHHEzI9LGEzDS2ujMyi8AhaC\nQejyn3u89b1Pe3QnKjTFPfP+b1wvFwe3T9LarbuDNCHh93qa3WI4KBjmc788\nLB/DqOSpAAeRiXLw7sHAv6m+zLIuSySEJ29vZx+JL5glJq6h90phuL1+BoDn\nBFgWTg6m47Cfbdm46G04/B6+LztJ7xjVv4SMQ3SmjM9tcU/Zu+PqqrGQqCzs\n6v1/\r\n=JsiT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"0b7b789663660e513c95b8953d7f79b67307ef9c","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.6.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.4_1547858653211_0.46981966979154244","host":"s3://npm-registry-packages"}},"6.5.5":{"name":"react-flip-toolkit","version":"6.5.5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"4651d901e1f0a0356092b9ef3cd48b2a2a1409b8","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.5.tgz","fileCount":21,"integrity":"sha512-QftsZt1dQGply8njp3aVcgn1GvDeolm1qAp2oKowygIl8H7BOpSgcFF+4Kv+cqFNbKfXx6hkVx/ya4dauk7Dxg==","signatures":[{"sig":"MEUCIHiviudr3CV8V2B2NpLKSlcxQ6rdFhTVyWBH7bzx7VuMAiEA0pObyfz/xVoZu0LYfU37s5wKXvphw7LFZ5kgEVppwvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1517438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQopsCRA9TVsSAnZWagAAUbkQAJX3CtWJ6xIYHxqCvs/0\nru6U56C4fvJT2ozNjqqoeCC8ebXMfBbgtfaAY3AImiZzAQHfzaVXUnKBHn9X\nfrv04WmXvq9zM7w6CklJ605YuX2lIocjlFpCJ3g7ze5DKJvzP5jgLuexf8uK\ntpY8epjcocqsFx1Xr9B2ZW71hco7wFNkzOjkWufrg8b2z6BpZUF6NcsZ0iCH\n/oDLOxTo5GrrYDK4KJkla1RbKq861vQzwKHTMKO7xRFfJrgGLGjrJNYRawpH\nj25G9iIaLWDpE4KqvxrrmuTjxC9rROAaVBoYGZId3Q9w1TeBpGG7yH48e/6f\nrXb2hyQ7JuM2+YpB7Eydk5QOlow6fGFky1eTefHsHv0L2msNnFQWhPa4z6xZ\nZD+n6LN59hB/G6qOW7tE37tON3lwhxkau5IJBQU0HuvLKYJJE2hi8OkpMOQm\nuQpfiFv5CtC52nXqr8fHPRarbLX/T44pwF18M5zvm8lnaf845+wb7VRvdey8\nrY0q635gbg4ecYUar3cIxoCAeXFcxWen7p2me7mk3eVU/mYacYtL+7kmCpTT\npQ9Ae+1FgoJ8PF7OV/O5J2ecJprnERbN+wAwPJ0pcP/lKNAcYsjqWpA5UWWf\na7xdDVRzvr2nypH4M44mrEuDPrKR+aS5EBGmHvYuFvKFe5PjFKBFEEY5NB7/\ndIUx\r\n=2ZES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"07d21f60e39c660ebbadae5c3275433aefe4e5bc","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.6.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.5_1547864684012_0.8335880702006149","host":"s3://npm-registry-packages"}},"6.5.6-0":{"name":"react-flip-toolkit","version":"6.5.6-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.6-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"378e67c03d34c7725a782287d90e3e2613cba05e","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.6-0.tgz","fileCount":21,"integrity":"sha512-lispLMqEzRlmtzW6Ca/pOMjpQC5ubWoNodDByAbneBIZoz/DwLeES6IiO40PWN/YwwcCcXe+k3p+FvXJ49dp3w==","signatures":[{"sig":"MEUCIBw/K3YSaR53Xr3c/qNCuNxa46k5lDHiBGjKj7eaQXlyAiEA09tdfZ2FFsi8eWsAaH8naB8vcRMty3xiPqy/H3F5PZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1495653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcax4tCRA9TVsSAnZWagAA6R0QAIg9mjR/F3Qj3Rky4y5j\nCd9qpjp1qXqbWEn3JsO3qgOdpgh33kl3dEvHl0mlug510HhMjS9H+tZtuzyT\nPlRu7+i6kbAJpeQUdPmItKLoKWDEYU2KlaF3LRxNs5DWWnkbzs8CrHeFqiRT\n9S6XtLPEEaPiEvelA1L8OawcpNSNt10Ns0HjFj1hgmoten04Eb0F+BZ+hfp8\nEfsCMfzzWyyNnqjHaFVy6hrCFmWdCLGkMHTYyPSbkEUyK6MhTDkk+bGS4CdF\nDUkyB0lpDM9Hh9TL+rD6P5E/maoY1SCGH1S3/7EQFg5VhTzZkjya7wJhtFsi\n5EcSzBd+lx4WXdPtApJ4iV25wuFLQ32/rPi31oCvbMgnFFzSHdEdRbsOy0DL\nBI13yNMNwo+P4BT0pObNR8q/qnCVupXpqcrG//+c5YZwLVs6eCkXxSXgMRt0\n8AN7/LAG1eGez0IjOrfvbRVJegHLZZDiRwB6B9RdfhUV4R4uxOR4zV1HF9MQ\nvQvSobi469vraNSQI/gjVVC4xN6VPSClpDeUZyv0+kD99FX3n6kqJXC7Vk7Q\nuKueC/OJrUWhH3QYvSgFeFJkBtg5B8xcWPXFTs72+sVAFL20D3jI+Y6KvO+8\nwirW878T3jR2BXsWHqPJaVAIis1l+a+X7OrObbRs8ttI23gbxUkeVbXr2elw\nLPyQ\r\n=8Fx5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { Component } from \"react\";\nimport { Flipper, Flipped } from \"react-flip-toolkit\";\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n);\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Demos\n\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","engines":{"npm":">=5","node":">=8"},"gitHead":"5d8cf36cf309b2dab42045201921dd6b12756b99","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.7.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.6-0_1550523948726_0.8330127733188835","host":"s3://npm-registry-packages"}},"6.5.6":{"name":"react-flip-toolkit","version":"6.5.6","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.6","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"7270e14b5ab796a16365f55e0f298276ec56987a","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.6.tgz","fileCount":21,"integrity":"sha512-B/E4pESQCrb7DnVzltnWqVOXWz0x9j70j3IKMYPgWigGGdxR/9rLREwrO9UyeLqY6UGEp3DzmnfUR/3r/VsLhA==","signatures":[{"sig":"MEYCIQDtY2tZxh4MWKX/ah473BCmMHUosGZNkVi5G2Lww7mt0QIhAIwsUIRSgsZsoOmZjcwyVFuSxYmd8XTI0KmyeUiqB7s3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1497088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcayH/CRA9TVsSAnZWagAARWMP/3d8fG0CUgiBWwJ8oX1Z\noWfSk3FOrAjkwAheydEodlS7QlA1iLGAjotRmfx8oEJESEjv1y8ybvPp5bdJ\nuzGoEyaahUSZ1MCueoBbA0+quooorqDBNicOXOsO40AleV1S4HBiE9L2Zwhg\n3egsL2XJupgJoBJpsz/8P5LspE8F/zRKrsNi02bqbnGSmP25jjigUxjXVuRK\nqZdKtMHk32J588LVgmlaYjx62HIq4a+/+YmND4ubOYmbsQTsqARxFTMZEEtd\n7Bhya9dsELloN5ImRwK+lBbrWjEhXHv083wT427ZChy3uzkM5/sdaU3pic1u\nDJYnDLs6jqDRKzzhTKuSJf8jznUSc/PrLLPW2ZU4NBI+wp/1XxqGqOwyV5Iq\nN3IYmA461JSSLWzUGP5TCs1sJD7UpboHCNl7CpXkp5nfV5e4BxJdkkU67UrQ\nj+9oos5U27TrtNmimnznoIr605lFjpM/DgdrsmfqcgQRFbKZWRj2Q3z6BpBk\njXFRKkULlFc7TV3j58hZg2L+K9e0IGdhR950O4QiSco7NtycWcuRsqbXtOss\n8p8K8ldtlSNPdIRV/ak8Hpfso5IVV5sW6Kqp/be2OZeGrkZfa0xk9SGAY1N7\nO2DdUn5+P6AH3ekRCiJnq3gKHiqrvfKEUwkaJ00Bxjs78Tlj55bE+TLYTbZj\nkljo\r\n=oW3z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"35d6756abadc2bcab2644fc18477bced2b8927cc","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.7.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.6_1550524926964_0.37251272415790093","host":"s3://npm-registry-packages"}},"6.5.7":{"name":"react-flip-toolkit","version":"6.5.7","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.7","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"1ddc1479d64113f859d1f6ab02ed0cc33d7c1778","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.7.tgz","fileCount":21,"integrity":"sha512-7v528bWuZhHwyitTr5I8XB1csFK90wPrRiYuNrSYyG1sFY2U/fD552Go3EIqs4wZ9iAcZiR0zfoZ+8YQICfjPw==","signatures":[{"sig":"MEYCIQDT+jMcMoVPP0R491/j6HCxS0WyguWyfhpFdml4fJZNAgIhAPunjqpMScxhQ2Jbkh1rTYzX3kd8lBMrS0jHMrj/CyC+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1497562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcb0ngCRA9TVsSAnZWagAAfbwP/3R9p5Pz7KaAYB/DlVf6\nHdmT+GrQBgm3GlCUW/DswIbHZFQRAdfbcOFzTnNlefhWQcR9eJ8BReeTydAp\ns2YuuOIPHxCcIVC7CZVwvIOTreJSVskHktPyulo+h1POltFeEs549OY8iAef\nU8nhipVRMl7gtnvWX/3XS1kBGn1VHmuZ+y+gPgd8F2RmoiU+YNBI1r4mPJWu\nhYs6mSwiL0IwRbXKfNqV3xiTCq0eTA5NK8k0mMXcq3HBl/3z8LGYheX+TX2l\nRBDTjOSZMnYjUf0yZZczaADBzYGFQznGNCEfIkrL9e6HZsGDrEAklrQ9pbu8\n+ZoEp3FLSxbKqB82h/2aMtjLDH/29eOqmjdG097qC0d1wkxHitAocCI96XXJ\nROVb7zxOALFS+o4C7M6CnvOSmv9ZIRQ2Q0+zP7G1M6h+N+lqYttlZ00WDyf3\nVQHYH+Lgp17yn1Eiv8eselJUabxWuh6LuFFP2CGO+3cvJyVxr98MA2erzeYD\nr3SWLwtTjuZ4rMkl70iU6GwtBRt7QSyKXVTnjmhp7pnO1ImNCHDEiP6wZvh7\nG+Y7fHuCg7NOZCOzV6Iktz0a7p/Fg3OTVtKtizqtIpuRRC1L7V5/Psy7eqnW\nSa9oq71CNeYQhaozxgM2LODJUoGq8npRtPn2MPjKnMwu5JclimA0L8rKTVOb\noDDs\r\n=CQrp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"4e44e2971c7c831bda2f24f6cbe39a1f2b5de50d","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"11.7.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.7_1550797279021_0.6224932882326777","host":"s3://npm-registry-packages"}},"6.5.8":{"name":"react-flip-toolkit","version":"6.5.8","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.8","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"577eeff6cb27582d9eea385f20409bc4f2dacf63","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.8.tgz","fileCount":21,"integrity":"sha512-nfH/5xC0ehoD4UZ7yLRPueujmfMT5JLAI1i/tasteTiwJlTiChWA4glR4TMYX3AT4fdBYnRWplkPCpkQIygo3Q==","signatures":[{"sig":"MEUCIQCSOmAPZvv+f6yr/gmCawAHBkdAgJDVHnLaXNhv73KtxAIgewU1kA6jobKBnwGFevC45wRMnKU81w65cbxCiphwxiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1498069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrfRPCRA9TVsSAnZWagAAdLsP/i3N61qHwW7EzjEGC35o\nh8se8kt3kUYfbOZnWlTBN4G1+N1DxyAB7lgRzX/JLd7om2i+TZx7rVczcXTG\nyuBHtQW8DerpdF9hgv3I1MStPLAEutGrvMDBO81VNdd9rQp9/jbywNC+BE9q\nmvQj79JzecW+hfRgSPMVoXVDWnGTIes3oo0hV5f69gsOk+D0Rr5wyuXUFrex\n6yeGjEZBOzpMhFZuFZqwYfse+L8zOtKHqQXbvvTNzVe529dLsAO6nInj6pjg\nHXAs/49wTPUwZW/AWs3ELrga+dJpF2EtZjUoJLlXZp1zaAZsZTU+gP6bR9fw\nrlOqXGkhTCEPZCc74SsA6e3Kl5MGyOR/7Sfh++zuyiw1DMkmzfhGo7bNKajb\n90+qxfjxzXMjdRTBfHgB2h/+Ge9sxviSYfjec//F1K9+iwbmwoxWF2L/L7Vc\nz3obuLgc9Q9PKrTBvn9TAPoZztKa0493VIGnpB1DBjFn0xor+VcyKA8RV1K4\nZYz1INdu5de5QXgWEdarKU8TCN3FmUmx+EPv4aUS30hbqrc9L1TFLlxrC3hs\nwRaoolvB/5iAS6U83Nwj+WB+bmtaXRbnocZeiGpGRwUt+CC/jTO1SFJh5uWZ\nlNd/xQzZc3+2d8ygv/t+SuETUDW8uPSeFASGfWIyHzQsV9a2psxOkjpwHaK7\ntpS2\r\n=l8CA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"e1c30837cffc5af14a72f4785d8cb8e583a087aa","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.8_1554904142256_0.2862110205828443","host":"s3://npm-registry-packages"}},"6.5.9":{"name":"react-flip-toolkit","version":"6.5.9","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.9","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"c8ad78a8cf651f98526c15a51d2f4d63e722090e","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.9.tgz","fileCount":21,"integrity":"sha512-0im7XXPBQIS4jiXQTfc5huDEYyNeWtCAZjkytJPMT3P8qroul/ii9SX5ijqHwPUIblttZUYrOSKkdFdPHHHZcw==","signatures":[{"sig":"MEUCIGSte33Z89NcrhLHrc0xNcDgjfbUQe5NAVU6wkYOpR0MAiEAiWUmFKMX6POYc2P13jnCk7oZebKQVQkbFMYjkUQ4Vvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1499687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsfiNCRA9TVsSAnZWagAAa5oP/R/efBBlxMYCK6jsM0SD\nA40QgaQppT6OpRkCe+gn7QfRE2g408c6NBWMTvpxnxhFpEkgHzOlwBhY5E11\nXpXAYcR3dY+BLELxkSG/SABPDSeKu2P/bKZZT+bfZB3/aa6qQHOYSUbTEga+\nJf+7U+9bhi9BAO5WeTNCMk+cePmJI0FTIpXy3FNt98nFSzVqLpKl/PEUCqyv\nE0Cp4ILfOqeOzh0lwjn5D07PBQsIT4znCyGsAkBkOLzJ7Vm9SFIJatNZxAr5\n7M9DYKPrlhWEKK1mka8jAhkmeJDxeGllaYHQwytyg53A2oM14bxpNN5IiS2A\nrOfv15LZMixBBtkiISjb/WlPRwDwvSRAcPomGQLZZbj//lHrv9AayQVirWEr\nzwEq2atU+mOXqYYvEt6OkQWPQsr/MAMEaKusStJ59Xhk2i7EW/ofAdK70ocL\npC0eCF8VyrlmKqIcEa7Imslgpd6Va5pZ/9v4m7RYSbe4lmo3fAYp5Ez8pZAw\nILf38i8sR6k5f+j4SeTZ+82f1fBZrNC5FeuGx6H1xpuDFdPxm6CQNbT8dIES\n4UcKuyq/BauILIK6Rgz0aV0RZHb0tAiHkuxpO+sEsV1vISf5bUeafkyT5pvf\nU3T3VSlmw6syurO/c6Bu46NzjT8HQgGhIllal5UEtONXqo82KI/zufjPzopB\nrIrL\r\n=GeZz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"06bdb63dae62231fae0b467807691006964fae55","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.9_1555167372290_0.696203425423473","host":"s3://npm-registry-packages"}},"6.5.10-0":{"name":"react-flip-toolkit","version":"6.5.10-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.5.10-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"493f8aa9c60d48b4f9c0c1ed8db25d5b40de2ca3","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.5.10-0.tgz","fileCount":21,"integrity":"sha512-RrBsPDB+ibWO5eg4LM4SVLspCXOhCBCCjIK5AEtQWLv2+2uGVg5QDUVtB/A1dGkpwyAAMz3ApNB4Ylkp/DwjDQ==","signatures":[{"sig":"MEYCIQDhtDW8NZcBc3oYJQeKIiBrIe5uIoRHLjd3RBoepFaMeAIhAPdxSgja2Kn4tjxePq9sLT0x+VuRDM+fs8tXIZfdSXlA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1501519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0tcqCRA9TVsSAnZWagAAwTYP/iDFuNR1b3Ap3T9DBK+a\n4X3sgvKLOlig7e5UnVWzJvf2oXY3E+HmYHf3LO5x5chQmVInxXjdri/kLuz4\nl9z7l2n4ebljOc4Rsdjgb49X2v36caO3srKH90h+XNImWt3M0Q+btwnpy/Pe\nnoUGg5jFOu9AYN28lP2yl0uwl6uVyu7VwKcSN9qA/zTiLfac+OsnYxkP08FQ\nU4yVBU30J44jmDQIHmIAIIuPUfvMt8NGgpCkj6j5dyZv8IjgEZ27jPjlBKGK\n7+OkgLL3VFYxBxneAiZczK6ZlYVPbzpFLuil/dPu9+Iyl7QjskKaslv+7AIH\ns62KERKbv1vKtDxgORYjVZo8zuIFA8nyrW0C+fxssfRpEJjzNdSNoPxRkNHW\n3A96T4DRfRtuksCoczF/nwfUyhYKHqb51WT97jKMKohLYDPZT+CJTeGTsjfp\n5woHzWDgm4woRIwVJlVUuC7DUj49P4Z2ogcVmdszDp0wB6HHJFVqOhZNp0pr\n9JmJh4lmvUTY80NUSk9+vkGWLqReqSnhhigo51Q+llnFZdy9RcrJRiGZ241F\nFrz1xAT9lBty+3eULOlBvpotVUnc49r/bfGPPIR5IhOLOw8E9tyZMzUfWOGF\npJnixHnbrBYge9Ndu9L/TxpjbcudCzyquyYZ1ByXLrcJetCz5PMEdTFeAsys\ny2fI\r\n=UViK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n }\n}\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { Component } from \"react\";\nimport { Flipper, Flipped } from \"react-flip-toolkit\";\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n);\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n);\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n );\n }\n}\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }));\n\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n## Demos\n\n\n {/* children */}\n \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n ```\n\n\n#### Advanced Props\n\n | prop | default | type | details |\n | ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n | decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n | debug | `false` | `bool` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n | portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n | retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n | handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n ```js\n handleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n })\n ```\n\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n ```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => ()\n ```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => ()\n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n```js\nimport Flipper from \"react-flip-toolkit/es/core\";\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector(\".container\");\nconst square = document.querySelector(\".square\");\nconst innerSquare = document.querySelector(\".inner-square\");\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container });\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n});\n\nsquare.addEventListener(\"click\", () => {\n // record positions before they change\n flipper.recordBeforeUpdate();\n square.classList.toggle(\"big-square\");\n // record new positions and begin animations\n flipper.onUpdate();\n});\n\n```\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n - 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.\n \n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change:transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","engines":{"npm":">=5","node":">=8"},"gitHead":"ca1db16aaffacc987e14ec3edcc91d5053650922","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.5.10-0_1557321513441_0.8394203714385695","host":"s3://npm-registry-packages"}},"6.6.0-0":{"name":"react-flip-toolkit","version":"6.6.0-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.0-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"1d4f4cef32f89dad99458a856e3d148d50b4b978","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.0-0.tgz","fileCount":21,"integrity":"sha512-a5fUuj3VaEDfkWnRvnVWIZs+K4sDiOoob44uDpaL2ThoFh45sJv9/ze+pxSodYsJaJxjgCuUCj05BKY6FRjTYQ==","signatures":[{"sig":"MEYCIQC/pPVoLPzpQI9eEu1R17+dnh2A54ph6x1hNMmxxixe1AIhAInDupR+e//VmvVMx+XGwXL4PewdkQCRW1LWiKn94Czk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1514452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4GKkCRA9TVsSAnZWagAADZgP/iFsy4103TVWH3pJE17S\nD7Ln8sYO+NssMlL8tBitdm1MKCkcKLchIZncn5moqE44HsUMqkGwjLjPawZq\no/UKptkopWTa1DEtYnI2t3rnRYndUZUTAzHusDec5T2VtzXOBjGwGb+Kl+2n\n7zoMzPoo8MM+I885K1w3+92DrZYbbnAGUn7LJr8s1N1jiVQI1ghmazP2hRxL\ne24S1bn6NiaCBJthzaVBDL++Af+NaZQGhq/Fe9z8NDQfyPnNjZpOzgbIiruQ\ncjulpZ4aMhZjbpC2WqHMiJ8UhSO+GosRzoKXtQ8JrX7gCU477YpaYCxFkIkH\nndGUq7AKrVZvr2634Pb4CGnRvVMRSEiq5L+h3Y6/pY8jS0uQl5AXh2EE3JkT\nqZ+RCInNfiWhHeogJFTtbv6bAMXXAa5Sd6qOttJNjK65YZx7YEAGajzHsR2w\nkT6zJg1w8Kw/fDqjFwBxNuHZqTX/b7hU3iD51+JRmjnj8ayW67y50/vFBmvz\ncH8DDRgJluaznctpf41bP7oq2czhKNqfDUxZMBxwl8r8oPV3BBnsH0M0U64H\nPejpjcBfraaU3k19rvo5TStF0x3blt4iIGrgnOSguvfiYW0rSNDC8WK5uZNN\nzVQRjMMsMeSWAZbNIXrD/S1eWwYEDZOMqlnpv+bjYcryFornvHs7uj4lEfDK\n10yI\r\n=zxDt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n )\n }\n}\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { Component } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false }\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }))\n }\n\n render() {\n return (\n \n {this.state.fullScreen ? (\n \n )\n }\n}\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { Component } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nclass ListShuffler extends Component {\n state = { data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }\n\n shuffle = () =>\n this.setState(({ data }) => ({\n data: shuffle(data)\n }))\n\n render() {\n return (\n \n \n \n )\n }\n}\n```\n\n## Demos\n\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n;\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n;\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript, or hook into the lifecycle events of a Vue.js component.\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n\n```js\nimport Flipper from 'react-flip-toolkit/es/core'\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector('.container')\nconst square = document.querySelector('.square')\nconst innerSquare = document.querySelector('.inner-square')\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container })\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: 'square',\n onStart: () => console.log('animation started!'),\n onComplete: () => console.log('animation completed!')\n})\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n})\n\nsquare.addEventListener('click', () => {\n // record positions before they change\n flipper.recordBeforeUpdate()\n square.classList.toggle('big-square')\n // record new positions and begin animations\n flipper.onUpdate()\n})\n```\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird\n\n- 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. Check to make sure all `flipId`s are unique.\n- 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.\n- Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change: transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","engines":{"npm":">=5","node":">=8"},"gitHead":"d2f7d455e4757f7d176bb80c49a1f11d2cd033f1","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.0-0_1558209187585_0.4127015508740137","host":"s3://npm-registry-packages"}},"6.6.0":{"name":"react-flip-toolkit","version":"6.6.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"c5218772a021910942839a0a2659477195abe78a","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.0.tgz","fileCount":21,"integrity":"sha512-wsSnCRLXTFoYxRyX6qwNorDQZlBtdbvNuXangPiq1GTxPq6Jko1lJO+OZbS8xV+IeeCOARTH5hsXX1AjWf4QDg==","signatures":[{"sig":"MEQCIC02Ub5e6kAm6rM1qJD3mBTEquPQyoRvpEfuuLwa0CcJAiAkOB7BqPciZ/5FivKyeLy+tEYCF6bZnaHUwVcrfICd6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1514851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4HINCRA9TVsSAnZWagAAyIQQAKQbrjVma7dmIkrg3h+X\nunYosMMkAfXUen4QxXx3CzTVppWhT+SoJFJP0IPv7quH8KOhCQjrB/yF50Dm\nB8l+VVlPau0i11RQH3gGDDAkm7lqp7xooGLiNTG7LRoPe+w/XDikgbKOfjNC\nUpSfHqoEQyjTEPtwZAg7inL2inyW5qteqavWM5oNgDLx+gKeptvMkAVGdtKO\nopTsxDOnHrUg9ilFAEvFmjLwYIsZ/CAkfjQhKFC36SM1y/OP4HVNFisWe6n1\nS52A+qghz8kl6FdFRL6lkvLOGUvnIWrRJBV6hEE4SYiFw61gVlX1cQzxi4p8\nXl6rrtXu7nuc2cKJQHJEeQuOAR8MSV3ZjKwSdq88QpfIgKHtJHm6DCiW820O\nJKv6YgJXit1PrBWHdTL22SsOsL4cB1FPApnf2Dce5lBs2EUEuxSljzBo3SW0\n5iR+aDzA/pOtNLcnboIhCmnOeBNxDxhpbspERIz72pWZqifU+5AozngyZAbc\nvt4bRYV+YgLWLUZ4cBAKyu8cf3wdvqkzkQc1Om4/QkvPmybZ4Z4VLqToS6WN\nIJB94en3EiTEBnc69+YFRMRshsknrozlZqFIp5Nzs8ok73esS1PhPHkCIjvY\nT3dKsOnTs70ZvivLeauE6KkeSFiyvTkMHce2HPayqDPIVQhjxAGNiHJbXYpr\niFAb\r\n=JZIY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"c9d080de6dbce99c1b2ad139e0e5fe1c127de6e0","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.0_1558213132365_0.7924705648938037","host":"s3://npm-registry-packages"}},"6.6.1":{"name":"react-flip-toolkit","version":"6.6.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"7a5d4dc82d7aca4297ee0ade3667578ee4086c7f","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.1.tgz","fileCount":21,"integrity":"sha512-WRAaAqHPaev3GHD/klYxgs9YbS1T6dj+WSHCqozy7kLmCwX9n/fif81VUlLf3FXGXx59VQGGcKAQUe59jsvFXw==","signatures":[{"sig":"MEUCIQC1hsXM/oHM3JgkdaAZ3Zu8sRkNk7mFe6+jObEghP9SvwIgdfjbZwL/ydH06okclPq5rxALay3HrqBr2nBwxiFxt40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1515404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4qyQCRA9TVsSAnZWagAAWykQAIU3s3tquUB7Pe9uBZNn\nK6nxfYPQ/L4307yoR+XUGam+Dlq/CRyRtkvHkbupBMMDDiKPRY0NaLZ3vzBN\nnMmlfYBK7awoNjFGcpNR0FFyra9VmYhXotu6Kh9Zx3i61ZnXMBgtf5UAVNmY\nn70afn+6z0jM9XV5NBklRoQT77bvToU7ZG9XbGaOc+bt1B+7qbOeJjnDH9vr\nzMN2x9Vh48ml+Ui6kGFWU6kOOgZP9Dha8dg5DuW0vEcrf/yTCUP+y8sI5tmJ\n44EiXbMTsMoCh0GhWEzSv1b6/7WVW3R+CcApw6x5rBeUqjg0z1ZXAy+p3JJ8\n3OVJ/m+/sUTGhv5VSHNVUdvplnkDcxGepN6HwLyw6xv9EniII3CctF+zHEep\nMFtn+bq0WTQhlC5LjNa9vgrMYanmvFBleAUqfX66Aoh/AYvO3rIxJifx8kNj\nwE8bfz2nKEE6fhO1zXg8jw3xQddpZGcnqrmKVIx3AZzL+0IVp+xpgiAzoEUl\nlNyCGtAZdHYLkMxV6amTVw9x0oFzKvqXFcymBnDe+msl4x4nF/rIFz2KMgFq\nW88x0el0ma3nAfFuBUFoUkO/7Lx9COHeaDzm2xu5EMnnL953JhWIZPJBX1V5\ninExko/KNZ4wJPur4owaZ0SxhkpjtMNo9vLJTUFGYIKcgQle/lCySDw9fTfB\njmEr\r\n=lHTw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"526d64bee596045868b134d0b3bf0d28138eddee","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.1_1558359182854_0.9442212735859086","host":"s3://npm-registry-packages"}},"6.6.2":{"name":"react-flip-toolkit","version":"6.6.2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"ff8702d9def3cd89db95e52d79528a16aeb3de61","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.2.tgz","fileCount":21,"integrity":"sha512-QYEEoFDzygBVT+qm9Hhc6hFRofe8UtLMta8YNtvd92FJDeiua4SfyLumxIUvJupMT+8vqeJ555vm86ZPZd+CcQ==","signatures":[{"sig":"MEUCIQCJAX/HrZT2n8NPQSFAmgltv4n2g8BP2yHEbRcMiY1lzAIgWdfhNZ+6aY2SzmjTh7WtGiPGKuSy7FFvcuWXMYTF98U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5K+oCRA9TVsSAnZWagAA2FAP/RYalVowoNWPKzLn+FW8\n6VorfxGhaWDR6Nn72frRCdYd0Tp22o4QSZagLqErO0mDKkdukhq4h51z69Jj\n52V1dcXT8vrM55e2KQoUwJwXTCM1oMO2yeRYj82x8Zj9Yaj0/rnIeEgCL2dE\n66yQRVMcg2JgVsabUs/S+YwEUhhahgXprRfSH+4m3TP+G8sqsO9BCE7sFro0\n03K0gQWK1TaYxAC/st3pGTYzmc+8Z/CBtB7zfvHXaVaTdqAZYvBqcCByd9Rg\n9fopDSFN2zrKdYwt5PXCUlHxahPV6ZOFGY36BN0QsBJtHEQsQKvARfJZWS9U\ns+xBzsstKURD2Pq7LVX8S4GtioCtQlN6gZDmGwq+IUeimosyCeVgU25Kjzce\nvMdOSoWOcoVkWi92i0cd6jSJnm6JPSShoTuuu8aVec/lyBnrfq3fvBs5R3Jw\nuPTbG5qrEgVnPo63qR0kxh4Ru83Phl1rNLnlKtim1Z+0JSf/1UmhW3ZVf8wG\nrxLLxjUogTUsNhE6KTR7xkdYxevS4ZWvh1cioncO39NP7nDhR1FzMJFbnpyn\nmfeAfU9SkJ99vRcLnvNrxYYSNdgQX3RMwZ0uTA1tGEG62h4k7k6u4CzffK70\n7KxJLljf9aw+5TLIP/wmr+km3J0UI3KT8uFF9MLfMu82Q1BTkA0mvmkXsXQf\nMNaL\r\n=hebx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"d18789152ef55505420184ee75210fdb31918361","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.2_1558491047951_0.6634624222867853","host":"s3://npm-registry-packages"}},"6.6.3":{"name":"react-flip-toolkit","version":"6.6.3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"5f6304abcfdcb267d7ab7f2a1971919b1526ce34","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.3.tgz","fileCount":21,"integrity":"sha512-CfHjXzRQIdGCVY4p+jBApO5BDCUK9YnlgvB89JYyS4oyiEkB866/qc0RrT3Bo+6H3WctqQvJqDUo873oUxy8hA==","signatures":[{"sig":"MEQCIBXHLQ0APzTMIo3Zz5t9cml2xdzdUcGNy8ZlElK8dBO7AiB8QnV6CXqGd4pKJmSS4PYDeTGUHLjln6grR5cRyrOwUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1535562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6Vg8CRA9TVsSAnZWagAAKDUP/RgBGXjMSSkLFx542Sit\nzsJI13lJf8gpQA5fMJmjouKChAoXrh5ev8u9OeGxIYEdD3j0NcaHxC7g1D/4\nmsHZPb9mUKRbFWnr95mMfmbx479uGTvrVmeejoSbErRZHqy0IAJCTD31EbaE\nevxRm/EByPXN9jWja5hAO7q7NLYGorMJGJgbWK1/ttQKaEQlMEdHHEg276A3\n6qd+mvwC984OrzByfZ4p01jSVrmmSxwASPe9YiAyead1hT93QE3IxenWVHTA\nvsd/4cteoj3v9TI41NpdCvTHF1/sp2UPit4RMh7DKn3lc+o2lsHLUi/7WuSZ\n3JOQGGO2K5/769Jmqb0miJEWRx/bONi9StlhfkE7XJPE5gigWuL110DCv8Dp\n4Q3WXo+jhs4t22jmdNLWkvqr4mHJLnuhLRgYnAr1PmjYZYvq05DXIp4nsJ36\nuqS1t813Wu3cOFW8DkETpVVikqAJ7CvKgW2ONcy5kr43qMPxzThT8VlFGz53\n9Wp+XEbJHJ8nb2ufbAGSQ/10+VECI3rXi71NLQTPd5QIlA+cJifoYiK6LGAe\nNdddfyR3B86YKH/QhgDZcUx21GIQZ5gknKWSBt8ldh4crBZcnSZUO1qn1/cn\nq9+sBMAQc2R7Aj3iLYoD78vLR9WBDXt7BB1R3SYvNLyKIGj4JQRVtcS29Rdu\nN98b\r\n=3iFJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"2d9c2fedc6d6f3145fef718ebb1e238cbed2e0c2","scripts":{"demo":"parcel --no-cache demo/src/index.html","lint":"tslint src","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","tslint-fix":"tslint --fix 'src/**/*.{ts,tsx}'","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","format-and-fix":"npm-run-all format tslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.7.0","sinon":"^7.2.2","parcel":"^1.11.0","rollup":"^1.0.0","tslint":"^5.12.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.7.0","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.7.18","tslint-react":"^3.6.0","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.0.11","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.3_1558796347778_0.2705051948104622","host":"s3://npm-registry-packages"}},"6.6.4-0":{"name":"react-flip-toolkit","version":"6.6.4-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.4-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"51c47deac6ac061d1021006f74a49f2ab7b885df","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.4-0.tgz","fileCount":21,"integrity":"sha512-01BOKn4JTBu5wOxgx7u3VxamR55YE2zsovCXs3d40ijaD8PFqgvldONIfhkVRK0IEQVhGHDwJMrRjVpXp8CX5g==","signatures":[{"sig":"MEUCIC4B6fV2pQkEB59qU70FaxzM0S1dYr7QLHa3JdHKcWUKAiEAvbkZk5g61NZrapx5GrjnCvDAAFy7eQurGoW1bVnop4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1553193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdBcBcCRA9TVsSAnZWagAA3oYP/3x42Fg/M8pQXCRIg6gp\nzI3wLIXzB5n//kRmnLI/xtSwY/Negpvv9T1GTEdotATng/4p5M4oHfZvBGSB\n5530EYA8yXTm7n5oDXUSt20EpNOCUQS03EBato42RmLDCoQLXxdZfRAmZhg6\nvtX56sVLCIqM51WBh8ZvpeHfXFpmeaJ6qYrbCemRjyoS2C4MACgUc6RFi5fE\nlGy4f/0LyvAleQtUJkRTmrtH2dvlDc4K+2Sq7ZzjxtadW4DJphOTU4PdvNDJ\nuqbNkJtohTUMK+tJ2uInTC8i6s/BOAXftH4sqY1j2jgN1FuZpKcSjONbXUFG\ns8mjzl6iwLBlBccesM3XxjDOzfQKY928CZ0mhWHZshfSGK7ylAC6XlXz858+\n1u+zQzU6/oZqxIbjtK6DCO1JdEvGDiClRUHEbjhpwiE/O7G5gGtkl8SxS7Jc\nKQNqtgzRIpyubiKCMjAJduoMLIItEy5cuV9vOKYtLAy/RnYoNFaw+ru7KwJr\nr7BSjzlP5ol9NMYKMxtGkt9dI8DHJMw9GHIIn3/X8QzkyQIJimTodtKRJooC\nhUb/gvDbTkOZSQuqX7ifErLzFWRLYmIroDDwgLmOLVNS2Yumnnf99aAmqiZ2\nCRs2uDXg4SRxwytKJxgITs/7uPBJNjPADnd4mzG55Rx5TjZQPIMv/EpSPhlC\nIclb\r\n=fo0s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n};\n\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { useState } from \"react\";\nimport { Flipper, Flipped } from \"react-flip-toolkit\";\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n);\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n);\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false);\n const toggleFullScreen = () => setFullScreen(prevState => !prevState);\n\n return (\n \n {fullScreen ? (\n \n );\n};\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { useState } from \"react\";\nimport { Flipper, Flipped } from \"react-flip-toolkit\";\nimport shuffle from \"lodash.shuffle\";\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);\n const shuffleList = () => setData(shuffle(data));\n\n return (\n \n \n \n );\n};\n```\n\n## Demos\n\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript or any UI library. (For usage with Vue.js, try [Vue-Flip-Toolkit](https://github.com/mattrothenberg/vue-flip-toolkit)).\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n\n```js\nimport Flipper from 'react-flip-toolkit/es/core'\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector('.container')\nconst square = document.querySelector('.square')\nconst innerSquare = document.querySelector('.inner-square')\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container })\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onSpringUpdate: springValue =>\n console.log(`current spring value: ${springValue}`),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n})\n\nsquare.addEventListener('click', () => {\n // record positions before they change\n flipper.recordBeforeUpdate()\n square.classList.toggle('big-square')\n // record new positions and begin animations\n flipper.onUpdate()\n})\n```\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird\n\n- 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. Check to make sure all `flipId`s are unique.\n- 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.\n- Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change: transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","engines":{"npm":">=5","node":">=8"},"gitHead":"7b48183dc1a511cd1adec10d9a7ea00f0e697ea4","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/index.umd.js dist/index.umd.js.map","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin --all; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.8.6","sinon":"^7.2.2","eslint":"^5.16.0","parcel":"^1.11.0","rollup":"^1.0.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.8.6","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","@typescript-eslint/parser":"^1.10.2","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","@typescript-eslint/eslint-plugin":"^1.10.2","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.4-0_1560658011654_0.9716301615529626","host":"s3://npm-registry-packages"}},"6.6.4":{"name":"react-flip-toolkit","version":"6.6.4","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.4","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"a5cf54329e39a42c517997d77e3d648b20f0cc16","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.4.tgz","fileCount":21,"integrity":"sha512-DMPvPdKRBjnINf8bt3Zr/CK2D//6PV3ehRPTHJQU08HD2Sxp3Pkg50VniXX4k039KUzVo0LnMsgVHaqr6E6yZQ==","signatures":[{"sig":"MEYCIQDRuHvq7ySyeI/0awFnU0b3+u9IdfzurFna8xntqc3FfQIhAPBce07T5DarxznkBMwrKi/YMh7T+71eQkte7SqPVDl3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1552212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdBkQVCRA9TVsSAnZWagAAW7gQAI6gARBvvYRHMZJY4rig\n71vzJUR62MY1briAtm2REChSGoCJcPJX37Hea8wlsY7pMxWvyRnvhxYDbpjZ\nAG1Q3fgSHFyVr4WgRJXPzkUGYMl3bKR5VRuOHNR8pBFcdTCbRXl3Ni6GIWRP\ntX0AP2AXICEqx41kzQF4kU9PMJH+uOR6Bi4MFGKbcNBTUS792sW1UAguiNiN\nAl+SxWMWZIvq4UC96vYfAbya8CDCbD+T6PwmsNqXIKzL1lPOT1si2xjk9ips\nAlJR5J/SrNL3R4QoK7TWk2/HwhTbAzBQ/iZ2QHG8ZC4XSOpOuYrikBIltCwn\nu022FMgj88JSHLRO9rC0jH3ZG2ixPFEqvhuUJieiCv4mSyUYz33f2R9Gm9ZO\n/htKgv8Au1tj9uihxVIktWcbLRrjIL8+3X3CdkBnXW2ESThu5iQygJcC1DrP\nNa9Bfaz6uaq+h7MNPxNkpIUgyxrI+LJIDB9pLA4H98Y/KrfjNOZ3kfkcxIoW\nKrwPFRmYXHtA5PSu9kCmHdx717c9Egv2gPLl9dwGR7wzaggNhXGUQZgsfV2f\nt+hj69c8DZ3XRiCR3vaQqNq2i2L/PULvdwsuUx/z2TNWZi0LH0wos9Lp3NfD\na+bL5dTY6ydrjuFe7mSnA/Znofi4V82uK1Z83j6GXT+FEv2BJuzay2+LbNKV\nFbAD\r\n=tRgD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"919a5cd2df26e7e615c32b92b6e3b86c82ee1957","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin --all; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^23.6.0","mocha":"^5.2.0","react":"^16.8.6","sinon":"^7.2.2","eslint":"^5.16.0","parcel":"^1.11.0","rollup":"^1.0.0","animejs":"^2.2.0","ts-jest":"^23.10.5","prettier":"1.15.3","react-dom":"^16.8.6","babel-jest":"^23.6.0","typescript":"^3.2.2","@babel/core":"^7.2.2","@types/jest":"^23.3.11","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^2.1.2","@babel/runtime":"^7.2.0","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.7.0","regenerator-runtime":"^0.13.1","rollup-plugin-babel":"^4.3.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-replace":"^2.1.0","babel-preset-react-app":"^7.0.0","rollup-plugin-commonjs":"^9.1.3","@babel/preset-typescript":"7.1.0","@typescript-eslint/parser":"^1.10.2","rollup-plugin-typescript2":"^0.18.1","@types/react-test-renderer":"^16.0.3","rollup-plugin-node-resolve":"^4.0.0","@typescript-eslint/eslint-plugin":"^1.10.2","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.2.3"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.4_1560691732726_0.8904542076534181","host":"s3://npm-registry-packages"}},"6.6.5-0":{"name":"react-flip-toolkit","version":"6.6.5-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.5-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"52cef5eda5f694598c9a59c7e705109869ef07d0","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.5-0.tgz","fileCount":21,"integrity":"sha512-Uc00qe9Tm0DhHkmiMevht9hXagsBt/1LSzLmaHJ15z2FqYiH9VwUDoOeb1Uia1mNZvwKSq6hg/c2CPiS+YyvyA==","signatures":[{"sig":"MEQCIGhTuS5iVOyhZOqf5Xab5DBud2UyK8100dzqLIwbd8aqAiAl+ikdrOAbQKuQzh6oiGlbCsC13DUg4OzRb2CgBtKorw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1547366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEQZPCRA9TVsSAnZWagAAAQYQAJ0+o11jqBPJsajLzo2K\nPz4EbieJMsZ1fOfqB2tt6SJGLmoeU86exBQpHEKULrh2Pzwl9OpsO/25idK2\nQ7N3XWi/OTYkZymhw7M31jWhwZqMNFvY0bgEIZjdSz1DKeSxLTZi/JjrTR9Z\n1WTkI3yJu+TgBRa/j6ROTaKzIMfbsr9YP1dH9PLS/8vZm/1aTJvde0ua78dq\nbgpZZG0kYcmo4fPSZvNrnZxlnv5B8dMSf+m1A6dBjjozQ+r2XFD/dz08Qths\n1AD7H/rD8f5bf7ALbByo2hnypyoo1GFtlXe0qwi6uCZlcGdYHFYTvxsbkZYx\nIRNYO04z7+CKFllqv6fkMbvOLcF36FgA2NFViB3jknexPfvq5/5X/m5aLcfj\nbBupneOtxmcVsw+tG1eVetuQBVmEDAmJwvSpUPYDf0IElbbnLvzpYnj2z3Vk\nKHxf2GXtYmA2QHVEBhBJlAA2kOhSpMAB4wU7Pj263t3Tld7DSuucD7Z89C2j\n6mhUzkt9N/3bLRprCNuENZCf4PDuAfX+DsxxOj5yi8zuOvxVPI/xRogOtuYH\ntzhADs7iOM0qnA2MXKhS6Qa8KoOvuqwPekN0vR1qzLsXiVYdkVQz0VI54g44\n5sFKuAv2NKSLcT+WyVpQ/174Ndx6mNm2wTilEkmCQ3PLzV+DSUiNHTJRlEtw\nG3ZI\r\n=UfjB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","readme":"\n \n \n \n );\n};\n\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { useState } from \"react\";\nimport { Flipper, Flipped } from \"react-flip-toolkit\";\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n);\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n);\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false);\n const toggleFullScreen = () => setFullScreen(prevState => !prevState);\n\n return (\n \n {fullScreen ? (\n \n );\n};\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { useState } from \"react\";\nimport { Flipper, Flipped } from \"react-flip-toolkit\";\nimport shuffle from \"lodash.shuffle\";\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);\n const shuffleList = () => setData(shuffle(data));\n\n return (\n \n \n \n );\n};\n```\n\n## Demos\n\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 5\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript or any UI library. (For usage with Vue.js, try [Vue-Flip-Toolkit](https://github.com/mattrothenberg/vue-flip-toolkit)).\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n\n```js\nimport Flipper from 'react-flip-toolkit/es/core'\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector('.container')\nconst square = document.querySelector('.square')\nconst innerSquare = document.querySelector('.inner-square')\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container })\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onSpringUpdate: springValue =>\n console.log(`current spring value: ${springValue}`),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n})\n\nsquare.addEventListener('click', () => {\n // record positions before they change\n flipper.recordBeforeUpdate()\n square.classList.toggle('big-square')\n // record new positions and begin animations\n flipper.onUpdate()\n})\n```\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird\n\n- 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. Check to make sure all `flipId`s are unique.\n- 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.\n- Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change: transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","engines":{"npm":">=5","node":">=8"},"gitHead":"fcf0382588f4a1291ed38ae0aa24f407f8e36212","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin --all; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","rollup":"^1.15.6","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","rollup-plugin-babel":"^4.3.2","rollup-plugin-terser":"^5.0.0","rollup-plugin-replace":"^2.2.0","babel-preset-react-app":"^9.0.0","rollup-plugin-commonjs":"^10.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","rollup-plugin-typescript2":"^0.21.2","@types/react-test-renderer":"^16.8.2","rollup-plugin-node-resolve":"^5.0.3","@typescript-eslint/eslint-plugin":"^1.10.2","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.5-0_1561396814336_0.1609236515191026","host":"s3://npm-registry-packages"}},"6.6.5":{"name":"react-flip-toolkit","version":"6.6.5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"f03a1746d8a34a5c0fcc8c4a47df6f33c407e9e5","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.5.tgz","fileCount":21,"integrity":"sha512-7U1bopbxaw3xgDGwybvj8FxzEoxvxhdstNYFoCX9CxfUhqK3+dXY5Mkw4plmVF3MdTmOZSrrDKVIigBeF7rqxA==","signatures":[{"sig":"MEYCIQCyruYKM3gg40yFmzJpDowhIpSKeCo+FbMfJliyXpMn+wIhAOiHAhjNT0wjuLmv+h3FVZUbFBlf3W+KL97lrvzOrVs3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1549509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEV6XCRA9TVsSAnZWagAAsZsP+QHs6ZA9OU3RlWxQ7v0i\nAKZ7VswS4S6HeCK5uwMBU58BzdqPi/dGDbOJnR1zPEU6ZyAKtptGvIgIXD5G\nhpWzjuWSq/4mlVQSgQvYbwgP3Fq8kyWsy1z58uAyt9g1dLGPfeCmU41fOLGO\n8gzTYkp3YollE7hFeFw2X85rSuzvYvsTJxQIvyjANxu00KHMs8Q+sq7N7IXv\n+6ms+kNC4bVwEskVnRNVaAxlEqwSUesqv9ncwSO/neD4N/Ed13HcssmLG725\n3HkurkIS3rJEDy/OcHm77WbSykUiMdstEWvkhvnBofVExZxNYk5CJGqfa9k0\nzRgRB3FKbbTo7OXyKb3JPRbWuLSSFJNbK1FO+kb7GwH+joI1lcFqb8BsDA48\ndCABpGItiW0tJhjHoHsCgRJ9MQ+gRNxzjrnA27WvlK3QU4lz2O8feZwAtLMA\nlavKoInYWoO/nzMt2miMFQQLY+T8sVMKsDA0Ik26xCxAOF6Y7lTWLh9GtAVa\nMgsSlolj84+rt3TFo8xF3biVH2EIqUL92M+xX6lgOtsNN23gWSBo1gMd4MV+\nRVrxdZRnpsMSOROTcBxsIqlyJKD1JAKfvNBI5AM24f8X4ud8lKsothfqlv8N\nuXT7dpecKzcUmiJaZLZMsWAxRuYCQiz7FD93PH/aJNYicm07eD8HcTxtGNA+\nUB5K\r\n=84Q7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"types/index.d.ts","module":"es/index.js","engines":{"npm":">=5","node":">=8"},"gitHead":"63303cd0dfd95bb8641f966558380775083c72aa","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"rollup -c","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin --all; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","rollup":"^1.15.6","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","rollup-plugin-babel":"^4.3.2","rollup-plugin-terser":"^5.0.0","rollup-plugin-replace":"^2.2.0","babel-preset-react-app":"^9.0.0","rollup-plugin-commonjs":"^10.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","rollup-plugin-typescript2":"^0.21.2","@types/react-test-renderer":"^16.8.2","rollup-plugin-node-resolve":"^5.0.3","@typescript-eslint/eslint-plugin":"^1.10.2","rollup-plugin-peer-deps-external":"^2.2.0","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.5_1561419414033_0.5811124156414729","host":"s3://npm-registry-packages"}},"6.6.6-0":{"name":"react-flip-toolkit","version":"6.6.6-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.6-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"429e91df2f14a48b3776c54d5264fd0a2c0584b9","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.6-0.tgz","fileCount":5,"integrity":"sha512-mr3alNhUdwKvOeLTxCTLReWJSHf0ZmB6Y8YabUvUsdjI5aiaQezymb2KYhhtW0a5UlcTir0PNuXkad9UZdSlsg==","signatures":[{"sig":"MEYCIQC2dTL+DgFB/o4ibxn5a5x/317MbAZV6tsLL7VrmA2A+QIhAJRYCyduWaewCAk1n6zZz5RsPari1/t0qA0IZn2wWIa8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdHoyrCRA9TVsSAnZWagAAhX4P/15BBD1+rds4srVeft1Q\n4ztnkfdFKBmz/HR01o8TP+/mIKRivB2oiQhw0EQUIZKMp7RAZgnxPvwtRLO5\nyoAlBEQJLjZBEHcocpOsAz8lylQUTBVaYISyJLojdDH2Vv8Jaz+gTRTCgZPV\nUpJ68pGXaHlLnGUKGXgoDRAYmQyKOo3LpDRXx+DEZR3H921MVOVy9h0sKvqR\nqxMWuVdicK9Zq4+aY4kzpW5wg0RvVghIjhrO+FOGM6tOsaiYjhho6FwWANAN\nZgBSnvkm4rzH9HRP8P+D1+R35HdFpgzS6bjLBCOd4+ya0zv76dubBGiyou5F\n/Qt7pTaviOLLx7uVq4MbNI/mlSYvsDY/jocb5v5twrZjoO7u95USvfZDgPY4\nEjMMqWefZiL1i47hFCgXQpHSXvzsGpo0ar35B7gZwQwplO/Opb6mYRcQ6X8B\ntvhwSn6VdYOK0jJndghWiPv8eaWDbK/QxFWPqYS3tFzIM/nxscAEqKwgBtRF\nubbRKL1daSleCk8NRaRuADYihWeZHaJ9tPe9pWhSngE1ZhWj92kmu4lf/Efl\nOnhaIBcIQrJt4xKiXRxdQ4+Ekru5QGw6/lCE8kUSPSyTge9VuSIo0hEdnth+\n0LkgGU8AQK6+dnZ1Fipyhe7jMHbpcFKdLfDQFtf7keUksJY8k7eTaMna2BC4\nRqk0\r\n=Lput\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","readme":"\n \n \n \n );\n};\n\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { useState } from \"react\";\nimport { Flipper, Flipped } from \"react-flip-toolkit\";\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n);\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n);\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false);\n const toggleFullScreen = () => setFullScreen(prevState => !prevState);\n\n return (\n \n {fullScreen ? (\n \n );\n};\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { useState } from \"react\";\nimport { Flipper, Flipped } from \"react-flip-toolkit\";\nimport shuffle from \"lodash.shuffle\";\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);\n const shuffleList = () => setData(shuffle(data));\n\n return (\n \n \n \n );\n};\n```\n\n## Demos\n\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript or any UI library. (For usage with Vue.js, try [Vue-Flip-Toolkit](https://github.com/mattrothenberg/vue-flip-toolkit)).\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n\n```js\nimport Flipper from 'react-flip-toolkit/es/core'\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector('.container')\nconst square = document.querySelector('.square')\nconst innerSquare = document.querySelector('.inner-square')\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container })\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: \"square\",\n onStart: () => console.log(\"animation started!\"),\n onSpringUpdate: springValue =>\n console.log(`current spring value: ${springValue}`),\n onComplete: () => console.log(\"animation completed!\")\n});\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n})\n\nsquare.addEventListener('click', () => {\n // record positions before they change\n flipper.recordBeforeUpdate()\n square.classList.toggle('big-square')\n // record new positions and begin animations\n flipper.onUpdate()\n})\n```\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change: transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","source":"src/index.ts","engines":{"npm":">=5","node":">=8"},"gitHead":"63b9e30880dd94cc41cc7f4065b9938e6e7dc6f3","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"microbundle","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin --all; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/react-flip-toolkit.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.6-0_1562283179125_0.6914967733498305","host":"s3://npm-registry-packages"}},"6.6.6-1":{"name":"react-flip-toolkit","version":"6.6.6-1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.6-1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"535296f78bb0b1a42272907f78cbd151edc20c63","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.6-1.tgz","fileCount":37,"integrity":"sha512-5RqwkiTiq88TlPX0jxvQp+m8NYAwwDBteuM26tSBhbYKph98tczUkheae8BleLqIEAFFtl6lSOdzLYYCrKd8iw==","signatures":[{"sig":"MEUCIQDSjJgj4AFC+PbEdxkS1MDAKU1mIRnVLVvMQR7Ul+FycQIgNm88GTnZjXuiaSZTE9Lcg7haTtTYNey3/AuRzSgjp5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":422010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdHp3FCRA9TVsSAnZWagAA7/MP+wd4gm3pADvw61gPcdk+\nndE8BiVBea7O8FDokW8bJMw3P95AkwKWwb5KyJbU4x5jlkeXHS0ip5wOCaL8\nbFXsi06n/V7YzwPFVAkYx3sRhyw8JP8ZjJRQzOFS4/GIl47cKPocIRmTSIE1\nsnqn+N6DzRGg7UEZioR1EuNIrQn5IY0qd8o2N+JzNo/M6g95y47SuYQnQqO7\nzuV9pIwx1NwCtsZ7XsBke1oq/t91U6LKLzDGTgW2HHJDVbAkBvcCl6Jq7PqM\nMdBYBiJx5pPsjfNl9gK/OvAVtLuF3EVak/44GwdlS47W8+MYQCDgj8X8DwzV\n28MsI801ATofT18Hx20FNYFZY4tcLi0+AdwSpIrejfzMzcwtHUyTdgxN5ZI9\nRMKkroufYd7TEGR7juA6FyDZ93b77edGHakkugLDSNwRNMhWvV9b7hAC2yLj\nb7S4Re4X0ZenR5p6+l+r1RBdIicJMXUw/bZC7UqLr7mZlELsfN//4kyFxOpy\nQhRZQhAzSexdalKojSvp4UBAxfqq+jZ8aYm2xHUJSpUz2uh7i6r7jPB181p0\n6cs6kpy1Dvds8269wGnbREKiG/YZlRf1Ux3nUo+uk0uhQzfXWCF99gPAGfeb\nRAVIGxm45wJBeRExJafizdeAJmqHHJqYeAHqxqc0+R2ox4frYR4AqBxkIMDy\nw099\r\n=qt0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","readme":"\n \n \n \n )\n}\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n## Demos\n\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n;\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n;\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript or any UI library. (For usage with Vue.js, try [Vue-Flip-Toolkit](https://github.com/mattrothenberg/vue-flip-toolkit)).\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n\n```js\nimport Flipper from 'react-flip-toolkit/es/core'\n// or if you're using commonjs imports: import Flipper from \"react-flip-toolkit/lib/core\nconst container = document.querySelector('.container')\nconst square = document.querySelector('.square')\nconst innerSquare = document.querySelector('.inner-square')\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container })\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: 'square',\n onStart: () => console.log('animation started!'),\n onSpringUpdate: springValue =>\n console.log(`current spring value: ${springValue}`),\n onComplete: () => console.log('animation completed!')\n})\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n})\n\nsquare.addEventListener('click', () => {\n // record positions before they change\n flipper.recordBeforeUpdate()\n square.classList.toggle('big-square')\n // record new positions and begin animations\n flipper.onUpdate()\n})\n```\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change: transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","source":"src/index.ts","engines":{"npm":">=5","node":">=8"},"gitHead":"a55d99496c3434a7ecfc4adf91f7580b21f38098","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"microbundle","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/react-flip-toolkit.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.6-1_1562287557248_0.6957851537246089","host":"s3://npm-registry-packages"}},"6.6.6":{"name":"react-flip-toolkit","version":"6.6.6","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.6","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"afa32601eb50aa90ad1b431669cda6945ba5ea9e","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.6.tgz","fileCount":37,"integrity":"sha512-AN1pwNxakOUNfoNB1GIHwBhoOphR2U/aYU+JX5D72RN32tpAO2LNGplQvjEeSsJ6LFLTW9qS1Rnnidgs76H71w==","signatures":[{"sig":"MEUCIGfMuKuqP9s7D/yiFdJxsFt4Mb4TU8fO2F03RIxDvKIFAiEAlN5RAKzTj0EIqSWyxL30JDX5J698Hjmktjd+D01KJBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":421936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdHp+RCRA9TVsSAnZWagAALgcP/230rZkTD7c5RhiY9Tf8\nGX/aUotu4HqmZlsCQ3I30osygb7H+UMezCNqVm8BTZgUYsZjFKItylUfJzEf\nqNx78h5HSCmAxbWoFAzhAvlqu/QThBlu+3Xn+baXQmFgyovdUwQ5LLudIVXE\nR+XtvdFt04P9FNx9juFiBjskl8N6PNd4BoXQ0DD3fV/AIQZ3K3dQOguA6QQK\niJwGCjb8qlcUnWHAvGKJwTeeNUzWDmcJzKtnnvT4PV1jQAwBYYNq79AHDGib\n5msi3/qcmdKmUpDax6QzNhfBGyh9bQW3RrxBR3+mhtz6JJwmy3r0lfXyAKGW\njhlq/X7AD8KGPXQpgkNqLFtwsUXF0wZrqglR5BL+/Gibn6/VxK3hX0NYwX2R\nNv/Zg41lN8FFyOFeINxfnT4InfGhX+Z6gcLU97N4naRRnXvCjFtpHcu8IHVW\nQcu/tvbqF4ydth2BCynZr1gwJb8tDKYnAgZ3FGHq4bpbvitPIHTv6y4A9QVl\n2naKXGJvqJMhluvdw1R4l2C5qT4clnBlobkEbQGBeeMqRGpoyIKcPBMCbrsH\n/aot5FdTuqeFMK0qy2ExFqgbmMT3xYkkiMchZLFHMhv2xxi19ADPtEFiiVGv\nwS5kRJbTAoXYlXX9R2tGild2C2U5mCwV4vTRFHhip8I+3+kGLWOSxQCcxbhK\nVCpU\r\n=CgWS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","source":"src/index.ts","engines":{"npm":">=5","node":">=8"},"gitHead":"447c1bd5eb379289e71119db71b9ab17e090528b","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"microbundle","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/react-flip-toolkit.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.6_1562288016934_0.5804994169101609","host":"s3://npm-registry-packages"}},"6.6.7-1":{"name":"react-flip-toolkit","version":"6.6.7-1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.7-1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"cb77d75306931d7169d2df353475adea309181ec","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.7-1.tgz","fileCount":70,"integrity":"sha512-7jiMWy7g7x4qIb9/aRcvC6D43rqAHx+gAbZMQJS3eHNQa/zjeLdJeQJ0/qAhtKRyi+fNVkH/eHbo5+RrkkpL3w==","signatures":[{"sig":"MEYCIQCkFg+HOE2UJbwWYajfljuI/todic5XyVcuFNfKCMFvbAIhAPyncAFfItq+Tvz4PT/cUFLjVGs7cTzsy7XEcbF+3Ckx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":770150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdH0CgCRA9TVsSAnZWagAABbQP/jYvs8wvThXzziXPfr+n\niSrAPoaiO8W0+MGPc7UyGu8CM8ZT31O7YyPcNQmYIzHZVFKWA7IDWR7DNRU7\nUiLo5/8lCYS6yVlMlueICQb8dAMqZRRtBMInL3l2BU2t/VIoeDTHjGobeC/W\nB1KmkVkk6iwkVYM6kfW5xMDA06ugpKCEWoXHq4prtOn2iIQN7ULOIrKBcR+g\nZOfCwPqNQhIt3tGvfZvgexh446K/MNwku2oIchXLVrRl3AxxNu1u5NkgEbEn\nYKKNv4SaiorHnT1L8eqH+cuwaC/qiyAlMHN/ZYgsZ+re3HloHT25CXFejcA3\nR2EEcB+7XX1Szmbio0VCS9cUCBEWYz4+U/yLu+cQe2OoLH0mRLTU85hicV0U\nTc5Y9JhFOzUj5xsYw9zZCvUp0YNrRrtAMawnK+/u8DW9MyxYHRtWjoZ7U2Js\nEF88sM2ZrhNN0k53/TfsmCiyoLH2bYTxn6Tsd1scwkxgTdElHmHl26TXXNFb\nVt6fvSwlW05xk/H+Bg1Ya8/ppQdVj2Yncsa6ROibLu+O+GkBHZjUAyHaYkX1\nxmed92cRgI/Ew+ZvR3ZkV3ywFXd1R5jKFjrdpANgiXVd4VWOnF4qhztfITm6\ni7v6FgZBF/GkwnvH9atl8O06Ji5gE/A9WrsNBLwBqFYrluMWjnO8a49DyffS\n/Skm\r\n=DoRN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","readme":"\n \n \n \n )\n}\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n## Demos\n\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n;\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n;\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript or any UI library. (For usage with Vue.js, try [Vue-Flip-Toolkit](https://github.com/mattrothenberg/vue-flip-toolkit)).\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n\n```js\nimport Flipper from 'react-flip-toolkit/core'\nconst container = document.querySelector('.container')\nconst square = document.querySelector('.square')\nconst innerSquare = document.querySelector('.inner-square')\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container })\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: 'square',\n onStart: () => console.log('animation started!'),\n onSpringUpdate: springValue =>\n console.log(`current spring value: ${springValue}`),\n onComplete: () => console.log('animation completed!')\n})\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n})\n\nsquare.addEventListener('click', () => {\n // record positions before they change\n flipper.recordBeforeUpdate()\n square.classList.toggle('big-square')\n // record new positions and begin animations\n flipper.onUpdate()\n})\n```\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change: transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"f9f0199198b01553473b37238dd1846797a7cfb0","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"yarn run build-react && yarn run build-core","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","build-core":"microbundle --name=Core -o=core -i=src/core.ts; node rename-files core react-flip-toolkit index","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","build-react":"microbundle --globals react=React,prop-types=PropTypes","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.7-1_1562329247585_0.35960971832075517","host":"s3://npm-registry-packages"}},"6.6.7":{"name":"react-flip-toolkit","version":"6.6.7","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.7","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"90ae60f7b7f784ccd6b2dbcb0cc38c07bcba852c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.7.tgz","fileCount":70,"integrity":"sha512-iu8j4OsVdwiID7JEoeQjeFfv6/DPyYU4BLfzzWcVNvAGm5aL6gZSERfBWbVI+MxjiSBxoYUxxitVKZJqUvN9zQ==","signatures":[{"sig":"MEUCIQDH4yi9dBGKnnD5Ffe0geqZNacaVBVZIyVBKiOflB0EyQIgPk6JghjvwahRoQlPYyH+TQFh3GKwN53T6If/9j9PU5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":770186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdH0MpCRA9TVsSAnZWagAAGv4P/2MLEpLjQXQ7v3KD/F8n\nZIxLIzb4J2923X3xDcPQ/a+McooLSq26s/J2FCTSMF903MaWa+xIO+QzEW+k\nHfd2DKkBEN6PD1wMMeqTuC4+nvCcRPeOQFAcc1U5veZldkYfWUkp0vfzHvy0\n5OVpWl5W35PVCEF4HEacT+2XNTKnZzkObcNIBk44GnIyCiGnF/29WX/EMcKc\nU7k/6zhlNH3J9w9//cK7IuDoz8arDAvX7UHaTsLH2DfOmo2ZrnJPLIoLExZB\nuX0+Xm2S8NCAfpi0lDi0jP1PTJ6Meuz1x/Z4bgCqIbgzP04kuUBPRO483DJl\nNRJWMzMOUUEVIHmPhmx2QKd7gomPkODBcGSwl/ImPPcYyLaKygCrJKKHgsG6\nvB9dNt38vnEw6nHXf2jufYaPutwVw1V4yDIFCMRV+nhrFx4gnOgE8T7yvqXb\nftVrrV5lBhZv+yEdQpaHcD4EpFQGCdYRiaGEHAItWEg2IVIEnvUn/QwU7zxi\nSyWIccM7Y5u0bTXD2xNv+aiLarR+u73jJxdWVPYuDhlSXGvgTYSljhJgkWHP\nexpwjRmPp/ARx4LLgP0Z9YqXby9JTdipYloFXqJsV13JtwqU91shGRuDdzRu\nedxemQTd0stopDgRof4NGcEvSFxHT1cKIE+LykDURiECuEXTIcJLjf3GQMK6\nQ6+d\r\n=HpzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"fda5c6692efa5e8132d2a634e8c18d816dc4ce5a","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"yarn run build-react && yarn run build-core","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","build-core":"microbundle --name=FlipToolkit -o=core -i=src/core.ts; node rename-files core react-flip-toolkit index","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","build-react":"microbundle --globals --name=ReactFlipToolkit react=React,prop-types=PropTypes","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.7_1562329896232_0.11384449978105704","host":"s3://npm-registry-packages"}},"6.6.8-0":{"name":"react-flip-toolkit","version":"6.6.8-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.8-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"05534657bd4a4d1edd598d0963407fddf8318623","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.8-0.tgz","fileCount":71,"integrity":"sha512-XnUd6yJnCx8xUU42rDULAau1bFxDfmFhoNgAagRI5gWlZaiIz+lVA4Ktv59d8LMnZVPejYWHXyhgyJ5AhPqlwg==","signatures":[{"sig":"MEYCIQDY2sgWJrnsP+OCY7ZhdRHlIYMSuAhcz8OmXuG0HC18ggIhAJ+tiWr/URyyE0OAKu+Ch9WJW2/bLVQByQPwixpcRQQl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":791354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdH1GFCRA9TVsSAnZWagAAgk8P/RRhm02oQ6pDD3YOwk5Y\nUDaU+d6lSQ3S8DSf/k2uCWcRYL5+d1isk90uVe7WRYpozM/ycHgtswQMAWU7\nxCgYUwJIAHUTc4KihJnDNX56PtSQL6hJN37sIW0K5FM/H5aIKIL/X0x3Jelx\nNzJmnCGAHDZLpLKTWTl0lHuSh0HXKDgrT+hKntZ4jhsp34hS7f3/jr5dq1J3\nt4mvPz75OKjyvEtCNv7qgx6e7UIMamp2gAX2VHRKNXPPxkrPVRBUVuVZ6vFT\nf6jBInoRmtuK+sI1ZSlj8qLsPYw6b4fAgXDrTY5IrDFPb6idI0SFXDfxBRgA\nYv99Lo2o+BcSmtO+mrocnmQdVYjGXkc3oj9x9xxwtoUdlD7F6DaEM2TOwr8g\ncn/Wpx6CnQD3jNA/DQ2hLioL6T4RHL/5Qcrcer9ROJtgcrWqm/c4083H6t2B\nSBJqbc1VVNLEsiAq5kABuIDzrlxJKiGQ3a+bRo5mYExIS3vOxRO+45Qb49hm\nq4bqrbPdkH6bBCtwKUB970Fopz/AvKG7u2lcAng/jb8hgpK+JjgYuzISHUMS\nLrWIyJ54CyAkf/Hl8bvPCSY4+lQbdVPFThEQ3TKNQSJRSVv3K3fgY83e041j\n++8tgeOplfiBxZjcWQYHX8Xfx2/Gx6xq1/kq5ayfYPXFuqKLFFJbmxIkqucl\nrxWj\r\n=DdMR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","readme":"\n \n \n \n )\n}\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n## Demos\n\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n;\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n;\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript or any UI library. (For usage with Vue.js, try [Vue-Flip-Toolkit](https://github.com/mattrothenberg/vue-flip-toolkit)).\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n\n```js\nimport Flipper from 'react-flip-toolkit/core'\nconst container = document.querySelector('.container')\nconst square = document.querySelector('.square')\nconst innerSquare = document.querySelector('.inner-square')\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container })\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: 'square',\n onStart: () => console.log('animation started!'),\n onSpringUpdate: springValue =>\n console.log(`current spring value: ${springValue}`),\n onComplete: () => console.log('animation completed!')\n})\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n})\n\nsquare.addEventListener('click', () => {\n // record positions before they change\n flipper.recordBeforeUpdate()\n square.classList.toggle('big-square')\n // record new positions and begin animations\n flipper.onUpdate()\n})\n```\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change: transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"1166c0db98db301b2bf4cbf2c02ac195ee02ac5f","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"yarn run build-react && yarn run build-core; mkdir es; cp core/index.js es/core.js","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","build-core":"microbundle --name=FlipToolkit -o=core -i=src/core.ts --globals rematrix=Rematrix; node rename-files core react-flip-toolkit index","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","build-react":"microbundle --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,rematrix=Rematrix","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.8-0_1562333573038_0.3497424555622104","host":"s3://npm-registry-packages"}},"6.6.8":{"name":"react-flip-toolkit","version":"6.6.8","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.8","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"dae48799ea3c31b23101612bb9938a3e383d9a4e","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.8.tgz","fileCount":71,"integrity":"sha512-15mOobxl/9hpyfJJV8Ny1TuKoOBHnb20sj++NHXDXE7uTJ0brbal/k88QzQa1+GwsYw48GbEoCyMnN17CMl0PQ==","signatures":[{"sig":"MEUCIQCUUXTexoAvTFrBQ7iHEM1qhnjOD6Hr2IjKOmSHSPSsfQIgKcz+AITDgiERTF+EyevFwk6x/DwPOH8d1PF1RINgs/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":791363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdH1W8CRA9TVsSAnZWagAAEI0P/jITChsOXVST/LLlTTTI\ncSCUytlbbDhVwt3fd6aohptR2AdG0q9TJ/Riu9jQUVKiZEfkQAs+fEQB/XKO\n71mHSIFHS/nPA4h+Vb5Pit4PGHpelPd6bB19ZVf0UUjRlTGkFs7WwVrTlyCL\nedW310nKlFuDa5yPWvHzpDAGqYI4G/cP0z44OWdR4yt8B/elepvchwDg56HN\nXU+MEnsFi//brW2Jm+mvqqMd2QhXddlX//iOpS1nCZ4yqj7JBdcRBo7cF2hd\n0qiJjAlYVN0UTn1b7WslsaKLCZhIbPZkGScq6KSJ4KPvU7gyP1UhmUDRRmdS\nf5ahzBlgVGx9dQze2YPfsTCV+ANXO1NnW1aLU2++GALYnnSff1U2Jz5RbWxk\n2n2nAmtd7qy7/OxYuu01VhgxdSEz67Sl+yX348z6grwCL2MAMkx8QERfBH8a\ndVieTxLRgQ6YfXH6sFFLYhvkn2jWaofoaXwJg8LafiYHbatwIfTGGfZr0dYm\nKN+TMVgniH4z7Xq/GNpwhnRi6p7xmO+FNSFuEXUGUPWmDYOvNrbRDQrUm+1d\nL2oyhP3sHqZviO1hQVJwr2gAiFBmbKcbrBGCQkvY5SJclIR9roADDA4qhOtc\nim7pbGBaRdg4vlBL4pDjsLhWFJrLdfJV9k8/L+GZOR51s5g/gdJERTmrkbu+\nfL/7\r\n=FxKX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"b2e2e5eef3711c21fb67875ba3c88624dfefac23","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"yarn run build-react && yarn run build-core; rm -rf es; mkdir es; cp core/index.js es/core.js","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","build-core":"microbundle --name=FlipToolkit -o=core -i=src/core.ts --globals rematrix=Rematrix; node rename-files core react-flip-toolkit index","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","build-react":"microbundle --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,rematrix=Rematrix","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.8_1562334651314_0.802628702060334","host":"s3://npm-registry-packages"}},"6.6.9-0":{"name":"react-flip-toolkit","version":"6.6.9-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.9-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"e5b9c7f1abc03cdcc99d20c326b14cd749a42cd0","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.9-0.tgz","fileCount":72,"integrity":"sha512-S8X/Zg+qJp9n3MW+9IQoMFJWXadz6355PMKl3NXvVcv2xoIyvaYJBscQiDInRkQrGg00w4jde9/bCgIhDpUFLQ==","signatures":[{"sig":"MEQCICfgvYthWS++ViDLQEcRrmqF6Udilb2XubE3mBcHJVPMAiAMiv57r33GZ0FgKEauOz+Ra71O/tBVzz5LNw7Y9oai/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJHKcCRA9TVsSAnZWagAAUxQP/3as02Ri2XOzKK65dBGe\nWrseXxB3OyblAsxbos5IZlOp7idm5JR3z3N1Qzxfi8n6l9fxovWBHC47XWLJ\n4Jh8CTXsiHko/mmXA53yxrOIYJ4FEwj8VQIGJ0epg3Y+sZwQyukCdX8QmRlY\ndV81xnGe2AjhSpt4ic7Y6vCGyrRSPCCLDjQA4aoykHc8lol82j5nM28C+5Sb\nXavhO+HelP7PZ4b6B6GL4PlP7AaZfRUSGcgyeS69LosLkLArJKEXGUJ7Mt7P\nYiaPHeBuDhZXgnruTcEsuQKCkF53xlYL6IYuu+LntrKo2aNw5thPXRgppwCe\ngOdQMpTAgDckpSfauO+lKljprXwdcl42rDizVysS8OXVpkqKO48WmCsETGGD\njdb+CSHaorxEblqtw3kcQbr7bcR3VHhEX5g+abKa0NflRS6Miq6IQtqhty/Y\nZiIRtsQyPC9BB/+g056bPHNVqt9b9LP45nC4cOKNL5/bea+ddtEEl3dRCR/g\nuAWsxug0bjS9BoQfDTvu06xw2mQ8c2XLxNotGt+xdY35LdUnozfZp6XRNLUx\n6RaudfFIxXC04O5ihNW/3XbI0LO5XT7byOxEuIMU6wHCS3Asso37gXV5kx/H\nWPRuwv6ds4kBLifikTEG7zRo0k39xGAvERyK1vrVqwKuMa/imuryzylPfVkh\n2C3j\r\n=BPfy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","readme":"\n \n \n \n )\n}\n```\n\n### Example 2: Two Divs ([Fork on Code Sandbox](https://codesandbox.io/s/74q85nq1qq))\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Example 3: List Shuffle ([Fork on Code Sandbox](https://codesandbox.io/s/14v8o5xy44))\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n## Demos\n\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| retainTransform | false | `boolean` | This performance enhancement can be set to `true` to retain an imperceptible `rotateZ` transform on all `Flipped` elements after they animate. This persistent transform will prevent the \"pixel-snapping\" effect sometimes seem in Chrome when a scale transform is fully removed from an element. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### 2. `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n;\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n;\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n\n#### Callback props\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\n**The DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.**\n\nThat 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.\n\n## Usage with Vanilla JS or Other Frameworks Like Vue.js\n\n`React-Flip-Toolkit` exports a special file, `core`, that allows you to use the methods from the library imperatively, without requiring React. You could use this with vanilla JavaScript or any UI library. (For usage with Vue.js, try [Vue-Flip-Toolkit](https://github.com/mattrothenberg/vue-flip-toolkit)).\n\nYou can refer to the React documentation below to see what options can be passed to the `Flipper` class constructor as well as the `addFlipped` function exposed by the `Flipper` instance (which takes options corresponding to the `Flipped` component's props).\n\n### Expanding Div ([Fork on Code Sandbox](https://codesandbox.io/s/5v1k1nwz8l))\n\n```js\nimport Flipper from 'react-flip-toolkit/core'\nconst container = document.querySelector('.container')\nconst square = document.querySelector('.square')\nconst innerSquare = document.querySelector('.inner-square')\n\n// the config options for the Flipper class are the same\n// as the allowed props for the Flipper component\nconst flipper = new Flipper({ element: container })\n\n// add flipped children to the parent\n// options are the same as the props\n// for the Flipped component\nflipper.addFlipped({\n element: square,\n flipId: 'square',\n onStart: () => console.log('animation started!'),\n onSpringUpdate: springValue =>\n console.log(`current spring value: ${springValue}`),\n onComplete: () => console.log('animation completed!')\n})\n\n// to add an inverted child, use this method with\n// a reference to the parent element\nflipper.addInverted({\n element: innerSquare,\n parent: square\n})\n\nsquare.addEventListener('click', () => {\n // record positions before they change\n flipper.recordBeforeUpdate()\n square.classList.toggle('big-square')\n // record new positions and begin animations\n flipper.onUpdate()\n})\n```\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n \n )\n }\n}\n```\n\nto this:\n\n```jsx\nimport React, { PureComponent } from 'react'\n\nclass Card extends PureComponent {\n // everything else is the same\n}\n```\n\nRemember [to always provide `key` props as appropriate to your elements](https://reactjs.org/docs/lists-and-keys.html), and check [the React docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) for some caveats on when to not use `PureComponent`. But if you have complex animations with noticeable lag, think about giving `PureComponent` a try.\n\n### 2. `will-change:transform`\n\n```css\n.image {\n will-change: transform;\n}\n```\n\nThis [somewhat mysterious CSS property](https://dev.opera.com/articles/css-will-change-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 are animating images (`svg`, `jpg`, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating one or two large images, `will-change:transform` increased animation frame rate. However, trying to apply it to too many components at once (20+) actually decreased performance considerably.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"fddad929054425c499fa5a4a67ebffda7aaa3993","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"yarn run build-react && node build-core; rm -rf es; mkdir es; mkdir es/core; cp core/index.js es/core/index.js; cp core/index.js.map es/core/index.js.map","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","build-react":"microbundle --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,rematrix=Rematrix","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --globals rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.10.0","chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.9-0_1562669723770_0.6229962314919724","host":"s3://npm-registry-packages"}},"6.6.9":{"name":"react-flip-toolkit","version":"6.6.9","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@6.6.9","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"43aebc081f4469456c51a66cbf14a75247408a83","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-6.6.9.tgz","fileCount":72,"integrity":"sha512-0q0/zn0r2an0GfW4TOs4oDHO8ZtWXi1Z0+104m5Z/haJskkLvCqITFfoEmFN5c+NH7qa01c6UyBd2IhupMhxQw==","signatures":[{"sig":"MEQCIGhXFWmb2C8fdEX5Z7tQQdnoIwT/lLPFxNNuKZbrBx7xAiB0uAj2YYSLYuHSXCjgI4GXgvEZxoF6uboZOvh+wxs03w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJHjKCRA9TVsSAnZWagAAWV8P/2MGznTmMZn9xlrAWhh/\nSGrV8lJQASa6RYNn/6U9wNlQUCtdzhLoWxoHWiCUzSTjeDDw/KjS59xUHIDG\nKh6kt+FwCxqhPrm7taYv6GYMg5MXbyDhGz1K4GSWNSnuzaHTePOLvu9NvXgc\nXlbmPLzKhukLNGgFQq7aI5HzmX9rx8K85sGgHis0AMN1ejSZs4IQ6z4pr/w4\nBvAPUTrlRkdRqNYh53R/BYO5cnBio25dC2JnXh0QIUD4GmOCncUQCSlbEgCS\nJisNrLHrEYcsblGed/LIw/FRR6BAnAogx/v1wlIjy56eo7hS6fohGGxd/l+5\nNbwP9TpK/K+jBJZfa3PWQOAR3GQ9M5s+yGt7EIau/oyYI55ls6JVGdcDpCl3\nSyuNgBoKKQ/6S5BeUFnU3gnmctqqDMv73IJ1jCfooNvavbhBh1kTAvfsXJYu\nQdioRFSII31NjLBrD91AmFioXUjlBwvIZJ8rLBUY1KCT005xZWZsrEc9BpGn\nFO9AnRUBZJrfxwEHGRoIwPelVG3Pc5XapR288FtBzXxHyxhs5eoJVgcRgyMH\nAkvR4lBask2rvA0Uu9u5u/z8PooNPhjY7yPLf6r184JzkQYG3Ziu2z/DLG+E\nyv/EKXzZn8SsM98c0FZGnCdHgeo9VvtW12C7rMfolwbsTLM1fJdJeeoUCMOa\nqKLO\r\n=TiyJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"b292af39cae74b42d7ab5bbdce9eed4e33f4b9e4","scripts":{"fix":"eslint src/**/*.ts --fix","demo":"parcel --no-cache demo/src/index.html","lint":"eslint src/**/*.ts","test":"jest","build":"yarn run build-react && node build-core; rm -rf es; mkdir es; mkdir es/core; cp core/index.js es/core/index.js; cp core/index.js.map es/core/index.js.map","start":"yarn run demo","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer umd/react-flip-toolkit.min.*","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","test:core":"parcel 'src/__tests__/core-test/index.html'","preversion":"npm test","test:watch":"react-scripts-ts test --env=jsdom","build-react":"microbundle --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,rematrix=Rematrix","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/src/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --globals rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.0","chai":"^4.2.0","jest":"^24.8.0","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","animejs":"^3.0.1","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.4.5","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4"},"peerDependencies":{"react":"16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_6.6.9_1562671305807_0.2619212761368388","host":"s3://npm-registry-packages"}},"7.0.0-alpha.1":{"name":"react-flip-toolkit","version":"7.0.0-alpha.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"e7a23d02dea7e620a0d05802fc2572fd8db1a5da","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.1.tgz","fileCount":13,"integrity":"sha512-iT1ljvCrXvmOD4nHK3MsnvQ0GXzhfLNfUxnKzYEkTKH15vrakIayfnM88Pfa4/YbwoJzicDLrYCmNL9Mu7UWOg==","signatures":[{"sig":"MEUCIFHbwA17qYsj8KNC8GzOd/AIVzCSzsZS5hQU7gDvIQOvAiEAnzqmBiXVtsXA2IjuG+ndcL3QjLRKgjYMoXVuWxGy0dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTMtkCRA9TVsSAnZWagAAF+wQAJo/LpDda7JvlYXtc890\ng6p47hMW9IW6mF7i3UuwlgVfjMa4HVEVxufZRWw5NsMx/U5eMSpCyeuSO9Ix\nmu9M6UreI7TL1kJrONbNXT9s9VCgVmQFYOU9TGU0hkdQs67wNx3hRQkYTD1L\nHvAsHbz8R/WHNzr3G7OVmnIGH7DMm9wq1/5B1AIJAt/4Gd34kO72wS85k6e0\nn2FSQD5vG7fuZB2IwMyLS5aq7xkuTHb/XsR43F75lPVbTUDZibMHoYYc6XTA\n+hiRfRrYSJB3NJo1LHzsxnF/zlaeE5Ms4jvhFodcFl6puAtV2mp6dszzkDu8\nvcRd7l6XqV/JkmNl2LPhvUvpHBj4ZCPCO9h0b8Xg08U3K+FRvrr/DMBd7iqz\nmD+WAiYZDo2ssudUuG7pRYTvgADL3AJEW39reShryW7ensj2nNhV4SyFUiNZ\nfE6oYfsxMAG7TjgJEVA2U/S5kMjszBua3bBUuaqY9oQGOCb0OjimqMulY/6H\nGdpXKI+eQ58oOiXJilr5jsMwHp0r7LAxlwoUcyx+CanZpjRsJj4HPxdTZq/8\nEqEBWCMb9Dgfp/jUrYtTOtQEXslymlM7sKP0BCFpxGZbvbGZd6vmJ566n3x9\nSMf0ISf515Ub2c0r8JP2ULADjszi4QkT1Z/b2lLDE/OmNAs3/mvmSupqZTFO\nwlhD\r\n=QK18\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/react-flip-toolkit/types.d.ts","module":"dist/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"dist\"","build":"microbundle --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","start":"parcel --no-cache demo/index.html --out-dir demo/dist","watch":"microbundle watch --no-compress","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer dist/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/dist; cp demo/dist/index.html demo/dist/200.html; surge demo/dist --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"dist/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"flip-toolkit":"7.0.0-alpha.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.1.4","react":"^16.8.6","sinon":"^7.3.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","react-dom":"^16.8.6","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.0","@types/jest":"^24.0.15","microbundle":"^0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.1_1565313891425_0.3334180395632196","host":"s3://npm-registry-packages"}},"7.0.0-7.0.0-alpha.2.0":{"name":"react-flip-toolkit","version":"7.0.0-7.0.0-alpha.2.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-7.0.0-alpha.2.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"afdca8ab9dab439659a898dcadcc4a9add952a7c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-7.0.0-alpha.2.0.tgz","fileCount":45,"integrity":"sha512-GsSCYlUBKMwUvStIfFaNkrDu6nTe5y+EmTTxIoJP7Oko2HIk5oZSxZs1Hlf+8P2mLjtwPI3gxDCpZRpDjCbzDA==","signatures":[{"sig":"MEQCIGXg9AsC6YV28J2cDbiW7cvDHOduYNmYAcGXAXD6Yh2BAiAfNPFjwFn5c3Gfn2hLlCy5mMHTekolMbHaEpKue+P+tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUgTFCRA9TVsSAnZWagAALfIP/ii2eU2QKrbTGJ9i6hRf\nHjeipf+ZaVXpiKRi+R4lUnfzuFlbUvzjzcRqKb3oaNo/ok+VpVhO0EdJJTLW\nTqfTZRfqssShmu7MC8I0pUjnFLddvEpVVzHKgyseJnoVhEFJL4h53wTHaQxp\nvNI/k0VX//JLhaJ4XpxuEuzI1bmDiUjbYC1fq1MGY792hrvEsJgF8m0iNLwn\n2nnffJ/w9y8y6nYHKSlZlLdU6oWBhPNsqu3JZOcVU1fY4osgRUt8I8ffh0pu\nYGbVtDkyreJHEfA6prLapiVs208CBv1L2+miO/j5tLnQoSmK8g5O4axWtIBz\nXRYbjvO/I0Ts2mz0dHHbXACHqlFN0+RG2+bhFYucs3aP83mJALBH85zklGl4\n0vNIgY/dyxOSsCrA0RpKthZLeBxaWEWO/X1Nj239bnh57/AB5h7iAvfvyZ6a\n+PpLoNYp1ISUfbGF6vBAByDwQysWbXUYXA5Kctbdztn7Xxh4LRykL7gkBBoP\nfFMqLkUXbl+zQy9rG9goJby/J28gegZLFZ8PFseP5RG32IpFWLV9eEyK7PFL\nMQOQGhExKh7X/wbzrKpnwb4lzN7XLFI9x0LmslWJgwA0Mig6hQY+DyK5YS+j\nSJeM52UXKxvh+LpjNAgglMiEG7oKzAlAOhlACH3P87irs/x1nOv60Nxvo1OA\n+twY\r\n=45e2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=10.16.0"},"gitHead":"69b0e120058de11256627e739dfb5d76cd07a673","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.16.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.0","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-7.0.0-alpha.2.0_1565656259894_0.803343978426782","host":"s3://npm-registry-packages"}},"7.0.0-alpha.2.0":{"name":"react-flip-toolkit","version":"7.0.0-alpha.2.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.2.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"5b345388fa70f85b40a32b8b8827e62c30037a56","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.2.0.tgz","fileCount":44,"integrity":"sha512-BQPuqKgt59mqe6RXXqdKMYoFi7HHOyNo9S3tger9W7FgilL+6I8Hh/I95joPJgTLVE4M1WwxsOo/uz/0EIlS8A==","signatures":[{"sig":"MEYCIQD1JK9q/yc2NW1suhTcROsTrvMhyhM37kTE4PDd5SNdKAIhAI57UeUKD8ASnTdVxwa5uirAHMPdS4sepYOwrjIsUefD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":525144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUgaLCRA9TVsSAnZWagAAFNsP/AixY1ZLl3wkAMkuSiSk\nRu4mjs2rOOijExRa5JcsHr6KUJ6f7epb+NdzeY/nIaUXCxRn1Ylps5RODtA0\ntYZOeIKEF7n217ebhjttZwVATk70bTA5YrLBRAUB7+gXzjZyuL2cN76ulX7w\neabW2Io3kUFZ2+z9nc5r7NVttImffxkx6NURPSMIyPm93d8KzqmXZ2njJwOv\n5yTnGw0wVxNGEn/7oIN9JjCSa0ZM1yz8Lkm22sXtpxl2kHsINPVdQbw7soGJ\nH1P07djPAevjGe2PuKoZhs7Mg+u9npfwMzAtGL0HpWp5dYLeVz7zDGJuAlq+\nC+m6vi9BrvXaKT13VhDb8ul0jXRV3HyLFBb4fewLf/2uFEcCFPUSMWHD0x/s\n73Of9avbqfLMyi6SeW6wc+4at1YIkvUnJi40Q77/tfDDVWrhSucxY0Q/Vc8r\nI7YdnaIAnO0I+wpHx4bshN19R8sv9oJXD7OLsA99jcZ/sE0aZWa3A+bG5MDT\n+8yH/ncRSJGmXnklwHS8TrPN8LgT6xjFVOztZ4hRcmhTDZJvUUnqp5m91bMd\n6e3+JHTfP1dK3UKEEsuJKGMzGiNVaizpgeWbKn8a+lM5H0vh7Ydwb7CoEN+t\nHetiL1CP4zWq/Zs06IQ/ytw+BuTnCE81nGEtCLjpFn60siLHicFevBxF8t8e\nxprC\r\n=fu3p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=10.16.0"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.9.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.16.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.0","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.2.0_1565656714664_0.7146024228252557","host":"s3://npm-registry-packages"}},"7.0.0-alpha.3":{"name":"react-flip-toolkit","version":"7.0.0-alpha.3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"431b19319cb1944d1205f1efed57859aa0abda8f","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.3.tgz","fileCount":44,"integrity":"sha512-KHEkEj44SHXiUCieJSEnk9KbCcKpQA6EpaKDjeL2yB25D2jmanxUjO1n872+mOUGdHNt05o8OsuE0Gub2s2GUQ==","signatures":[{"sig":"MEYCIQCjqHnloTG8VSlEz1ein8xIqA0RDpWcNZAy8ySdVS8QNgIhAOqTt2LL5ff6WpNJ43NsSXKdJ+M2B8cVvOhyZVyvWtqw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":525193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUhaUCRA9TVsSAnZWagAAWqEP/2jX+YkZmrmVe0qFQPsO\nvlWnDPjbgb0lAlKGL//FvfH74rBBuKpR/36qflzoyHJKrmgklxIgKAXqLrHU\n0PVshJouAQ8++IH5eXjFSgSLWDaY6lFTK1P2Z56Mn9Q5KZOJQpP0LqMk4AYC\nmTLFE54H+InZl9TJlxYqzZ4BS6CAIYQuopeHMDMIdWb6sHVxPX4OTvM/bPyr\n22r9xOEBQoQbUXtm3IwAf7GzdQxWTslyww2BmTmspmQDbt0TZYhGeUTyddh7\nmuPOJC+TqYHGhJ6RR5KM0tJ2iivWryFz8B9/bxh76UbslFAKJEdn9Dh+O+SN\ncGRb/HCFdukGyyu0GrGYRDJcJjzrNZNjn949dpDxko/hZi3q8wMcOPObw9DD\nWXmNXhfwOGCrm99rTmrVwNaT7IKbW0YU71U4IlO9FBCN09TD7X51zp7DGDJK\nL61YWV1K+SoR4CPenupVpBSfeawd/tMRVAOEZpiNTt1Y4IHFW2PASvdjwUxi\nY9nJACiNnNUCC4Q84QxAATC3eNOm1oyeWdT6Rh0Rc9/jI0NQa/BP+fQRwYVb\n3HIqX4nhw+AXWVeLm+QOyyX9/TfTyX8jiU5i0eGbsqAj6u44T4HPSXs1mah/\nAa9GaPNn85s4TWoDq6h66TAWhfMScxsicHkc77kSHktIyPtDS2uZtjawlMKf\njQO1\r\n=YDlB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"ff5161e2866f9b1509d16ca63f6406bcfe9864f4","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.9.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.16.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.0","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.3_1565660819426_0.5799075161819034","host":"s3://npm-registry-packages"}},"7.0.0-beta.1":{"name":"react-flip-toolkit","version":"7.0.0-beta.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-beta.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"f1540c837078d8bd62910565c933ed8b1d5ae6b6","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-beta.1.tgz","fileCount":45,"integrity":"sha512-KmRkJW1Ah484ShuvreDSGGPqP9SjvDnl7BXkgqDpG7xNPKxFRysGGMEMGZEfpUmC21NaaTDR3mB2VyH0dI71+Q==","signatures":[{"sig":"MEUCIEpa7+nA7UdqI0QEmls01QRyA1XG4bjfshYZt6CFf6/SAiEAkiA6NSb8RFu28NSWeWk6no6UjTyAindM4GYvNDIsCiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUrutCRA9TVsSAnZWagAAhtAQAJB0EAqiDOZ61jpRlr+T\nlBVQ+bINb3EthlCjrYbC4TOjfZR5SGLJ3MTzmvyPNmgmrBOeR4y+XPF+7Yay\nk6TNz9hG5ALUCMjRlIVnaCIJT/SVQy8+z2vvpmYTSGCxSTDlJ/uGlrfLON91\n6w23PdOXGRfVBO6EZ6i1j9L1/F+z+4flJLORs5L/wTY6bAM4E+mDH8+Q/2ap\nsFhyZpiGlm2eUvaxeCE1sIbaOX8JKnhRR/0jnTn3RsNbZcrECumM32jGr5H/\nO5eKKBxR4l97zpMsFTIdDs4iSxcUBGEz+Fs1WwstZuyxYUySuzQSXq4iwNpk\npN2lU+q+ueNVoc8C8DNlrCmd/73hwpdFa7NXCU+5B0WrYjrnF9Wty3yRalVH\nDQmBvEOP++W6agwnfYRUGPQiL/v4yfTW+RRsytx7vKxs981oSd5sRkh1ylnr\nNX1WyNLobPQB01YF27Sq8jWq5bM/G+wz6dZCgkmQbkjsy0sFD2ApZJgYB1Pd\nD/YKf4F5UqCtjhmMPq8Bzf8OEZ5SU6qGy6Q2QLldyP4uyhs8fgcB6QJfafYy\n8brSwSO/DFHu9QDsGWskNhRFW8R8WE/YiBC+AKGf4oIxPn+TiCKGkjiafuAc\nQQU6/9L+zn23uUxhdWxirYoW6VmQt7yDsQGg3EbMPQ/9RuUVIhw+PHAHWxUq\nOUL+\r\n=Jvcs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"c677dbee6e48d29e457300be421b935f2e838a12","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.0","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-beta.1_1565703084635_0.47936162316158737","host":"s3://npm-registry-packages"}},"7.0.0-beta.2":{"name":"react-flip-toolkit","version":"7.0.0-beta.2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-beta.2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"28c9627585321a1966f0246f7246d91208f1055e","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-beta.2.tgz","fileCount":45,"integrity":"sha512-DWXAgkVEHnDX0mDeD1mm1c0FSaPS8zcESqNWQy/MvHPn3u/z4TwnbHVzEMRsd+KCyIEPhSuwiEw3HHrzs9N4cg==","signatures":[{"sig":"MEYCIQCbfOmR53LFytQ22301+NF7kgeIvldA5kkDRURDftsnJAIhAOhqg3lX4pRSncIf9cACuT03Y+jLM/WzB1MPFe9S6AQe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUr4GCRA9TVsSAnZWagAAyzsP/3GXBIIikJaTdGlzglyy\nV0n16m7nSCSnC4gihA/6K/BtKoplLB2uXaYoAxkMCKSBkO8X0SgL+9u17eCp\nvsGESB/PEIGMeIcciUZqYmTlpFgu/QLCSsFZ7G1ThkFquBVJ5QR1FcmAa/ch\nrNzu130wLSSVdpDV/sZk/CvMGm3w0y389Du50a58hIop9pl8t6rICbVr297c\n+gfgUbo0dEinJYN5XD9XMG74zz4hVzc1lwCXtQiwe22F+HbazfvpsTGxGIql\nRrQKHhV34X8zGWGuulUr94AjGHfjKImhYrA7cJhCdWNTACPo7XEK+Ez6GkRM\nVJC8cLQbqCeYMjPPckqmvF8HKdwA7NPZrJrmtt71im/d4hzZazBf/2lvqSsi\nqfLMS5wgmGRZdr9o74h27QI2SxZwPpvlacIOlyevOJDPOUtp/5qhaFZAXpqW\nrorjXKiXEV2dcT3YBycElT+nnpjzUM6IOaXkljHmRYwjJHQNZ197pDDaBAt/\nrIL9OFajFXZ0OHk0daPTgRE/ZTkk+K1skjdj4Vj9VvrbVa6sVsky1PtE95Oy\nTZT3jNpKy8gKXXJA/8X1uKVSdrvxCxZ/9aVa/5D0qijEaoLrlOEH+tgqtr7G\nIDmStx/LQviKb54w2Usb5LPcyHDBAZDrydU1in5fJdl0bbT+WJuHv5pKYLSP\nlhQU\r\n=7xzp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"bffcf81dbf8f6b6e9b758c412fff59ef4ae8e56b","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.0","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-beta.2_1565703686195_0.10113743019632992","host":"s3://npm-registry-packages"}},"7.0.0-7.0.0-alpha.4.0":{"name":"react-flip-toolkit","version":"7.0.0-7.0.0-alpha.4.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-7.0.0-alpha.4.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"e2654841b57acf6631bff21ea1ef7dfc21efe831","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-7.0.0-alpha.4.0.tgz","fileCount":45,"integrity":"sha512-A5hdZeha0cGqDSoKFtz8rwTrxdJ+urQ5TtokJZZFE0IteHxXbxCFq0kfwSE7TlUpCBqo04FHonwO0KSFevvAWg==","signatures":[{"sig":"MEYCIQDlnPjSzl8CUtCslTYnH1FSM36GvBBzcbktOCRpw5L7QwIhAMwbSPXgRZAzxX6i6SXS3ic26ZSZAnFQVvsb3jH7cGKw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUt3LCRA9TVsSAnZWagAASO8P/jNN9uGv0FXGXzBjLyMQ\nc2hL0kDNvMSbBpGOP1hNBG2JADsxDETiVx03Ngm0LjV8S7BRpx4fmZ0fgt9f\nhntGHe/P9zbgCMQx8AbsHTAjf/eL830CiQSjaHP3CRb3hAc5LgKUlyx+Uxk9\nT/xVxVxS2RA2owVkTMzkuH651HbBhXNX7RRg9aC1y36GTD3+kGjmE1zfEc5k\nWiQp/5c7mPWCZik4ubs+HSMxLplibhHc0thkEexr2fet9V4hPTxGWlK8sPiK\nsG7ounJpM0RxmKs8RwmN5j6nCq2PD0L0M8eYm+IM2E9o+MhMzrA7Yt4vx0Ub\nYhcU8M+iK1boiqsDR7FbhH/N7Qy1XREvnSk1PdQV7QanJb75yBPXMSlqLxsT\nR9q9aa8C5U/7hgM6k4my2lEmM2NZffZZFpEth7YjlUWMiRW6Kjpc5rRS32PV\nu19yyJh+fdgbjsQG1Diq8kO9X3Eh3ntDH03A4rMYSCDQ7Ab3u47hozS3FFKj\np/K4zecl+WyXDPsddukffrcfmuO/UtyJa4Ch2jYpNEatMsirIwdwZxFf9Ccg\ntB6JCUxSpoQZEc8ksIYxmrPH8dz4UsdpG2CRyL6M0u17w0xshea0tCdShU1w\n6kCoMEN09JG1uJNwuu6F76mbkap1/7pvJHmDMYWCiMBWxpOQ7aZ6YtKIn3FA\n076m\r\n=A8eE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"60187ae6b1b366b40f06c6d98adf134a3d91235f","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.0","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-7.0.0-alpha.4.0_1565711818410_0.6081205113766266","host":"s3://npm-registry-packages"}},"7.0.0-alpha-4.1.0":{"name":"react-flip-toolkit","version":"7.0.0-alpha-4.1.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha-4.1.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"d2e81358a992fe91953861ace508a11d9d538f08","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha-4.1.0.tgz","fileCount":45,"integrity":"sha512-8lH12IaS5aTHQaBoXe8zglcoPXjESlEEpHu/MXypireEYJs+qqVO0IlWJuQBmODYFKKLss9y0IJwlFvcLbujFA==","signatures":[{"sig":"MEYCIQDY3lUhkmXhhg/ytremuv4j2ESDCnlhxQ1C/ycJn+AWXwIhAPESH6yLp6wyKppiKwv9bN+X7GuUpxellNsvgUKt9n+k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUvvwCRA9TVsSAnZWagAAo6AP/Axipi9Q4Bj//kEiHd3l\nGbJXqGram8bp3ET6hR8R6lRv5Ho2HjrfORX1Wl9uEQbRgcTZxQGP6ArUoTQh\nhdHZg3PqMIpVIe7q66tv63gndmFe3K6xm7TbvLoFTDxk6xJbkhlTyzNeCsQc\npCsZsA70aKyzUYRP1lCIYGPucrKgWJPSJ60VZJ2trXeOTKKBxUPlm3n+b+v/\n2jbq7hXt7/CMubCzeq01jRdX+lclBG45L/Zdsuif3wDICx8gKJytxmVuV/9A\nXs7WONAm/qJpJtxQlphx1Y7N9Y/KRIP6bR9wLwpMROH8GYHp8LEQcpR6y2Eg\nX7sFplJ5iVzf9j8y91dUSP5F9MQa+UDIb2DQHeW74PrhDnSL4/wwfqBOBnrV\nnanZT28z7wiIeRLky0G8m7jIeFD5NcaYc2gJWzwcl10E9u/n9jgFknDivdAV\nOzTSSm/O+SVFJPzJ2E00ijmSMrILcWN0oll7x6C5q7zE0G6Bzwv0kA2ycUyh\n4VaZ1x+VCigPoFQN4BF2vErkWiNaIwempIGYssgXEtrrOwwaAjJmc7v4CA7W\nJt/mzRyrf96S6rXL0pYSGi60ugz9EYxcEsFoHjjEL1gdVan2vUSlA9MPJG3L\nzgrbRK2aUjq1GcOK6MSpnk6/bsk+4RYv2Mj3vfIDNuXBb2QckQgdtVsBbs1z\nYlSn\r\n=y6jg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"67518665a8e8b67aaa31546d572fffa53e302947","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.16.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.16.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha-4.1.0_1565719535466_0.5220300631108046","host":"s3://npm-registry-packages"}},"7.0.0-alpha-4.2.0":{"name":"react-flip-toolkit","version":"7.0.0-alpha-4.2.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha-4.2.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"2857d228a8821fb16692348e5dee47386e7eaa61","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha-4.2.0.tgz","fileCount":45,"integrity":"sha512-NwJIn4w8ak4PYWV/kXKXG1TUXvsk53SYby/mP7bBKCy6FykT93RbeRDzWpiM+hrvseDDPYFwNwYaFmGSltFV7g==","signatures":[{"sig":"MEUCICCvamphqC4SAjPf8HlfiVgYPTe96JpnYVWEqU0iBZ4cAiEAxzFiKAJbM9aglR9FedQZ1vMf+XlMRPxZXaJLw4+y/8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":538285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVKn+CRA9TVsSAnZWagAAq8UP+waYD9XLJyydgfVaj/WN\ndwDk1mIDflPHg9+RlF7EOvb6BBsFL3XiAu5IHOdVLktjoNJy9uiFsvUrtAey\ngmNOvBi1MFM/OPgPJzdXcOsGRwM4zcWuPQ1ROlsTdrXUd+Aq4Y0q0HNFclA3\nhcThi0MZgJwNWrChLuw770sCUJoNPRw2vLYA/Smx0v6LV1P4m6Cq9YKW/cze\nVzJ6LYZB44hFUQ9aR6e/qpLYBEhPcP1NXCKmoAhnZnaDvJBOBKeBCHTEnoMb\nwWX6+1c4R7iYt/39mgPs3pOK0aaEq7iOasEXbJOMYt37jSWydTdsfB3iDXng\nS23sHf0H4+HRBgecSwqqY07B8iwlfpJVpBtqP+aEcuSjHDwKpVnby8ndMgF0\nlEoFczgpolMU/N5/8GaCWc1iINHYrowdGwWPM4PeWdkxH4HrTWVot7xOXHYq\nUdOXNtoqX4G9TFyA49XyfX3Ziho53S5hTsnl/VL6Vj9dK13xBZ/mfzzvEYPm\nSjXcqZbMaxe1t5t0Hy9k5ZhzOQNyyI3gNMY8C61sxRQUrWqLXaP1AAKYyk0z\nAMCm7hitRezwsM1j4i7Qm03Dkh2DLk/kXqLW0itxmgriec3sy/HXaFuwJo++\nCTncEe2zVf57SjOs4caZ/IKRY3EHI3ANwtOt7AxuvejxDmTM7wY95y3HxaF7\nrWaY\r\n=ezkm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"fd38e9194202227b08ef7ee78655897026a4e18f","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha-4.2.0_1565829629574_0.15911016883319506","host":"s3://npm-registry-packages"}},"7.0.0-alpha.5":{"name":"react-flip-toolkit","version":"7.0.0-alpha.5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"b3d1c1596f3ef1b7dd425b5dfb1a487df78fc333","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.5.tgz","fileCount":44,"integrity":"sha512-xOXx8U0AJJ9gPqkfCr3Ln3/fIp2fsRdw438lsFGuuCzzmMxyDkIMpngB49SGNaK4gZmyG8UB0FdjDHPwFE8D/w==","signatures":[{"sig":"MEUCIQDp5H6e7vh5EggZC0jkjB8+mhtuc6zVRHuvFmNmg6EqZgIgONFuS3+YhSphjAjI94Hr6v+kp1p6q23johB2oB1O2G0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVVtTCRA9TVsSAnZWagAAxN8P/1XSvj1Zbi/DvGJMDV+Q\n7ZG/NV2pMZG2M2AZluSi75zIDJ7gVEcDL4aaxYrCB4T/tEkzgJ5xhXqvPjL/\n1WKEzO1Tway8/qnBt40GsWoTB9lrFD6D4RMuzjMOS6RLwDkoVcy8gPBZD5Bh\n2XJorUBEM0E59jiOnljWqnBZH+PUHoOO9vn+frwkcU7mTrEnX0+f3ZnNjuuU\nlDwIwujfUuSGsQy2E14EFVLUm5PqRFEeWOh+WwGBSYRx2qEPoAyfDtjk8gpp\nEFlEJnpJ60yUl5KUgcxfx8r8lbPpxugihmeut8BgJZ1xCnzNCjFp9dipPkid\nGRnNlbjt55tF2pqI0GmaHDLby3PCHdi9++6B8RD24V5Z0H7kbwlyylKUTh3m\nJNkgRi6oTScWfjN39ADHd0hL2VSRuL3chRBdB9cyBX6DLZYpu/EfoL37GdNz\nq4NjM2vIPo+u+56w79zdK2BY1VC1D7QeJsww0rG3/tbcQexeuCDNxRQ2gWaN\naWI14QbkX29J1iUUReMCgD2uJvtfhTiFJ/cUNFgtMjJ8tvQ53NpyyAFGLmm5\nxzlv3yyNtXmH1Q7KG4jcEULiqziPHN/YAf9Ao1mG0UeF8XsBMiNk/R05UNEq\nH3udFg29krb87rwa+3QqYFPJeCAKpwWOIUDkgaLQdsRjNsvB7qYy5NofPXw4\nBoXr\r\n=osmL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"7dd0eb2219368adfd7ee4305a683c94d8d14e35a","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.5_1565875026952_0.43589526019398117","host":"s3://npm-registry-packages"}},"7.0.0-alpha.6":{"name":"react-flip-toolkit","version":"7.0.0-alpha.6","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.6","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"44ab1cd2f483b205e0a787347de2f76a50b9750e","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.6.tgz","fileCount":45,"integrity":"sha512-Dic4o3AeOJmyM+QUATe4f+Wpdn8jgt2/rBdjgKNJkAjsYZ+A34Ai03Ltk70QDrfko/W48tAJ4oRo9CvbbWHdeA==","signatures":[{"sig":"MEYCIQCsK1FVrB1eilIeqfHraGcsfa2wkNLQQH+QiHnWWY4rUAIhANf+9bbMyX4aYs48uPfGIrDs5Pqq/8llneF214u2Ww0Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVZqhCRA9TVsSAnZWagAANRUQAJ5sXpt4BbQSK9RM6+gQ\nJRJ2gmE0DobQw8ryBtScUFrDKh0qiHFxYpoLtz3babK+Uu84/ZMfPvxU0eEe\ny35iXKAcdEGeM1CC1QLcnH/68iWes744c5/L4M0HagJcCAo8xCk3Y6YJ5/cj\nx4Hy0hZJao7XJlhdhXOM730ZyHFAPKhwY1KwRlfSMs6c48bxOlmJqIeIcb5X\nFuDS/rDC0/s1mj6NT7OVW3/ChPLJUOcvBIlTpeIeaQaSK7UYqmINLoST4yHI\n2Vb9QxXv7O2d8Jr7JNiUl7qVRlIG+IkdJOjJjXZRFiF7iEDR7ypUftHb/Nqd\n3q+u9pckVns+RgosBP4e26LD8x/QL4vrIWhJNRsy3Uhrs+G/3XSL/k/Pd+3a\ns/sCAa4f9fdqEPVYVwCl0az3SvKWfTounG312YaHysejM4cR5nvSCjJJSPC6\nfIQiZa/aODD7gumViFUxAclcodchwGYa8OnNYVVrQLLJ9qTA2zZOrwDhGHD7\n8Ma6QrLPVbOMbMHvNXPzAN2s2PB70V5oCib4qxthT3Ao9YiJfAwZ+O/lVTXZ\njTTK7VMTjTw9rpz1OCB++amj5paa1fkK6lz0bdP9yqModV7vRIlYYJWILuvM\nSsb2pMBMRgZn3tuikD1O5Z8maZiFYVDUrLW+9aaLGCpcXiA3+omA7B6t2k7f\nnRF8\r\n=E+Cn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"cjs/index.js","types":"lib/types.d.ts","module":"es/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest src --testPathIgnorePatterns \"lib|domtest\"","build":"npm run build:cjs && npm run build:es","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","version":"npm run build","build:es":"NODE_ENV=production babel --config-file ./.babelrc-es ./src --out-dir es --ignore \"**/*.test.js\" --extensions \".ts,.tsx\"","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","build:cjs":"NODE_ENV=production babel --config-file ./.babelrc-cjs ./src --out-dir cjs --ignore \"**/*.test.js\" --extensions \".ts,.tsx\"","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","rollup":"^1.19.4","terser":"^4.1.4","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","@babel/cli":"^7.5.5","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.17","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.9.1","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.5.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.5","@babel/preset-env":"^7.5.5","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^2.0.0","@types/react-test-renderer":"^16.9.0","@typescript-eslint/eslint-plugin":"^2.0.0","@babel/plugin-transform-typescript":"^7.5.5","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.6_1565891233095_0.04022240772579422","host":"s3://npm-registry-packages"}},"7.0.0-alpha.7":{"name":"react-flip-toolkit","version":"7.0.0-alpha.7","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.7","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"a28b681570cccb9693bb076eaef2182b44f63a38","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.7.tgz","fileCount":45,"integrity":"sha512-b10Weuc1a5CcuUycHPwrBL0ce7Qmwh8kuGzxBbrcbA3o+pA9+5Wvxc9B/EW3ppXoezn88P7CG4lUciWjURDtBg==","signatures":[{"sig":"MEUCICIrnkH2JlbPuuUknelMGNbXnJTv1WwKce3ZG734/D/YAiEAvp3helM0stEfT82EGTL9dnfNzQ8dpLgy86O78WtxcIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":446180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVZ3OCRA9TVsSAnZWagAAnnsP/jWFw8f41gQPZu0pA6be\njewobfEh9dXsJVmC9seiloQSIuCemi5Pjrdi7XjGbNzWrhEzqRtrmLvdPBot\nAD1zwkynGHq2mCtocNtaBa7/LGVfLmLadOZWKLOoQeHJAek65G10ZvjmgeT1\nPNApLuA3ePKVg2E80yNvXGx+6JZuCCh7JxVIMFjmWBDsMWhrL5s7iQPNoNpG\nMNW8TPhviWygs9G/oHFdqfbPdLcsyXlE+RTQC3ZrbpTWIGW7Ab+jezuLVZ8K\n52wxzKBA9ZM+qlk1Snj8Ckow1AWeZ440aWXIExKQJM6jzgZBuIDKokaaJNVq\nl/rlNkbu0rXDdUKJR2rvTkSNG19OpHx5NBp6zYdJjkvEiqDkbOjkiyqvry0s\nv+ov6dxAml6+81Rb+mJ/SQaXN/NVmtNpSqyWGgeJcvVvziuq4+LxeEH1pMYT\nDKlJTteOksLYEZMoP/XZb2K1EJlHIAdvfHItgLzW8Nz7EXXj5rKgMgQnc3Fn\n7PQyhBINbnreUBHjdkBIi/IEO/9LdH1Mk9BQMy7w5sQtAldaqGIvn1cQDy9h\nnpf1y9dc8SxVyUOsyDV1M+OKShVlOqr0PhmhzSplz4dc6ol9XvuLE1ob0nxr\n/n/uWkbN7GvcsW2Yjohq1kjJqCcENlYDB29/S+WXdOOeouhlVXtMrRpxBgRr\ncbsQ\r\n=wlwq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"cjs/index.js","types":"lib/types.d.ts","module":"es/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest src --testPathIgnorePatterns \"lib|domtest\"","build":"npm run build:cjs && npm run build:es","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","version":"npm run build","build:es":"NODE_ENV=production babel --config-file ./.babelrc-es ./src --out-dir es --ignore \"**/*.test.js\" --extensions \".ts,.tsx\"","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","build:cjs":"NODE_ENV=production babel --config-file ./.babelrc-cjs ./src --out-dir cjs --ignore \"**/*.test.js\" --extensions \".ts,.tsx\"","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2","material-ui":"^0.20.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","rollup":"^1.19.4","terser":"^4.1.4","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","@babel/cli":"^7.5.5","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.17","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.9.1","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.5.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.5","@babel/preset-env":"^7.5.5","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^2.0.0","@types/react-test-renderer":"^16.9.0","babel-plugin-transform-define":"^1.3.1","@typescript-eslint/eslint-plugin":"^2.0.0","@babel/plugin-transform-typescript":"^7.5.5","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.7_1565892045335_0.2408159769323408","host":"s3://npm-registry-packages"}},"7.0.0-alpha.8":{"name":"react-flip-toolkit","version":"7.0.0-alpha.8","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.8","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"ce57b443b4175516f2a7585b56412e4d9fac542c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.8.tgz","fileCount":92,"integrity":"sha512-210b0mY/71hdslKx54dPgD0ikJaOvGOY17GN2YwMRy4DMbb0htZrL/QI+mTuwmXnMChjN1QZCHQzGHtj4K8SJQ==","signatures":[{"sig":"MEUCIESGoDcpzxxPu4sDPcb8zw3Mk9Mas3PWE48a+m7/gKDRAiEAshdTqnZHdcoRzJKu1TLi5quZ9kdF+X6rPo5L8/G6/Jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVZ7DCRA9TVsSAnZWagAAXy8P/jEBCgZQ5IN578t75o+4\npURIOmCOOWiFMNeGA8/HwSDeGEfzeVibFKBDwhg9WVH2H9kJQ/9tS7NAbWqf\ntX8g9tsHmiOVgrvr8XxGqvV5+ReDo7XRVznIoTsh6Wb2rKYvoFyVf1F4MmqZ\noQxUfkNjEyXgE/CRPydr2RU5kHQt9oYQMsJah7br/FsdYmQ/BGfr/NQ2HEj6\niecQGGI7ID2XnHZtaad9JRdqO5PgrWION3C8adUaF2hnof09c7BEIy1yBYeN\nCnjILxQd1AhcGo8jWmqxY4nDLPwJsy5L3cFHRjvEgbdmByDT55sYX1g+oc65\nXQNsX4yr+4wsPD5mf4HCYlJFaN6og2y8M6Fu2QcjFJcekVejyRKTBytA/h/6\npF3yXmXbvKN8RjOhJ1zMcwlKh55m1GWUl36WGzwzZbkQv3inPrznRn3GUQvE\nbDexEyIVYlPo48dSn14vA5WyH8R3NEyuw+3fHNsX8rRrWNPw9HkTiqZy+ugT\n6FaBWSNnomnuKwiDQlCXaPIdqpzs2Dlp9xnSf2peVyZDeuZNWA5V0QcGutbv\n8ByrxmKo6wvgFgfwsrcxzQyBm2T91hED9KTNNHZts4rcM88o5sq3ZuIwnF8x\nBSgqawTGNTaPDE91CRcJyRHeorH5j1fUlQNnsWlWsLaY+ju+DGa/o81SKZ0M\nszP2\r\n=J5dc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"cjs/index.js","types":"lib/types.d.ts","module":"es/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest src --testPathIgnorePatterns \"lib|domtest\"","build":"npm run build:cjs && npm run build:es","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","version":"npm run build","build:es":"NODE_ENV=production babel --config-file ./.babelrc-es ./src --out-dir es --ignore \"**/*.test.js\" --extensions \".ts,.tsx\"","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","build:cjs":"NODE_ENV=production babel --config-file ./.babelrc-cjs ./src --out-dir cjs --ignore \"**/*.test.js\" --extensions \".ts,.tsx\"","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2","material-ui":"^0.20.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","rollup":"^1.19.4","terser":"^4.1.4","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","@babel/cli":"^7.5.5","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.17","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.9.1","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.5.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.5","@babel/preset-env":"^7.5.5","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^2.0.0","@types/react-test-renderer":"^16.9.0","babel-plugin-transform-define":"^1.3.1","@typescript-eslint/eslint-plugin":"^2.0.0","@babel/plugin-transform-typescript":"^7.5.5","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.8_1565892290443_0.21188242998383466","host":"s3://npm-registry-packages"}},"7.0.0-alpha.9":{"name":"react-flip-toolkit","version":"7.0.0-alpha.9","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.9","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"997ab1ca4aed4f5c2f423890bd5775edd4e9d21a","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.9.tgz","fileCount":103,"integrity":"sha512-VseAu1h6I/DR6DtPQZxHtRJ5mtx0QLWCgv8IjuelKUdS1Yr2XpS6CjO6NU66fnestTIMrJ61HvP5JTVqpgsQPQ==","signatures":[{"sig":"MEUCIQDYXVSbfiSrs8ZsJQl1namB5ENQMa6ursVj+N4aeTMGawIge8pQuzNvbUtoCc67v7D2KP0uIuI1hp1uoRS9ekmA6oU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVZ+5CRA9TVsSAnZWagAA3GwP/1+6ZJUVxX3JGIERzEIb\nz6k+XnHF7uvw5DNkFuBbO9gfX8d3JvPQeRnCWWvkE3uY1o9wPr5TmK1FpNt9\nIStQbUnZjJSFGiUGGPR2AnMkqahNuGTAry3FH6RSP9RcDkn0ywZ/nJ+RKWPc\nzCqLbp7OYxZj7FYlsEmKgKdGnZBQBXAEUxTVSKU0F62C6dc54XK0xud0c3W3\nmCtGJOC/d3Pa+YNMZbWaPL4iqTHHWeLXYcdmS8Z/KUiqZY20HLp5SPprOtV5\nRXX9ZP0x6EX9fN4SH5+h41dfN8rKIlEEK1BgvsuDhZ6ukuZD4/4EN/K5vEqS\nCkaqG3FaxCxbc2DeyyCcRq33aBmdRlUtGpjybYeBiOcJQ210VMNWJCvcpu3r\nk19a6mpAhA1GroXoekhzHoQv23Ov70RB2KZFx/v3A0T/asNyREph0nhbfQxv\n8HSKnc0McA3zJy73eNoaZ37nDTiMUjmnaS2eMTuo9F1qThavfy2UIeEbV98O\n9EEUfPYWqsnEfc9+SbhQtbPoS4mzfVfGUEdPQkZauyyNMpCVIF3R8C0l8HhS\nDum5d4Py1R6uPDIK7Vz4cgExDx4mH/wgIn5sWNbZ9FFxi8NdKMJNzK9uPKEp\nlQSrOEYbcuAQPYTb364yQo949H8OlPEgxMWy5xus7awaJKKYuDxiXXaoCYmA\nlBZw\r\n=5qoP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"cjs/index.js","types":"lib/types.d.ts","module":"es/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest src --testPathIgnorePatterns \"lib|domtest\"","build":"npm run build:cjs && npm run build:es","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","version":"npm run build","build:es":"NODE_ENV=production babel --config-file ./.babelrc-es ./src --out-dir es --ignore \"**/*.test.js\" --extensions \".ts,.tsx,.js\"","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","build:cjs":"NODE_ENV=production babel --config-file ./.babelrc-cjs ./src --out-dir cjs --ignore \"**/*.test.js\" --extensions \".ts,.tsx,.js\"","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","rollup":"^1.19.4","terser":"^4.1.4","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","@babel/cli":"^7.5.5","babel-jest":"^24.8.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.17","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.9.1","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.5.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.5","@babel/preset-env":"^7.5.5","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^2.0.0","@types/react-test-renderer":"^16.9.0","babel-plugin-transform-define":"^1.3.1","@typescript-eslint/eslint-plugin":"^2.0.0","@babel/plugin-transform-typescript":"^7.5.5","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.9_1565892536801_0.46776259724018865","host":"s3://npm-registry-packages"}},"7.0.0-alpha.10":{"name":"react-flip-toolkit","version":"7.0.0-alpha.10","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.10","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"6f2bd9413b21881fd7f3b0481a5143b487b831d4","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.10.tgz","fileCount":42,"integrity":"sha512-x4qLqRyE0xpN790QTKW+QGpCMgM8+TcLzXBdcYIkEMRDX8QznnZX/0swIwbUJxrEcgWHLrhS7UoFPNRB7WLcxQ==","signatures":[{"sig":"MEYCIQCcW+MTlovvRkGGJdk0jhCxIqFmMN4ZxLOW+1+MeF4UxgIhAPPSmQMV2bWfUcatgc/IF2wdFBATz5ja5L1w8TG7rQGI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":522067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVaVXCRA9TVsSAnZWagAAuyIP/3Yy9dGjJTIa+60lcwER\nk7Oom0ZYYhmGiy2x/FZxC94pbMfWEW+RqZ4eFe9e4ItYvE5rpiu2mRbINnR3\nPxLo84Eq3gUy+ZkWj3cv82FhyR3iq0NfzHMsroVtosDdM/t93cnmWRDb0p5I\nR6CCMN/idfhOQJyzAKkWFOqZu+dIbVZ3L/sRg7S4BM1EjCbZ4Mfni8FCKgF6\nVGoX/8JnUerA1VXUnrhmcn3ZeAwV+mW/S2xSvQtlwdy+svLwoipVFuXnr3R6\nGDeVxL4p+h/AmCNiAJ0kZACIWc1C6t8iudAXfAOD3WBtWkZQIi7+otF7K4pO\njwRGR8I3xfHd5bQSGPJdgc13uBx9GY23ySndxPXXlZgiGwnsuXLrpw65/crO\nP4FpgkO4Xo0i8jcGb+2L5FuIr3Eu8DPKUIxLA0ZksFuvY8ZqZZlls7KZ4j2r\nKNk2ucPon7C9zIugBaiy5rv/KpE77wmsW+6hiFTcxc3T2q70srKLT43IMw3N\nKwcpZDUXysZP0Y9QoTvobhSnsYIHO1H7iA9xk/c99/koDMPuEMKsuSt5vO5H\nCmP+mAPCc5VZ8AqVcwZAliHhb8QeLVIBCNxvlM0a/EMi+07LIDHeb3arRCQL\nLmz9HngJ+Lv+MpOLOWXgD5P2tB6Ck+QpzLzEj5re63rn/Y8xEX9uzz8ta4o7\nV4d3\r\n=bsp6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.10_1565893974559_0.7859370196801765","host":"s3://npm-registry-packages"}},"7.0.0-alpha.11":{"name":"react-flip-toolkit","version":"7.0.0-alpha.11","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.11","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"201c3fce8c5f920fa022c09e553f3131dbf23d1f","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.11.tgz","fileCount":45,"integrity":"sha512-Zf9qAZv78dmJaNFrIJjnE8PKaQiQwmvd1X0pvAySsgwPRMDaZ7wzhX58gFutZ4Y3SL+9NaEE+1jpoCiOVpJfGg==","signatures":[{"sig":"MEQCIB1GeHjaitdaajMhk9f4XlGjfNYR9Kw841KJ0F6mX4DOAiBQ9IHfqPeBcTrjD4cpNbEfcpm3rutWZeO7QmF19KWlzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVa1hCRA9TVsSAnZWagAAdNwP/R0HX7d8SBcHm+9r5m4e\nJwy5wdDPt2r3gbMLLhBmbZuGTa9WZCD/fA27ppmnloXLOCaQafCW1pKqq1dN\n8hIp+3MIjQ6744q7YNxA99Plur//1xe37BNPWBd1J78dZ84QxnY/Q89sd883\nFjbkLPthO5KEyCPNGzTqwYs+HHlpmwClpaZmhdiYW9K8K+/qkNNpiRZxO+0p\ne0SCJw462C5rEMqd3MfL88Lf6HpqOp3pOb8EUTc0KR49ab6zZpm3+uBGdMrG\nwqDPr8fUtLlZrEA1en6dW/ZRyC8YBx6e+upwKs6g+fWVCAs/xt2pUeOuFdU1\npDOtB4iI/fIiE0oJJAJ0AmrVuGCX3H7s7Ezo5gX+LsRYz1XIA783KBQXpD1H\nDdsbmGYHRGQJkhkZ8tIaOSu4rRys4ktv2hUuq1UuOgdF/UPAboK0QfAk+Ot1\nK9gOp/TrZQJQ5WVjpaV2L/OVgTlHnFn/puJO9p9R1lgs6F2Vbds3kon1O2E9\nP+3WEBgfZSmqA3C6yaA8LYZYfuq9F+Q0OW5IBWbhg73GnvjJbRmYMRY7OmRU\n/Zim3btlZSwQh786tDs/k2ftXEpXp/xVPwWaaYlLcrwIuIgbpNR2NAZEu+rC\nFowwI+bwcRMzWfJ1WtWFOI8XNhjL0OOIzxtHVFGt1VOMuUdCO2a1Fifv3hsb\n6hAM\r\n=lkr0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.11_1565896032434_0.7193096302986832","host":"s3://npm-registry-packages"}},"7.0.0-alpha.12":{"name":"react-flip-toolkit","version":"7.0.0-alpha.12","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-alpha.12","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"0f93ff8cfe0cf01e22dd5d5503b9d4501dedf79d","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-alpha.12.tgz","fileCount":45,"integrity":"sha512-66FrTbeZSdjOw8v2nfnvExcujKz5NFddIwniroKDjEzDdsViVplbHmFJ99+G3wjS0cpjbhEut2EHzPigFtx/2w==","signatures":[{"sig":"MEUCIF12piqmHlu6bDHnNe0PPl/Sd8+5tkRPdpVruXyrwnx+AiEAhYHyVld7nSOWP+GE09gUMGL14WHENtQVOmxJPavsUfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVb3XCRA9TVsSAnZWagAAhqgQAJDdOMOc1qw+x/80HC2P\npARyBXVxGo0+6J+TljZLxfyUSEYoDx7pb89cIJTNK/O37n9MifnH/d2n5QOV\nQ3oVaLEIEiQZAX9FzDms0TJUAu0rBjjK1iguWV21rvrdTEmwfNzHvIkpUKx/\n8f3MYJTLWe1yhAM1BwqXXuWAIMnFpjEVTaLAaBAF0AsljqGcjWTlwY+XftVP\njr9qjtVhfu3zt72T9XvixhIniuvaQuMKVA/t5CxcRoqk3sF4exxC1A8nSvrU\nrF/IZqwCTp7P6tHoXx9/pShMznkk5XrWAHdFMDj6iIpCMaBG2n1kWM/xD2+g\nTvyf7nDaJ6Vr98kJpDnKMs+IwU1IDiW189yrhEfJxLDjKuYNQQ3F6GE7YBwR\nI1UZRibsjXUGpv1woZ5SlM5uh1l5zB26PN++ZTlnVMB47ZKHNWYQcT0wvU2F\n7tqzK6vFxnItOr6FoTS+GzJXa4Ys2aYU5qWoT4Xq6awYtJULpETQDWCFe1cy\n22wKMB4Aywo3Hrvfpyr+30/OwyfmAI0y7mN6VPyZezYHzQDVo04ClT32t4OM\ngeTTleAG8enbIFPndp1YMD075yguZwmV73TDkzQb84VCPBwPFl9DMvf2X4JG\n2QWzXtNP/WV/GwAT2sb1s6Sdinp/hDNhiiF6vkbbetAFRIPD23VNG/TgyCuZ\nq8zy\r\n=zEj1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-alpha.12_1565900246516_0.05706273574158671","host":"s3://npm-registry-packages"}},"7.0.0-beta.4":{"name":"react-flip-toolkit","version":"7.0.0-beta.4","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0-beta.4","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"394927bb5005f817411dbb5e83678c4b3211f433","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0-beta.4.tgz","fileCount":45,"integrity":"sha512-txx8IoyaK1ozaXMiZpRRefzxrIGMRwRR9lWaq8Yh/7d6uDi9otB1mOyjGPhrgDtg6vAgAC3re9LJouzPD5CmIg==","signatures":[{"sig":"MEUCIBTrsHOQ31w4EPVFG1E4QTY5y3zh59zpC2bTL5JJ3X9TAiEA5+869adjD5PMaVB54OXw324aDN2VuR6b983nHcdaWLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVckyCRA9TVsSAnZWagAAUI0P/jL6rJjvMQHE08a9HI8Q\nVmkvy0hcawFMUYA4mPYsiARn3xVzGVLtd6rdP94Rd5Y8JM8ogWV13skrGeNT\nDuvvUZxrcx21fUd6cD6Wf7O5EZuE7C5e4JyWbT8I1m2ACsyDN7x4/Yr8vhve\nLB5XL6X3nfgXThyN9Pjb+0mq6/i++Rb8QTE8ZmNYK+MY6tyTaGLYk7k9OnKP\ncwdzHZU4uPHbw0R7/oQUBaQfn0mDrxqqsxzzKgwx6hnaIwfMlNiGa26KBPJF\nEf+KmuwoWEmiCz+gDRUdEmWE6njdaJ9smTr+hUBeT+Y6blj27RsJJozm1qEG\n5ja8fbjGJ5b5PpKQdJu1XnkiulUSgJ1lmeW5t1cL3GgMiqYPfw+ZE3AePK4n\nIS3d3sg28trrNAMbPOmUQHyoftPP4y9mEZaVKU/ONL01dGedjvvcmxNurQI5\nuu2h1n5PAC6zADpdOqvkh+rr2zgP5pvAscGPMEtC1RXETZlbPtuwGUc/9Xzg\nNdrhVMiI6HofixdCAo++VtVhPnKYnsf3ag0C3u75HQoWsGxfxC30JU8QUUy1\nl2ZKN5e38EXHNfeeXGEPKOwZyZwTLK3YnHs2Vn3ZLUTAgwexUZIFXvQXOQC8\nICIoFlJrlO4yDIiAyyVmctVTLHQs1pp9H8jckCnPgw7Rk8/+olxUJydf9zXQ\nvTzZ\r\n=AhDP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","readme":"ERROR: No README data found!","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0-beta.4_1565903153801_0.425024644835289","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"react-flip-toolkit","version":"7.0.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"9830e7db21b1f9f3dcb31c75708722375d464937","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.0.tgz","fileCount":46,"integrity":"sha512-DGYnDvY87VnwxZCW3XRRKduqExWG7RHk4+BBgtIqsf6NdQW0KPe6roXzzIL8oRpw2sCkozDzRVr/kq4zMl5VLg==","signatures":[{"sig":"MEUCIBnmVwWG4S4Cw8O3TfuTx0FQ0r/WWf/RdHxp2TlGaOqGAiEA6pJcprrvQvNmxKEfFvVgOpJ8eYRh0usw4vvyv6OVuOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVgVCCRA9TVsSAnZWagAAGDsQAKJs+kDyURqvJgffUeKR\ng4ZCq+QFCOgVDOLSSvTclF/Jy42fnR72Gi43N6MwsD4JM0fSX7yJgVpItHdh\n3GImrxbZwITH//Yt76TazykFXa3ZWoKNVgM8VFcXLBGWk0+T2OoQwGLj8vTX\nNUK2+8ZPGzacRmGWyHJpkCw56Om7aIBdVQvZnwavwB5qWBzparVKvfPR/VCa\nL0JbO0W6ykdeWvyHmcQBG6CXcv9r0wwZBCHOemWVhpxpNo8P0NkkD2/f9eVd\n9a+K/V+TNC5a5rOf44K9g7LoS9q0t9XtE95qxhEHhbCrzmbVPUHi5Ldb+GPb\nIck/3L9WVzhitelWtBb8uAnAyz3E1afJk0+syMYjHFMdlxK3vJtfFuMV704c\nkr5lYC2+DFf7ubR1CajizBjRcLzdaq99W8UydYYuejlfbX6Q5y4VjEq8nwPO\n58tDDbdWwBlxC7wPoO0JP0e91I8Fly0g8A3LdTwt9J6yh2RNkCTKdBcCT/q+\nwNalMDWrUNmTrd4wSa2oNOjB6AIlW3HnJhFl10Q/S+O3DS3MIGji98vuo11F\nqER3mfDSRhCiqgTpGCiUOgokki40ewGuVXiBObmHnbtOF71hgOLCku/7WeKW\nj8jaFrnHtxnAQYfDvmF7yItwCbcUOoxraqOU3Ger9yf49cHBC76OYupoz0u9\nniY5\r\n=DmHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"59e50ec9668d2dba1225de8a5d950c7ad28cc12d","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.13.0","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.0_1565918529537_0.1980963606706716","host":"s3://npm-registry-packages"}},"7.0.1":{"name":"react-flip-toolkit","version":"7.0.1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"91e9254a0e3b8b6bd953e6733e1abad85f72ce92","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.1.tgz","fileCount":46,"integrity":"sha512-7OIiH+Wqy61OBl3TfTUSXmC52giZrJVpRB9pOPIkTbcY9EzTPg4AKUgvYXjsQi3R4mtuf7eSapRBJdQ+PhQjdg==","signatures":[{"sig":"MEUCIQCsI62qnwYEbJcqfAMxxmG1Ltw/3VnT8zSlYkdo2JxesAIgdr0y8TEkHzZku+MNvwnYsNM1+KCPBBd/50oy86Ce9Ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVqSgCRA9TVsSAnZWagAA14AP/0amP/+UET1F981xoIF5\n2w1kYpZhRCHj42S3SThXN5Lers+4vT2bpmxrS9KkEvmkCa6oyMVbCBjKfaxm\nG/tgxSLB6iKuVGA9w6MRf7PkgeoEyr3NfU1jdblTuJYiDCFwb92RmV4NE3Sc\nhpKijPNsY3mNkMkdtgVfy1t0VjfHz2xM1lQlcIO4AgLUia7jGXBdyG9bAxid\nJ37MtT24KdoE8530j93zkkCRE4mULOBCToFeoQ7bfpfEPAQl1GEK3A2IhpxW\nSN025y3KTU0tBfUKsN2CF567ZhpzEcG5BrPkdMAywsp614OXhy2U4k/yD/gm\nrw9pOAYpxoya1xfin/ubEUhbFKxD0G8szO9/KhjjiHtwnLqn50zOF0gD+AUa\nERc+RvY/NO3v8sJgAoYUCkmiSLGrygcnknWIDNOONX6wmx4S20KG4xKyXsyV\nsH/AQQJJNgpFdX/J83nNhoYIM9iej2nqvUI21Mt7BQOrsIFqLKvm8XnUl954\nUJO5VAX7sQi+xmqxNspMqC/jv2gC+Gm7jqOVgCQCI79AfF2HoECHkfAFyWSA\nnz/9OZ443Nont6qseIdzNos1BB65f5TaB/w0Iq2jpXv+zGVb8Az1SK3xmYmf\n2mVDG7Gm2AStoHQMNGuM0j3KxSA2//CiuMxYUDMt9kPasbKp76xjDwlsCug9\nCpL6\r\n=HXiw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"b77631608b0cef47ed7ec3e07b689d70f7d287f1","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.1_1565959327884_0.12905324199076396","host":"s3://npm-registry-packages"}},"7.0.2":{"name":"react-flip-toolkit","version":"7.0.2","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.2","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"f0a8ee0f0423b7bda8aa1b785f9aaecdef657ee2","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.2.tgz","fileCount":47,"integrity":"sha512-ZNZtiqNi+HXTeJhY8CLfEmshmaW7x/DNsEKDqJ02auPFVEqodqnRTdNHqNK1RuiXcERXROwtmzbtISvzGBdwGA==","signatures":[{"sig":"MEQCIFy1vZOTiBdOALtknNJUFc/b8y8h0ZSW9b4jKcPR1U3zAiAgx/kkGOm8elIwc5rerHnTiIGC66OEU67ia6yFvB7IOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":538759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVqpECRA9TVsSAnZWagAAlPMP/jEHrOBKrqF3aPpLQqRT\nLntQoC0WQyCUc6b9HUB6JfS6xeRXoLqQpm3T46fmTadeq8hS3JihsClnLIEk\nsngB52fMC98lVLVJkUUu/FYk0LKpnqb0fkpvaYzuRGOAsxXqQAeROZeiEHxf\nP+vvKtqBUGs4liXRD41xA1b+m67cXgmTbLiK4Fq0xHIf8bJDgghmeIYdiRGL\nDaASRSTWk5vjmLzs6WtSuLx/Vug4uFVgSpcy08xC/Z+j6xSKVfAdp9xiW9W7\nwRBWQd/OKn11tIWE3VX8iwiuX7pfViUmFMCIEXaWP/waSd3uml4MHVhCFi9U\n/pmBaxAvJwjLjBcAgW6T3WlFtghiwVcfMWct2pbHPZwumM8V10vSJb9F1Vp5\nyOWY6hHwBXmk5kVVq4/ufj77Rq8/rQhAmHGp8KhBbI7ZlI1+kVR1eqkHYfnl\nr0OIoLQrSLVc87cgfvYp+TbP/pvFJfbwbDCrMd+P4KnsJ2IETm8QezpFzdlw\nEp1qkXaFxrvoD8AFki+YspEk9NtO8cGu3uOEduyk6B3nOjWcqL8EnWaJTvQ6\nFQoS/xQ2pCstSg4wpoBYvMdiIlD4ocobYVGPqPlWHQvxhSy9tFmlLYHSashM\n4AKUYmM3EEEVDKvcKv64KOZErhsTyoYrFwERJPDe/HHpSjmBujp80F/T5WF7\nLXiq\r\n=vbci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/types.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"e0b097056b04ccfb1af86d620004a1eb30df6f56","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"umd:main":"lib/${bundleName}/index.umd.js","repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.2_1565960771652_0.6746918181405221","host":"s3://npm-registry-packages"}},"7.0.3":{"name":"react-flip-toolkit","version":"7.0.3","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.3","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"dce49d37ea0ad792d0fcb804821bffe02ab690d7","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.3.tgz","fileCount":47,"integrity":"sha512-4wNT1uYh4K6c4lKkwnxK8ut9OU5vXD9ZrZilhOabNuL5u5hAULPfhQ/2ku8R4vKRZQLJv3IxDSgYZYpCudNCKA==","signatures":[{"sig":"MEUCIB1TnYMiGFSCTCOFDrx7XX0Wrofc0QtUaZLOeiGPUIbbAiEAtkqcxwrDv+Jqp34Sk/HJp0OdaRPKi78cthJs/XflCLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":538711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXoBWCRA9TVsSAnZWagAAPbkQAJorAxBGXENxKoB2Slkt\nvDzvkBn+6NdvqI9+NEbXdeA/4RcRMnSERTG6pWaOurHlVgWHQN6uGJxbnFJI\nFsz8LQ9DCxbkXCX/iOQzndDxo4j0HRcQ+x62fNry/lVKl+LHVmT2crWjmSh1\nO908kEdmQmE23Opis61Vl4wISxYnw86gC59MlB28DuynXdBO/+eDiWynzUwX\njxud8uzMoofdhiYT2ixwxK6k7qLqYe/AviNSWPgjceb/UGE1946nCLw+mTe0\nRYDftpP2+scfWAWATUZAaWTZibzc1wgZhj18G7cuUSiIJAk4g7y2BAkrKk44\nyqtZU9zPy61kYUBs4gPZrIzowaffnoOT/fKdOzqulYu2Kxg6RYO4aCcna+29\nen03W00gbvqq55yhvV+3T0zhVqrxNgdsMD9IGGv0cUjUgu8Swl16B/uN1GaF\nOTYXsloroZCubxazGG/Qikdvl6Jf1VfY9/UZuRaXFSEY2G4I8Cm4PiID0UMq\n+IzTXeGMZ83VTDlg5EKx94fovp7ibalo3G1s7YMIGLU9cJ3vhmsfDB3xsmpY\nJmNwwpwbnvLuUUcnEBxQbeEtPmmMFExbSA5jsq9XGyGo7CG3SsUjOu7LiHIk\n8eUdn3hxwD0PovXOc7/jXZl/PlyQFZEstPvLvGfpfnX0AsG35lG2Co5c/rBD\n84Tp\r\n=AlSU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"647e3662f55b87997cd41970cc24aeff18cb36ea","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.3_1566474325043_0.23228179294382523","host":"s3://npm-registry-packages"}},"7.0.4-beta.0":{"name":"react-flip-toolkit","version":"7.0.4-beta.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.4-beta.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"27e82ef8710f5e74c4a76bad6027d1c5ec80c57d","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.4-beta.0.tgz","fileCount":47,"integrity":"sha512-s8VioXFeyMppyfnzu3qRCDzTxu0rczJsNLp5ubexYXs6R09KmOTBZ14Nv71WCrKhh7ucq03Sg2hWRqPhWyo+/w==","signatures":[{"sig":"MEUCIQCiKeNN3/BVIeCWL2tLceuSDywjetuEV5YzYb7N2q/D9wIgMFBjn1uitIhtOFcfVRkfFmKnlGaWy07va8UtRWaKfLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdan22CRA9TVsSAnZWagAAod0P/RkL5JWW6d3Mv73lmOGZ\nmJ2IjMIJsyChN2pFXElYTkT6xlBUQ70ZiAGvm/wPX+WuKuTEjHeRK40uyRUZ\njUTzn5u8TvBpnOiRIiB5BcQNvSW4GUgvZa6Ynj1FzoNpWgBj30PuorDj2beu\nCHv8QS6SMOOjZuEvLRWpMxi2R2gE5Pgwvk13eZ0Xbt1EbV/Y6LQ+GP99pj7o\nfWT0JlHbi4Pnz4GZhNUJLbptaOqmspvDKXhZIOPKRIfON7w0uh3BakrsFlzl\ncVR3YLdEjBDEz2OMJcZ4AS4bqqpoZXoxQC+Ab6028Dycn+vABQXk4sv+edrb\nazsG0A/MofB4tXRAgYNaZ7a+56CdRGfk1AGHV73rNTLp/VivGlR80XI0gs3e\nMSdROD/wiZvJjdW7uGWYpvkRjHPc2KhuC4g3ZFEC4X6EgF98XSM85Gcck33E\nHr/66kNgauA6p4v8Rg5uMmn1NeS0v+gWdUb95zLjMLSyEz1tOTcJpAbwlil5\nD7rrz2GRU3mJ+jH3e+9W1+uQ26RPAzozhDW/qR8iCeeA1b+ye48GrRK0eeYu\n8e55Q7Ye31iPqv5sDIf/U22vZnt1/I1uz9Kw3Eg60hb+997asOot8jxaPKRl\nsgpn0D1eEx7LmttG2HAF7+/LkN1Bt7BkQCB8+V9vtSns7WM4mQy30bEK76UD\nWz4b\r\n=9Bed\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"![\"animated](\"./example-assets/square.gif\")
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n![\"2](\"./example-assets/2squares.gif\")
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n![\"shuffling](\"./example-assets/listshuffle.gif\")
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n![animated list](\"./example-assets/listanimations.gif\")
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codepen.io/aholachek/pen/bKmZbV)\n\n\n### Nested Scale Transforms\n\n\n![\"stripe](\"./example-assets/stripe-menu.gif\")
\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n![\"spring](\"./example-assets/spring.gif\")
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"978368a327a048c2b94bf2fe90f8ea1c63ace07c","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.4-beta.0_1567260085495_0.2608911377191374","host":"s3://npm-registry-packages"}},"7.0.4":{"name":"react-flip-toolkit","version":"7.0.4","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.4","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"a48745606dda75429ce2e86929aa4ac3998c64fd","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.4.tgz","fileCount":46,"integrity":"sha512-m+T7S6EG2mc5pU/JKrI+1IKi9n86W221euCwOb8qutBlDy4urAluwNHh0qNxn9Y0lLLBXtWsgTM5OD05D9CmNA==","signatures":[{"sig":"MEQCIHt39M2udEEX08gxSdNPRbNizRSXzsZ1m8Og5u1BaEY3AiBEg3AzMcjNr4NoaOdD8WEWK81OTZX8EihwJ0U479I/FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaostCRA9TVsSAnZWagAAgVYP/i8LggbSEGTRVcuCX2UZ\nC5qWh2EinwUtIAUjVBBHSr2lgrfQsUdMhXGWAC7bP9Lb7L/EriTdd3UhhXL1\n7XHtzw75ycn3Lq/IfHTphp9O/S1rdFXvrWuhSjhMQCq6WpYPUAh7my1kky1i\n4TI3jUv9NrSq6VROSAax1kz4YEfHZQB2euNy6dqX4Ji8lq9UEfSuT4ODj35+\n/BFriRTnG/aipbL8FLfsYSgk7uj1gM1YEtpEAavehCuay3YsKeBXZbxxjrHC\nh2qf+Tuuvu5A+FOvSlFi39KDMOHJPZTlySajmWo9y14YUWvWI/P5MgSH9F1d\nSZhn0odAJc66cxRkQokDJIMzHtYOogy2PRyhJZMnY1kWt9ZXE+923iecQ5MP\nUOl/XpW+kONzLdzuBZnYP7RfABDRUlZqmoRCeSnc/Js1W9efMBnaDAue/Fhu\nCx9fSqQYId8k88s2oRKtkwB7qHnyURcgZ8K0C/2UzT0ndzIu9D1WnPknXwC3\nlsWIy+WFH/ncAZy9ePiXYNWpyyFzx/ntvFJg0Z0JmHGx+I/BlYppvH2MOuw4\nZhgrY6L6vdNMxGad5AxlPIkw3U9X7aNYkhT0e1cvvX2qsZ0XgXoKIbHkGJr1\nNGMpR56gxDCkqbuAXAXgJ8LGHtjSXt5Cr5g0f6OML0ouRlxfjuQaxQaUV/+w\nOvkJ\r\n=cfPT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.4_1567263532705_0.5866757960304128","host":"s3://npm-registry-packages"}},"7.0.5-0":{"name":"react-flip-toolkit","version":"7.0.5-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.5-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"961bd74c9e081314177c226e91cd8feea83ea7fa","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.5-0.tgz","fileCount":46,"integrity":"sha512-yInJsqpPMIDYylYZozlCZBsbnuEZBcdPzxk0B2Th5N84ZBVLmBClrGLbv1M5DvaTBeYGo9FNljz+e96osPngIA==","signatures":[{"sig":"MEUCIAscWZKbYBM8H8Dye8zjpFZ3jk1HQeCDz60WJqcuwb9fAiEAs0wb9RStknbc6/+FmYjKo0anAuICW2gLRP6xzG+Yy6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcUK3CRA9TVsSAnZWagAAnFUQAJZ2JWHXyU/ZP9FFswgH\nh/xDbikJHhR80VMZOj7Z1yXvcXucWkF+TWx250gK/G7TeWQ76SnyPhDZurRX\nzLh6eReVEukBEMQwsPVNHLRD5XeWEqXcod0iZQAFLmwsy/nlL4jBItWphib1\nI1E6MdOEzURzw89IY+z+8pozgoGVEIhwbBREMBoNHi8IqKQqh3hT6TRaSW/2\nZ9ARnqULnvs5UuMGVvbFRc9nNt22W8nFwl3tEqzqv/rP3uIZCdX4qWHDvj71\nXMrXu7quIdKq5b9+bY17mDeks8hmgXyCYjvKj9SzPAHU9hopfWcfKKxqjwPP\naYYqMG9K8yo3VjMEJ1lbqYPqvwjwCtOCYq4njJx3Gi0YydFnM2MnUx6JXK46\ns/xJhPRiS3wCqWgOJ3CnuqQpxhUJyuASUKri4RpTBNQSmNd25kzFER4K1vtQ\nka/6ei4cDVNRmsmcFVoCbll6M/0ITrfiycUsgk7imhqWG3PSA7/H58+EI1Lf\n0TaT1ja7xQznSK/daODwd0YAx8HuSThjj0mMZ5rQ46W0Xhu78ieYklZLB18W\nmi5t7ld39QJjQmQ5BpterBS9wfXJGiThB5JsSsfoHy9WfLWO5VzhOPOxgbLI\nXxo3eKNIDnC+0ndeHUcRUsyo/p90lMAj8h23UHLd6KK8QSyBHiyzYnkDOCUO\n9t62\r\n=QZ/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codepen.io/aholachek/pen/bKmZbV)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.5-0_1567703734790_0.25600074607029843","host":"s3://npm-registry-packages"}},"7.0.5-1":{"name":"react-flip-toolkit","version":"7.0.5-1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.5-1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"14cbda1d3b7f3631d57998949446857df8bfc64b","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.5-1.tgz","fileCount":47,"integrity":"sha512-vxcBzizNPWWs8wZhTJlZeuRTlJpAELtsmmKEqiEZrUD4B6qkFDK5rrsY3YKW6s4282QuE7BXh/R3hGDEUx50Yw==","signatures":[{"sig":"MEUCIHJ6VNGG9xV6uZ2nPFRoyqZalv5hpc263GBkv5nL+xzpAiEA6QBr8KWcct5eeSQJNsrGPRZUdYEqt+dN4n6A0WV8OZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcUQwCRA9TVsSAnZWagAApwMP/i/0LufaddPxE1ZHqp07\notjcDPg9GFJTKt7THabAMhbt/ZC8lX1eBScARl7t6ySsRZ+KFs/Sky390Y88\n8xLncvvsbTEbBFOTwI3CAfnP6eI6o0jGRq0d/upBjChkGwrN3EJI1jHZnuSF\nyOiDRMHQ9re/wmXla6ZNVv/I4hPuWDM6MJyooLKrS1CmxCOMJQ8roX6knRbI\n8/PkVD1mo9Vj4AgU9HKPR40Dvgoj7oPQYm7BVaqlirZPjKHDg0NH3/Ytt7O1\nbO4kqsngjXubd7ZeJgbZU95TUJDT7AdGfXVMmhjVbNH7RH2G/xrnSo5SVEkv\n9TFliBzFNlc0wAV43uptkgwW9K42X6sUwTdYtp2io1CVJtHeZPCoqUDSlWB5\nV4A9B/gNskDJSrG0ie8RIS5bXal0R+UZZLqlzCZV6cjgDGbiu/ldN3O2ulfN\nVtTCFaSwPGiyIWBtVXsLUrRgBAzVlyx8DbpIYZz9xibRSs/NnPNzYlD5Mpxc\nsoGbSTrghWifAXD/aDXA0lhzAdIXlkWK8yZmiBowT4EEn1P+H14HED8CV7jq\nd1mwWGL4B/wcGWdtWnmsqBcbTHFvDlr1hBF8hy248Xtfo0DQ7B+9SY7ekqTI\nv7vXdf8FhnT8zDN6/PX+u1dGl3HGVlZKCYiSS3ERoHJrzX0PqFB25d1i8Hpe\nUDdz\r\n=BYql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codepen.io/aholachek/pen/bKmZbV)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.5-1_1567704111824_0.8931128760418834","host":"s3://npm-registry-packages"}},"7.0.5":{"name":"react-flip-toolkit","version":"7.0.5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"1ccc8869a3388cda824a54de41562eba04fed87c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.5.tgz","fileCount":47,"integrity":"sha512-zMWUzwtciCqot50V2+6Ac6K23ZN4mzb2f8idYA03emRcxAzDkMQceD/+ZWDDKRRi2DdK3dhOT5tuCbNZ1pdUSA==","signatures":[{"sig":"MEQCIGPFd3akaX2fWY+nO3o/65kho5GSVtFl3/tOhYJ3u4hwAiBz9p4hoUtsqjQoNtKBpFULAmmbqtvarE8kkid33jeuaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcUlLCRA9TVsSAnZWagAA19EP/iXzVbsF2QUfCEhSe9uL\nqo+tVQErwiC+BUghJg4deMns/6W2NZS2SPCUBIKwUj80SClP2DgeDzvXrzo/\n4u8pBEHE7yqmfZVAmtPJS/Vu2IaC7Vx3klUrXsrTRw7tgWaMc9wGyBB3UdqN\n5Ll/MCtenSQ8gJkiZS5FMz49DE6vkfz/gNFctDLycrKxTgrm9WeRLLd1EXNy\nLU0Oorvcr8Rp2heXeHRt0MKdl5u08ZwtYwBFEjea4qSXD8miNLQhTclK+DJP\nGrzV230ElK2WRzJb9bn0CDKyDfQNN1qbphkdu1M3x08Lhima1u1MKUKd+90C\nZ48cEGA4tiqcvkYphtyRepLaTtsg8UWZoz0+w/q+DvnTxSIFtqAxqgmnarRw\nKfU3ymiCZfmv0iPc9+JIRdSTLpmNY+9fegNcVtYv6vWsV+OyE1wSFWR2I3Hd\n5eqD+NyHoHiUi/fUtGXk4+AsmslBgDRB/EVg9FCHQVvhA6iZMVRkyGGMdLZh\nM+7ImePLflQu359NIUTHEw1zjzqaLFFgtaGjhK0rskyMwQJxGF8ceIiJb6OD\n/Sh8+x2n+2y/7lIXe3G1Xm6z0ohD3LGrikc9gucUrHRnc1Txp1Pcg08cLJNI\nen5QVfi18PrHjFwJMW+AmqnLNhInMqCOwLRV8WoAiXxmBekVkTySHCEUylf7\n0wSV\r\n=j8nn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.5_1567705418858_0.22268852908147108","host":"s3://npm-registry-packages"}},"7.0.6-0":{"name":"react-flip-toolkit","version":"7.0.6-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.6-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"dd1acd9ca4c4630f29f46dbc5c639eef782d67e0","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.6-0.tgz","fileCount":47,"integrity":"sha512-hf7KT7k5EG6meLm8la1LfSI/cckozTbpkhyuB0MbSvSBBSzc5+nsim//9LzcfDggsZZlg3xCre/8TlayyCsWnQ==","signatures":[{"sig":"MEYCIQD0uY90cvWzeED+r7OorQWTAx8N5UTaq2iGMJJFazjOXgIhAPikvtqraizzBsr6UgNcjMdTICBEH6RPAZwU77RM0YeY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjU7vCRA9TVsSAnZWagAAGEMP/0n4yPjrLN/3umyYAqMS\nd4xst29tfJzhbhnLZC97HWnvzLFZh6O7Brba64hkNouVuZkbzPgvQS+B+oqU\nkqBfBhHlERRWJTuwRI3E/dyMBydQLml131AnEd2I7gd2gkiDMn8987I7Dawy\nX1IWoFkKQSnZ1diiQHn4PFSPp10I3dv25FcMEWw463AOsC9VFMnBN6gQ0LGm\nZmBUZLMmvGi8GA9pdeR3HXW+6hAJGMsHNcK0IOGAOZJIuPuleZSAb+BSoGQX\nyzFH2FY2Flr1G0GBtr38PcgXi6vbdRuKUK7HsRUGeWugXrjhc2I5zM5rIV45\nJQALO/KCuyrxe1vFxnc4zbGbFgH7AUDRdZvckn7Xd2cHuAItWDiBiZP79JZA\nCgEhHWckdMJYjEYVPQ8eilVAHzVhl/cRKFcHtMxiOkSuIGhnd7KtEuF0dWvw\naHXzZIAWs0Uess1TyTk31XoTziUrW7bWmUMVRV/LDcQjhiQPIlJXf0LV+fYz\ntscgw4X/vrpfK9CSLJPwrOGtEI9O4zTuuWN1Y7bVKstpQ5Na+GW9kX4MSyrk\nt5LPs2nXFCQUhP30jBwOB5OxB/QOD0GPB1UeGbNpg74vHT9Yy29vEXFokllo\nYGCZ8sWm1zFnKDxnW6VUGmHgYp4l5ZE+f5I8E4H/boj+ogFUPx/k2ZZwWJ09\nbr9V\r\n=sQZe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codepen.io/aholachek/pen/bKmZbV)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.6-0_1569541870339_0.4174894547696595","host":"s3://npm-registry-packages"}},"7.0.6":{"name":"react-flip-toolkit","version":"7.0.6","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.6","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"eb4b6f17c00f92084a817ce8b4f69dda2a11fdc3","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.6.tgz","fileCount":47,"integrity":"sha512-zZpwNfAGS8/WRrHKOA224NP2aVG4ryVx9vkTkxFsU7tkGUpM5AvjsICYmOVDJhEl5wmR36SjMSmWFicloJVibA==","signatures":[{"sig":"MEUCIQCN8cuKfcevz99AXpYI7SOo4ejWCW+kNW4ydMCe3+uyVAIgLMVZElbG/5gRlcPyb6vAalfTJ4VtHHVzfso6RJU3JoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkKFBCRA9TVsSAnZWagAAmlgP/iAGbvxQpoqtbeWayRzp\n0RamPXrtEpWweAAUEWtl33inPuhHJwKw3iZmUJgx4blNVGazK5/97j5cNEoW\ndGiwco6vuGp+DMWf4s9gR4TowfYjhSc8AI1yMEZ/TpiFCHsOeNCaAEq/cKck\n5tCge//FWb7gt/ytLN8ADlypFoAamfgO+BDkbbBNG4tOdDeD1RGaVQyh+E18\nlrCJVEETfHvqo4oXEWD6etmy/0Vr5/ybxoSznooXN5sOApH718t/zTGN9j6t\np4ard3Y/Ynry7fKqwvKHh6sxk3tivYcpTtzRxwrvlauZbKeR8mG2zlYZpoCg\nWH8oxMUeZRIw9/WBqYQ0MlsTXMJs+6XwMbADO+3zUoVRoACx274RTXfFPUMo\n9UhVBmc9UzHTuIvmCZLIH1e4GfQrh+xzrPdQ5ewRfMc7uRQ95iofrBGENqnk\naNaBzoEya8kWBibvXPvI+Hha3YKKaMl0KA3uPFHXpQqr/qCuhWv81dL7gBlW\nQRuximcjnS9LF4wJIOopyfhqswokfu5bvtzrObSbsz8X0Mx+hW5bNsIORqMz\ncJjmK4qLplFu0SPCBdN/G/O7LfNY0wRvHYVqqgq5zguKp0qx5XXGIv1kFew1\n55zUDkuH0+Tpq1URL06nhj9V7cGcAURSF2ToiwP0bnQsZzJpcLnwf/0HYhu+\nF383\r\n=6EbA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.11.3","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.6_1569759552524_0.3334363147229109","host":"s3://npm-registry-packages"}},"7.0.7":{"name":"react-flip-toolkit","version":"7.0.7","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.7","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"a50d455ff4f9f9961042a7a0eb23bd5a2154c963","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.7.tgz","fileCount":47,"integrity":"sha512-1aORVOoaseauhoBg86P1qy4RgG0spzT50s2Ewiju20KtQjcNdkyqObyzOrl7ETd5fCkLV6uzgkJe8AEzuxYJBQ==","signatures":[{"sig":"MEUCIBaeJ/USf0aAj62JJZcMRhUENugnbnysdOYcJ7mnidB5AiEAjV8GHWfkj+nMtuUrtre1xh5IRy1v2/LNhFPYCU0Z2v4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwgnCRA9TVsSAnZWagAAHHEQAICQQwx2rdhKHTo5rXXr\n+RDcld/e4WPIV7fAgP/kobO6a2YSYGMINRoiWlGIM7xbUbWSPyz3kdhAZejb\npwloGROwXhcMw0XaZZ08+Snb5hNI1+DTXtmpKIUC0g1cg6H7mWFVIe8ooxs6\ndiwSeT1ptt23dZhWKCibwzPVHjpTkA7kvCX7p6GW8To9pbd4NAmpENgGD0M9\nJ3U0Yejbwc1MKGnopFMuquhi6psCO0capToH0+LPG6p7F2dVjmEcLaaY4PVz\ntqLWu8iqz7VoYHf6dCDy36EvDneMZKkLZxyNoSj3bOyoyWPgALHvWWc6axNA\nUoQX2KPX+iVafiFG8RlwGXgihhikfEJLzdWVomnvrmlZKhJY3Ov0zu6bS5dU\neIYvel2AmFOzQbJ6t1HCraTw4Xa3oqH6oUgRb782JDRlwWM5Cp/xD1iq1E5T\n6sKmlcehXqtvTBa1FvVHH3BozbgcVrlC+1mJ+14mX0tpxhaH0p+V5LubYwgj\nghPvAafUMMw39YFpTMnw7qiN5mikWzjjwSp5pOnFCvMSaGrEVC3/UCQf4gwK\nwaw0zkMNsr2k1B0RL9xz7IRwjugUngDN0nOORGRdGy75zDC/BdXO4IhlXQGA\n2ownvoDC+tNjSGHBJChqXgavsmIbKwRWDAELroL1qHRJ2skcDn9qwrOB9L0o\nFH7f\r\n=MfU1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.11.3","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.7_1573324838428_0.5336533421886853","host":"s3://npm-registry-packages"}},"7.0.8":{"name":"react-flip-toolkit","version":"7.0.8","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.8","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"c1f282e345c46165d33af871a8905e629c05707b","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.8.tgz","fileCount":47,"integrity":"sha512-xznHk1S30alkwQxYDHYmvD4OgLC8GAGD4QkqcAhEIJ3ftlG5gxZM9SaCV/ULh+bicAnKEBZHrjXtrGhn9KCHjQ==","signatures":[{"sig":"MEQCIDNXFdhA84tBAsn+LZlWv5fhmqhZCMSbK+oM1z3TIItqAiA7/E645gWvWKS5ouoU5F6lqGtC8kgsvy2UsVk7Ehz4kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeStCBCRA9TVsSAnZWagAA2EIP/jm2h7CTAO3u55Qb2yvf\nIZkJ/GtmHYZJ7SdooFAtO9GMhpy1BltLt4mJsKcDP/PcmVBuoghyF/AWs08t\nFAK7KkAx35w9cJSit5MlCtLqLEfkAHSuS+nFMmyIIrW22l5tirQs0kiJifK7\nGTDiMkaVs2l2t1C1wcG1x6cwECCJHz8rJIWEELdpHeibP/XnuKSg8nLaAlo2\nojHPfefcGxvowC/ANXacC4YFwqQhKf7KCZX01tIyygn2AD0S5QbfMz2cqam4\nQhwMeX6YYSzxzJerv1iD/N4UeAHFQ9oYfg2BpMrImvfCgaKDi7DCTRrZgsi/\nj9fhe2bOqV2TyNvSrg2+ItJ3ZL/PKQ/gR20jz5MVrnlynp3j0bmAwhX5n59S\ndAaFYvtJFZxHeubxQO2VGUDj7m5F8wx3RDEeJxYxMtoI8TnZqFxgUMRL+N8f\n5UVtC2NCQ0w7jdIjw/q6A7qCvTPAOCEaVy7ptZ1CyZJchL6A7TBX9ACGdwFt\nC5uSCDKcHfO2scCgnbdbhU7MXmHQnCLi4if/yITL8JTgho3OwPb/bDcPH4PO\nTGhJtnDUuOeDqSVyAJqKnGVtG6lyBgzdLBHFm3zOEhzO+dQ1mZl6C47IF+gt\ngHriVZovNwwqKm8UGWK8MWEpBKIIev2NV2664knel7crF6ZrfJhhBvpqrWVW\n0OMP\r\n=p5CZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"react":">=16.3.0","rematrix":"0.2.2","@emotion/core":"^10.0.27"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.8_1581961344583_0.8734275560135139","host":"s3://npm-registry-packages"}},"7.0.9":{"name":"react-flip-toolkit","version":"7.0.9","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.9","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"d10cd1d3dea8e6d8d0cf90929cf70ccd2eba76f5","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.9.tgz","fileCount":47,"integrity":"sha512-YQd/N9Bt0Kia3eOpO8R7XqHt0bNC8POzidkzM1ATnogKK4h08IwsBk8YmRaybpKbSHKIwgR/UVT0wTwoyNZUVw==","signatures":[{"sig":"MEUCIQC6QRa/Q0iX55bOF/dFpqMPkNGKr1tRN6CIog/C9yIzYAIgaBQBFHNg8vOWMMWbQWyBt/DnI46l1mndB9J+nj7NDX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZqp/CRA9TVsSAnZWagAAZ00P/0MVKQ3FLDor9qH0yXwH\nUDt2tD2AdkASGBCwIx9HoDmdjhy3liqXu6jNHVp8y4rb7jYK4oiJuebckpub\nFvXvuSKGmqvm7T0YxsH/u51a+bVmWzcd7IxGSpaU5wUjpfUiekyyCkvSud43\nfbv1kDNzDf8oGnsVD45uTSDt90GY+v7U70c3dhXTA1tzu4pJFCudwWHSlhJQ\ndLcvPJ2ONbyW9i1iPIXQQGJRJu6JZgluDU9c9IyvsbB1yCnAvOh7+fFdAy68\nASfCmNaQp/pTiJrTbR/TQE6d6YwABd0+mGEPr7hm+ItlXX8hYK3uXLMgmPwq\n1vU1nXMicvnpigIpmaReohQRO3hKxDj2IC2Rqk5aM/W4TDKbiwcX/G4Ddflb\nOwtpwNXON3WmlnHYNm7ixbav3cm/EfxQcN0KiX5/rlWng5pdd2622FU3ynOV\nRokGTbfHhYzMj/VRMveAHE/Qsjo1H8KTzciDkALEyzinIGo6hoQ1C5j6x+dy\ng5N9PzKjbH34hSGLjOdOJ4ywCzp8+Kg9F2zbq0N23af3Nvxvjz6pax0RwLYx\nQ9asy+2+SZje8PILO7998f7ONzRka0UnDoObSe+AM1pIScRVaXTJAziQdzey\nE7uOPlK58Zqrddvw0AA6OON8FFdBfkO7/XVnA/q4jYmZlSDtw7Y/flcEchjA\n913k\r\n=Lxq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.9_1583786622545_0.5408563230702126","host":"s3://npm-registry-packages"}},"7.0.10-0":{"name":"react-flip-toolkit","version":"7.0.10-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.10-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"5c0d3a266a1093e62416191a5847b2ec86938181","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.10-0.tgz","fileCount":38,"integrity":"sha512-pkAmPS2vojQ8CqY9h3w93++0EDKPR8GqKQ6PDJep9W7BBBD3Yi9Jf2e61nIGm0PiaECN8s8f5PGocerkUnwRuQ==","signatures":[{"sig":"MEYCIQC9LAommFUn4eiIhA+qFbT9z65h3eCWpssccLuDjfRb2QIhAIjLeaJKQNhTcd/MG3lAjU7dz9tgAhMDJ4DHiEFlkZG3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZrAeCRA9TVsSAnZWagAAmx8P/Apn+5tPbH3thgiWjHms\nlYnqCoVwH3eaKw7NqJXhB1tAYzB72pTg7cDKPfBAyg9v0HQctygWXwhF1Nga\nnB6KIzFJ3LAX1ko+8UUZ9+YUN96AE8otkHWA7WqBMov/lRAqNPp5eX2KxSOl\nCICf2TJcwWp2I+00JX7CcqLPv5v9uOOYbUSKN2KIhEOBkxcod846h4PK6KIj\nkSdPK4icLN+HygsEVjSfztEM/7QV5asByYPa9QfPT85tFOYoGodhU+NFC9fL\nSnUmmXJ+6//dfvOZ/CwtEnvSRWRGLwoNahRpR95Kt8KQidzi1e/kD1g9f0IY\n6+OL1owwMik0iSAOcqhlUtfo5O9w2U9zDCIUHXA4/H00jHRju2tBv0o7pXiM\n4vlqfFMMr71woYPhTIVehHGjAktEKzaXYPL1rSdyjz7erIk2WYpKaqae+wyO\nfvMqSgAsOa0x2OYKWDkrfOUh1gBdl+E7H9n5+n6y6lLJR1ICnMNPwgbsJCwd\nvZuOhWJVAbOIdq55JqyL0Hct+0HwZLhmEq7CzVkyvjPeaJNvsrc8j5xbt2tD\n9at0l573QU3yFI2AFzRoRMHyYDabcckNXtVFO/wUfsHz4ubYaEWoA/t9WjI7\nJtzk4oUba75z9mnT7D77kIdyYIruS+XhQ+cGQDSjcjlbsW1YoeEeQq+sHsYx\nDWIS\r\n=M8ri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codepen.io/aholachek/pen/bKmZbV)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.10-0_1583788061711_0.551942841376629","host":"s3://npm-registry-packages"}},"7.0.10":{"name":"react-flip-toolkit","version":"7.0.10","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.10","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"164ee540e71509c115615e7da590ca247e56a174","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.10.tgz","fileCount":38,"integrity":"sha512-P/cP5HTZ5JuXxgSo9auMHw3rizzC3bXDVhAFiKB96tiNlCOFPUhNBLdYoVziuGKTTuRIFK7gpEBMvegcGZqwRA==","signatures":[{"sig":"MEYCIQCv35tPF9vurxjd81ujMviU/VFKYD+sdrnLq9psmiXZMQIhAONjqp+39Zja/gjOeT+zXHTXRPVKzfdaeyNeb+XAY349","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0oAdCRA9TVsSAnZWagAA3XwP/ij78PNfensojeO7GRki\n6a+lahi+8fH2FcKMkZV/v+Bp/A2moz2BQipIcEojPCcuJIxJSjaaU9TdVbTf\nky1M0UEpFPkymiJXB6/vebDPjKZ4u4hgW05p5cgquHTauYfPl1HKil8XWfZ1\nFM5m6xvM5w0a2AtURxcdP/ouUUorURXVybTLv0hzDb9qxRRWub2uEuH2mhKY\nPrpLmK0XhcrIltlYklgjHXUq8poL7EdUp0tq3T6fbkJn9EmkjpBk2XciaOAM\nouaJrJCbgI4fX3aRstq/ctzv+SSKcqjo/kUly0gKqfvqjWwcvuoX0t0F1s3O\nto+PTASVOxkevKkVwytvwK/2pJQflZJmuhyrLxYarGnz0C0KraT9ZGGUIvy7\n6dNad2QOs0Sf+sd2FWYN0LWlx+kU9XAQmyZtTLnu/pZVsbwxnLoF4vcXVs3e\nMV7bkP/zYAp1A1vDOsis6BUf6u0TVJcyryR9u0hRr/GpK68j8oeycKtFzat6\nyRgotVjmqwVCIpK/Dy7b7Qe3CUDVoQemuCv4/3d97XavKKkwrqk0VW7+fK9X\nWznsiEsvWICvl9L/a/7kGSvnVoHMFPDuFAZwd4vRq9ydt0Zp0tcsojNr3lyW\nVM89QF7EU71t6oT26ncpO7Uea6TVvjanFQd8vGRHMeTpFSdv3uoHNI1woYUT\n9CnS\r\n=eAsx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2","prop-types":"^15.5.7"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.10_1590853661153_0.6098410604784832","host":"s3://npm-registry-packages"}},"7.0.12-1":{"name":"react-flip-toolkit","version":"7.0.12-1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.12-1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"4af8edbf2021dde858402e49c010275b3fef2003","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.12-1.tgz","fileCount":38,"integrity":"sha512-o57h40Kz68rzYCmFUTzWTtV2UArCIKG1H+HY/tliqutW3GSOnVkHDvP9W6jYC6HxgzjzZMGIqzHG7DEVpZA64w==","signatures":[{"sig":"MEUCIHxmhUrSS/UlX4XTZYo25mX1fE8+rC364Juwags9jfCKAiEAs6L3XZFPs70QX7mJieDgL5wT+sX3gnfVsV7FykGOMAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4igMCRA9TVsSAnZWagAAKDcP/3mFlkm/T+BN7NHKj1pS\nJjgNk+TB+PjAdLsSks+5ZHs7Zb+7YRMT6lSkIfVgC0YMG7FROFHjRca2m10G\nzhBczAxFht1NDKjGIoMW4ntaHMfZUiOcipRHNnyoCwIGWIWannLAGgL+n0ab\nMrVR6TL6KimRVLB/QeofJd3b7BMnxqpLwjlFxv79vZ/Nj4yt+ZpEXTngVP+E\nc2ltXm/w8gy3sKaF1qk83OV9fBp6ayajV4D7bpSPY+NqD7mvlumt52SW9eAt\n/BroopAE3wek93ju9H0yU6EV4wH333qzwiNm2tXwdV1m66u/a1GxSupLjML5\nLlZRdN+xtulK/KgURllLkwBnSkL3Zcsm6fWVPpFjyZryickOkTbmAReqEZfR\nMgdmWUofg9sFKH4286KzFEj3UMRs7r6IK0/nI2n7dq5eIEaVylHFqB171Cbr\nepWixY+HqspblpOhhpLorCfYTwU9XObdLNeUDoKjyJBzTCTAWhzmnz3MUeft\nZwJHX4wEj+HWazfkKruOTl1y328ZMG0p6PvlUQrxgS1nvvX7WxbeEnQ6FaI+\ntuO6sBU87dbHYFEvY0YxpGOIFmSKkvMv0HHaJRmdD6ESa8YOG5zdHy54XtzI\ndVYnp2y17L8coOW07V2lViaQAidgMwBFZgJluIB29WhOfvHCDa3pq2EixjpW\n0h8d\r\n=Md/n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codepen.io/aholachek/pen/bKmZbV)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"beta"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.12-1_1591879691987_0.06878027774988871","host":"s3://npm-registry-packages"}},"7.0.11":{"name":"react-flip-toolkit","version":"7.0.11","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.11","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"6ece62f3bd2723f7202617f6bc66c5e9cd8ed6c8","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.11.tgz","fileCount":38,"integrity":"sha512-KIOvETO+cnh598BCDvfJaM24XfaMfFujic19I8LGov1YtgYHjK32XEeDVR9MlPfQq1Gg20/hcx6J6apkveCqww==","signatures":[{"sig":"MEUCIBUvpicv4aEdmOuJgWLsYgSZSc6iaLVlpzfpAUvGba5BAiEAmwY5T9jOSruDKmWAZVgg46hQLSQD9tJaVw7jkFG4GVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4kdSCRA9TVsSAnZWagAA+bUP/R6UiKdlTID4iXYQC6Lb\nDZ6ibqiEllZ01eJCfL7VeHlcALbaNNjZrnGzzhgA9BAMRfDXIovVo4Mmtqvh\neMuhTOdSR4gRbVNQ0/LkIDwL2qbV9F+e8YfW8Nbi7r0Z+Eugjh5NVDtg2uKb\nYZd/taHuEJXEWY0e2N1Xo8MbATuYqN3OWVKRUO30/bQ6+B1TRdxcwa1e1Bqn\nXtbncfPyHlXHZlX/HD4zdCos9j7UxCeCJxbBX+zGcr7kjAMz+ksm/VjN1U7h\nHhTQ+YrDHDcjLXo30tjkgLZilboLzt1isRKCcPwh7h0498Qz0kwv8FoEWK8N\nkB4FhLZJ85mc7fHwYLborPmnsJMG/shZNIitayxurJD8kP9SKNlTx24kygGP\njTxDUEZXj6ZxomYU1ZI3DguBwKIPGjHynQNvzKtQ41hHdxeB2BRKrbTvNsdx\na6Wkh1SKQSBCsB0p0fFX99R8KRiabhS5YNVFc97wYW+A8RmFTx4LKiRFSuCE\nhcJwLHdvz2IR6eDicDDTDNH9WLHm6P+pY3QbUvqYU8CQA4arkCmHOKwCYSfG\nzYymugGDS93+OzFHS7Ui89Y0QWx18OHubDe4Gjlg23OoOZZb3e3e3RaNdMaW\nWKJP0auISNyM0mtnPziOGWAOwFt0BoaDM+1BNhmMH/sL/MTkeSlQNnmslwo0\nN/Vx\r\n=a3bQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.11"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.11_1591887698117_0.4585979117702348","host":"s3://npm-registry-packages"}},"7.0.12-0":{"name":"react-flip-toolkit","version":"7.0.12-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.12-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"4c34b21cddf831c84100787ac95563341428e4d1","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.12-0.tgz","fileCount":38,"integrity":"sha512-zujKLvExZDMHhRObEUy9l8Y3pH+W4eXjAMYlEoM6terYagA/b4/XC+mV/Vu8s10ZzsO9HNbs4LC0DpWc/m/96g==","signatures":[{"sig":"MEUCICMIo6JfWpxHjCGdiggBg6qrsGLwfJ9R8BskqB7FzNWfAiEAqlsRdULq1dfvLCempyvBg/OQGj83mPwVz22PFXS7Rfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4sM4CRA9TVsSAnZWagAAussP/RSFW4wqTasOFk4hNurd\nzSNVZtb5ShNCvcmdpFJI245ImhPrCDuWFd3oERyxXcxtS2tdk1CtDhFCr/zs\n2EDSAFxLRgwgqjKg4yDBAY3Ozjg+wGuuzX1jlsPzbnAvaJyzTVWBhR7YyFTw\nQnDaaGNTddJcGCORg/7FZI8WUJhK4nDTDu4Tr5wUBxaeigRPLANAcgTq/uAT\n0G57D1RyvVUBygIzHaiHZb/pEUiIF39WAnU4xNMyeg/7AmZY7BYxWqJRLNxS\nQtOsMH3oxEkRoliAxQ8++Ep8IzDeUD8n+NLZYW74ey8CSSZKeps4VmO1EIAz\nsGrYDKhm5c8zpvvQpJbrF+KhDWTZzlTP1EYieMrK6F5Ym1kj0LgwFJdX4dJZ\ntDPxl47+1hQuJecb/kgOnuwUGQb7ZSbI++tmh3QVwk+/xPlNVmD2N4A5rQub\nwIc+F/koJhAcgoLMIDWKQ1HnWlfze7DPriDy/0Z3EaPjQQTqdAOPnv5qJsss\nEI4gSIb275c2PzM48Vrj+I1YqQXaJLXgIRUmwT69MPYTvtEoRp1uQXbv1HpF\nSk1fjW1Bpi0qFoQkPXpZ7eZrmmOitYjc92SEMqO3cHoH+mSpI9cUKzL+geQE\nt4g/GJxsVbFzG4kwI3FVNnc3Qs0Y/BM9UE73jZ390SjgEDrLryvBGxA96eNf\nsfiM\r\n=Rpsc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codepen.io/aholachek/pen/bKmZbV)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.11"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.14.5","chai":"^4.2.0","jest":"^26.0.1","react":"^16.13.1","sinon":"^9.0.2","watch":"^1.0.2","eslint":"^7.2.0","parcel":"^1.12.4","ts-jest":"^26.1.0","prettier":"2.0.5","npm-watch":"^0.6.0","react-dom":"^16.13.1","babel-jest":"^26.0.1","typescript":"^3.9.5","@babel/core":"^7.10.2","@types/jest":"^26.0.0","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.10.0","@types/react":"^16.9.36","normalize.css":"^8.0.1","react-scripts":"^3.4.1","@babel/runtime":"^7.10.2","babel-polyfill":"^6.26.0","@types/react-dom":"^16.9.8","@babel/preset-env":"^7.10.2","styled-components":"^4.3.2","@babel/preset-react":"^7.10.1","eslint-plugin-react":"^7.20.0","react-test-renderer":"^16.13.1","regenerator-runtime":"^0.13.5","babel-preset-react-app":"^9.1.2","@babel/preset-typescript":"^7.10.1","@typescript-eslint/parser":"^3.2.0","@types/react-test-renderer":"^16.9.2","@typescript-eslint/eslint-plugin":"^3.2.0","@babel/plugin-transform-typescript":"^7.10.1","@babel/plugin-proposal-class-properties":"^7.10.1"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.12-0_1591919415698_0.18455453346147088","host":"s3://npm-registry-packages"}},"7.0.12":{"name":"react-flip-toolkit","version":"7.0.12","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.12","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"bc74247d2661cf4f693e73c707b8c7788eab2a96","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.12.tgz","fileCount":38,"integrity":"sha512-JMACwG+oGSDEvQxXZIlZ64EOIZJhw5XZ+1MLHsxDoNWP+Jzb9ZNfKP13jM2rW/sOuN/rLiVPOayHIFWcksu/BA==","signatures":[{"sig":"MEUCIQDGsJtKjTZeAtlnOByZKPVgYtODuf11TVJCozNcGQE5MQIgLIESlg2FZcb+FAUMV0OP7W2Hd1kDPB+EIm/s/z+TFSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4sQmCRA9TVsSAnZWagAAiEMP/RqB4/B2DslqvRcwYwZ/\nFRRKwkNhTs6Fcz9Pzquo5HIoTng+Ln4sbx1DdoMLIGaMjI+M+HBHRHrj69/8\nJBMO9QYejF4sS+sWEZ1/XJv86qsFkApWLcjXwxv/VRXeITgTNBDFKjtjYeCg\nOngzovYVXcc0UgQsAfVXSgxKdhmYpaPeNVSNXc/yjD68tcEovRNodFEDUkSz\nfALj7OM46cfeqOEBTR3x8FW3TqRHIgM3oWO5FdoU37ZMq0PFTYL1I2DGOvDR\nR9ly8tOkQn294bcXsgmV29RUZKntxPOUKWtFoQ9JEpshg63mAvd1RY9Zgi/V\nN6JrPR7VkLDT40tRlznBEAy2bpb3N0ijj6cCJZAdqvs38gTPp+Sm7H1qYVNL\nMIjCN5KrlAz+61IHie5shPMviuyIXlhJkit6MFEczxEi+mVARj+dqtq1gkUt\nh8RcB19v99ftEtwXyUs8exv9zxhRsCOYWeZocVebqWHWli5LNy73EFVjag4J\nBkBKXbFjyLavnS3hbkQDzOCz3ehgyUGygpk1vcOhbu8OA7iPGU/0krc1Ay/x\nouZinOq63fg/GrhUiDBaTN18dNc8gABz/W7yXgVu1qwU4PBUfMC+M9GbOXC8\ntuxQj7tTVAmbKlTq6eEh6au65YzYJoiaO8E9TR0n0skrYp4ZkVEOEC99cO9d\n1/4r\r\n=s/5j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.11"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.5","chai":"^4.2.0","jest":"^26.0.1","react":"^16.13.1","sinon":"^9.0.2","watch":"^1.0.2","eslint":"^7.2.0","parcel":"^1.12.4","ts-jest":"^26.1.0","prettier":"2.0.5","npm-watch":"^0.6.0","react-dom":"^16.13.1","babel-jest":"^26.0.1","typescript":"^3.9.5","@babel/core":"^7.10.2","@types/jest":"^26.0.0","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.10.0","@types/react":"^16.9.36","normalize.css":"^8.0.1","react-scripts":"^3.4.1","@babel/runtime":"^7.10.2","babel-polyfill":"^6.26.0","@types/react-dom":"^16.9.8","@babel/preset-env":"^7.10.2","styled-components":"^4.3.2","@babel/preset-react":"^7.10.1","eslint-plugin-react":"^7.20.0","react-test-renderer":"^16.13.1","regenerator-runtime":"^0.13.5","babel-preset-react-app":"^9.1.2","@babel/preset-typescript":"^7.10.1","@typescript-eslint/parser":"^3.2.0","@types/react-test-renderer":"^16.9.2","@typescript-eslint/eslint-plugin":"^3.2.0","@babel/plugin-transform-typescript":"^7.10.1","@babel/plugin-proposal-class-properties":"^7.10.1"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.12_1591919653743_0.7818670758581872","host":"s3://npm-registry-packages"}},"7.0.13-0":{"name":"react-flip-toolkit","version":"7.0.13-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.13-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"89741089fddde27930655163b0c633d73e4c5bcc","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.13-0.tgz","fileCount":16,"integrity":"sha512-9R06BWRa0vNBlMX1p0+JVUt7TCYQL2S5w5y9r949kGGV2Ah+QY8hkvCqRibIWrEkoeNaev631qz0B5BUZy2Few==","signatures":[{"sig":"MEYCIQCUo/SCcKGq88gnUxnF1kxk3LorXBNwi1IEGcIu0ghzGgIhAM2ROGRrmxwf4D52eQJljqPNeBEPRZF3LFo1SNHrsjvF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpDlGCRA9TVsSAnZWagAAj4UP/1i6x7HTTZfqnABaw5Ai\nZW/ojmLPkgNtclO9snFMQVFgLhvDNnnB1UinlX5tW6DRCEweXnttbxADREMU\nVp3OLW9NXwMhlIJHwExXMP9vhPtgtDaROJoxY4MtpDgNGVJUNH7DHaChjxid\nkJiN4fxPo6TJzgymE9+2o1jKv3BB/viDu1fhwEvqmamOC3DmhV+5uDmjimD1\n+hxwCFmWCkrH4xBJMB+fBM+bNqarOXyAlExlHtEFbPA4baFpBxnR/eHrfbi/\nlH50QCDbH6CWMpAPS0zx+lZleW40ZdTGqTl6tE3mkf6vDsn+Bv5REBDSc1xw\n1LKKATXdWaVYjUBlm5E08mTNItJYpfvteuSV97L2JuF2NYa7bWlDaX6dmvUi\n7Nk1WKxXq3WnSKcvPIQrPP3rj4VvASkdseuZGudhJkFdo4ujp8/mltcp6Dw0\naHyW18mvicIdCiBNtKo00PjETLOZxYoYP0vt3UrIcZsJ6IBzwSfEfnhfBgP3\neGe+jKk64J6LqweAt1ul1uEXTdS9a+ALzeIzcGJZHkqMev+nkxM9kVUaGMZr\nw2FUtg7e9hvo2A/NL/QZ2/NDC96owV2sCx9E8Hjk6fE74iSXpI6deGYFPkpq\nYyde5JKo7DIw2JL9Sdqa7YrNsOfPmtNq8Q0sFz023WVVAKo3NZF4k83H7/ot\nbBNY\r\n=DMOn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codesandbox.io/s/react-flip-toolkit-spring-settings-explorer-vjrsh)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.14.5","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"14.5.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.13-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.13-0_1604598086165_0.711116920346432","host":"s3://npm-registry-packages"}},"7.0.13-1":{"name":"react-flip-toolkit","version":"7.0.13-1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.13-1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"0ebc3debea7e5bb1d4eaac77f5b0a00150f58aec","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.13-1.tgz","fileCount":16,"integrity":"sha512-Syj3n85IUg2Sc5aTnNvCQAns+5JE5ptBPhDiYAJpXa9nHFrwn4fqENhDWyMUD7xJd95yJ6NTzu839huVHBUgQA==","signatures":[{"sig":"MEQCIGaNugo3KKDhOfhfTCHGHL6Swe9eZJTIoSqcpt0feyLBAiBTgaxKt7/1Rid/pO1/7aeLAIeEFApA4wg6/IZc1+knTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpDwFCRA9TVsSAnZWagAA0y8P/3OeiM2cFF2+bCQvMthX\nNIGl7JFkGb45tuB7FazYHO8cCa16OdEuxE6aFvTb6Sradi9wjFXQwN1G0eCy\nKGjJjVf7fjh7Fkdt94q07fImu+L1GhWevHFsCluIBQzUBZq4y1ewV/IZIkHI\nT7ctEZsQkzPCFIBPbKWAbjvqTbzpk4pdCF3KcjCjm2QBzZRlGl2q9gyHWawc\nTmfoqDPEAanIbMMechqQ8LXLqbdMN3W9glzacR2AlfsgS7am6kxn5x96+bTX\n6JJXxd+OzrFrZ37a1JBM19mdpfwYVEE7bJr8ieaMhqTfoWfsjXvTS/4BDEiB\nn06wLm5Z+1YrcFMkxWWCZZ/S38wX9w4oLezRGYFXyXcsjzk+lDJ4FSU2ODM7\ndp9IB3yy6WgEqtndVZ0M7nmo5F89txd1cOF89ZJW9U+E5FpoSb0+Cc+6Gg18\nTVf0oCL3jrB3d5mh5Q87EDm3NWF8IsjK/D9MChuTSc9F4EPMK+xGxXVZ7lZ7\nzT1Ms5TCLq85AeF1LBme+PjOqImpR+5LuLWBvpdVinHdCdvguwCRzKXTA+eU\nydYltMRGlR7oFZFN8dIfzFNlSQrdo1vz6VbWurkF+suGEOMwLtXwT2Q0PV9O\nM7aUDPrn8SGM5tMbuvGVtg+Ioh7AyyCAKL3Yk/ftv0F2jA476RouivMmRB+W\ndgIA\r\n=8OHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codesandbox.io/s/react-flip-toolkit-spring-settings-explorer-vjrsh)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.14.5","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"14.5.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.13-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.13-1_1604598789263_0.06686134553776335","host":"s3://npm-registry-packages"}},"7.0.13":{"name":"react-flip-toolkit","version":"7.0.13","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.13","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"3dd0b58e0cc54c3420bcbf973df899d1d63cd626","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.13.tgz","fileCount":16,"integrity":"sha512-HNsw07LPR9mduytuIzRhb/uslkxFkQlHoXFA2M3O0CutwKM9v7X0SK44uxJgo+S5iP2FeR8gTBSbq/fkrxYEfg==","signatures":[{"sig":"MEYCIQDGCoeNIrJKf6CObYWvNp+DaKixSuv0LaWbc45kWLZqlgIhANIUuVE0wMFhyMR4iOqN/9t5i5TuADx2SYX5xYdSBzYU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpHn8CRA9TVsSAnZWagAA30IP/3fGHe798SvcIPSzno9m\nfvwYXwnIXgd+Z4ph4bUd3ch3FCzo8oUSSLt8XX+5F2pXyr23RJsp8HjhfFHE\nDVDgxJktlk/7vkG/VjIyc2+QcoAo5rQcZ1mi2ePbxn8KAUdasQTfA8onj9p7\nb1s/hDtTuKzj/XQG03KyfEyks/QpbeAjQxYl9CiAaT5/QeQTUwaaMZXCOYvZ\nUFNX5STF93HCahc5t/prMzSCeoGFKnZJ+eFK18+RzNi63dzCuCdljbmciq2H\n7jnel5NlyT8iQsGvcX/WOZo2gJJy2TZi2WB/MPS0pUpQ985jkTHyl0E9nEgy\naIFtbx7k8uq2PuiB7rIV/BoRpHfn0I/uJSUAaz7Gq6zblcZYD8NDoveJQDOc\nhEb35iH6RLws/FOQc622I504LyuruLxopuqcbpVNxVkZXK80L+ixTmgNaqMJ\nalbpMcXxW7CW2/7oWyMUeMbqr8FfbVXHn/T7jamy36Dna8Iw1NoJGlAYQioE\nXoOievPxxd3uoM3F5m+sXvs9Ghnl5BCQ1W21Ira6dx6NrGe1YAUDepQJKJWV\nhoccOUKljl8NpNCG/YfCr4AzpFYVuk2Bn/CWhkoYWooPqAN+eWw0uIpROPJa\ndrKnLi3fxeN/64x52Cq0Cd+M9ZkRuVD54MtzmndcVLle2o/N/aXRdnVJ2xXS\nNQwg\r\n=gnpm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.14.5","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"14.5.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.13"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.13_1604614652062_0.49617920487615685","host":"s3://npm-registry-packages"}},"7.0.14":{"name":"react-flip-toolkit","version":"7.0.14","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.14","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"aa72bdcbe9fd5901fd559226e69647d6e2988017","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.14.tgz","fileCount":16,"integrity":"sha512-4ezk9g9yPMDbePCTW81ZIG1dMXa3qCIlYhGnWjJb0fIJJOazSOwV2TXp0lB/kn4R8QK5N3AdwYKPwFQQY8TW3A==","signatures":[{"sig":"MEUCIGUtnl80F5U0uyENBPhrSAcWLeoTsR4BbJTdeKvjaUneAiEA5xeQ4xbIdBcRfzmtfDV1XiE0PsqrehnprZUOPAFKXxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifnsFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTfQ/+PGqBUXLSWE7sZYiLmHPe4mZVpjVpvKGaDO2ckjaCyO/tiYhA\r\njaTwG2A78C9Lel1iBWcHPoRfBmf0gj6OBKpUqYxwDTrHEKyTl7E65Fp2T6kf\r\nAC79WnGloF4vhRjiwEaZj/boLoVhghJ070Zi1eyyUgigmHErq+LVK5yANUm2\r\njpKlosIU31qGeJSeBghTYlH1uKieXLbDNa3JxSaoveDexX0sM2qyb/2xDbjc\r\nLUUlgH9bg7vFYOWqK7IKtwObgXhrOTagavmDTvJ1XUr1QfSenCAgHU5BepkT\r\n/vBJPTbWrHubXQAe33KCt7rADlBqA4Y7X058V5I86xUcMFQEeKTC6SI79qfX\r\nuMSTpNhZLyqRWRDd3D+lmB7oZCA/bzZCylILPCcek74pSU8XM+10ZhXSbMVL\r\npCQwSqNwbtAKde24qBGbm9XbGahlCcIEdi9c1bH1DKXIzXivIaPgNThvLTwO\r\n03ukSH7m4L2c4lVEByCcdy+O8KSjn2W3q9chrxgd7IHjXDokfpanZ2eaaVRC\r\n9Ia8X8uio+ZDHbik2UHoRHd6pWzGBVHrqV413VwughymWogTShvmhrewtDoV\r\nYYSIObx8gMio+4cH6djB8LW3qglzeWxkeY7tX2DAWVlfdktBPPX5ssOLZim3\r\nzqoACusgJR4kjTh/Z0SabYqI0NdoUi96t5E=\r\n=EHTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"dddf46808fd03a7c191accaa228ee7d0977adbcc","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.14.2","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.14"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.14_1652456197668_0.614508044484648","host":"s3://npm-registry-packages"}},"7.0.16":{"name":"react-flip-toolkit","version":"7.0.16","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.16","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"4ca1fc69b3e0b7e4544d5e2f4dcda3347b2bf3b0","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.16.tgz","fileCount":16,"integrity":"sha512-ZLnXYJfYhZZ5lKP+FiUjX0lHKe8ZZoAd2HMuOAW3w5ZESNgNTyzu0pRu/bDBqlIox5UkeSlTDBt3dVBcTqv1gg==","signatures":[{"sig":"MEQCIFNCq+M6aVFGTo2Go0KopovlBD+/dheXpbZnygXmGY4iAiA7bSsmlCd1rxJd88nLj9dYNU+TWvuPknbqfmJQPA0zZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFBDtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptEg/8ChDTEM99962hv86wgrSRyj3rQkIKSg3Jhtb7haZ2MmREDW6t\r\nUG6DYbgsBqvNHagTEV/DNSYGXXM6mP+QlwN4oeoOcWwhzJOx6KRuZmOqk6Ek\r\nfDi/JCLhxY8/cMlpyE5epozHako6pUefC1mJGt32PUri8lODz/CiSJtzlBtT\r\n379xnfxopYa9gicD07zdnBvSEEYRH/Bhb1hrhLMk/NnJeP8iFRipqeF22CSQ\r\nomuXrzqI5H34rouxQJaLNIZdAcoqkRBdmoPrbqbeuXuHhX5zhtBmMFSk9kgd\r\n8LcKJqOeHriITJ0xED1HxOYIuG4hH+D49FXkjk1X+6KaOpIrqOYcZpkrUp9a\r\nkcZQGMu71T+5Oj/GIMy6ZeXAe7I0cDdCWs2M3yfgmplWjqfEAlc0y7xwaxpt\r\nHI9X/fI97O5u6m5gR/zPendpWWvn8WB8VEn5sd5m0aH/ypqWvk9N5zg5t2ho\r\n4QMvsegVLvHy/MpdT98nckb7Nh0xljWm3Bw+Gq93h2VxvtTH8SWHEPeLQg4Z\r\nbEpDF6vS+qHOBt8Ar2FTqdHQ2BVHSQ6Ir1wYdVHkPK/myiQmQlDOuyTnsHjZ\r\n+YmdxcwQeFlpIRdXutpM8JywUskNt7PTcPyM+AJJGN/oPkgYRIwkHv2F8sW6\r\nt/Yeqy0gGmxvTDjIkoZOaDvTWAX4z6maz4s=\r\n=b/MH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"ca98788dd566254e6eb45e1122fb3eb06d64c189","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.14.2","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.16"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.16_1662259436844_0.7781677290717974","host":"s3://npm-registry-packages"}},"7.0.17":{"name":"react-flip-toolkit","version":"7.0.17","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.17","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"2b330ab6ead76e82fa0b6a03c58b98a7cfe8ea0a","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.17.tgz","fileCount":16,"integrity":"sha512-dvL7CddwsPm5QHH3rRC5/I5Vjl6hp/QwqcFNIfA4ScfnbSf2xMaAMaPg0frIt0Vm+GO0PXf89hJ9RDmkGzqHKw==","signatures":[{"sig":"MEUCIQDufd4Cc+O5JoJsbdc3tXHitiUcmhIPJWzApEvWmYajawIgWTyVNT291dch63AhsXLGzo1aAYRfFH4w35LZkRPSmJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjN2YMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJrRAAhtOc3BMQRbiCAQ5HITa/fF7MsLzljyv7SCxdObZf1aQ6PdWE\r\ndJiW6rewmG+3ahEUIp8lNGY4xaYj/OmXvTK5RXVj/U++Tips48qYUTbKNEJC\r\nW6gpByl+mmkKqrSqNf4smulahtKJYClzQNlPG/u7g/yvnT/aEaOmkyhfqboh\r\nSAruk+EPn2giip22DsKJvbk/nieofvdPLpfTg8ptpnwoDFHeABXDuS9SNN+B\r\nO+3urVlO7e11HH2YsojxZAg3k1d/wXLWchpKuGkbT9y+XM6YXcu2o67gktjF\r\nSDYRiezBMOj6LTQT7DYsOP4VysOO4ew5KWEqC8oACZCk4wLSf3slBw08APzD\r\nTHoB02jpwUwIj5GMDIdPqBjhTbKAL6hpsaEFZ0D1WCw66vyZJV9GOb/i+zeL\r\ntR1fgld28GG/abIFKQmFBh3uaR0exHtNPRr5dw5ro4vhLg3Go4lUui9H58EF\r\n2p55HOX9bTPOqh8E2RVx1KCOhByRRlfkZk16rMmWyFnDs2aieGhq9p+uPppq\r\nUORxX8yr5lhEKXfCdWT5sfsWFcKR9lpjeoU+HvafDsj3KzrKJ32YQw14Utdv\r\nG/Y7RbMBeNWQXmJqdThBBwHBdeLcEu6RjDfO+avoDz5l29CRxb3y+qiCMcPn\r\naubsB+noRkymn70sxGUt0HX5wc2ntHMfKWc=\r\n=U9x1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"d6dc02c41938b575127b0e84dbf6269f39cff1bf","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.15.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.17.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.17"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.17_1664574987835_0.37479190863526557","host":"s3://npm-registry-packages"}},"7.1.0-0":{"name":"react-flip-toolkit","version":"7.1.0-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.1.0-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"f4501134b7a19cfc714cb6ff1c9cb95a52840ebe","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.1.0-0.tgz","fileCount":16,"integrity":"sha512-w0TvDOcemvQ8qA/gXw5o/cRHzZAWH1t4+KDNniHwLWasByPrckrjQgglEO9SYpzZzxGgOiS+09/JfCrDFRQq5Q==","signatures":[{"sig":"MEYCIQCxVPUZsrD54tIpAUJbbEg0OUd0XJnNIjy4Qw+Q0D3C9QIhAOMe8mIMg7CRUpFxQCHPHlyXQXgEH9POlrrGSgAuabvp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107891},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codesandbox.io/s/react-flip-toolkit-spring-settings-explorer-vjrsh)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here](https://codesandbox.io/s/react-flip-toolkit-spring-settings-explorer-vjrsh). The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onStart | - | `function` | This callback prop will be called before any of the individual FLIP animations have started. It receives as arguments the HTMLElement of the Flipper and the decisionData object described elsewhere. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"3046160909b6b000b37398603c46db0b0338a67f","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.15.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.17.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.8.1","flip-toolkit":"7.1.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^9.6.6","jest":"^26.6.2","react":"^18.2.0","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^8.40.0","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.11.0","react-dom":"^18.2.0","babel-jest":"^29.5.0","typescript":"^5.0.4","@babel/core":"^7.21.8","@types/jest":"^29.5.1","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^18.2.6","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^5.0.1","@babel/runtime":"^7.21.5","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^18.2.4","@babel/preset-env":"^7.21.5","styled-components":"^4.4.1","@babel/preset-react":"^7.18.6","eslint-plugin-react":"^7.32.2","react-test-renderer":"^18.2.0","@babel/preset-typescript":"^7.21.5","@typescript-eslint/parser":"^5.59.5","@types/react-test-renderer":"^18.0.0","@typescript-eslint/eslint-plugin":"^5.59.5"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.1.0-0_1684098039277_0.018113814050825905","host":"s3://npm-registry-packages"}},"7.1.0":{"name":"react-flip-toolkit","version":"7.1.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.1.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"11b990c8f27ee713ef90bdc0871bde8fec2e0aa6","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.1.0.tgz","fileCount":16,"integrity":"sha512-KJ2IecKpYOJWgtXY9myyJzzC96FJaE9/8pFSAKgIoG54tiUAZ64ksDpmB+QmMofqFTa06RK7xWb9Rfavf8qz4Q==","signatures":[{"sig":"MEYCIQD2Gtjy2qgw6xdasMVgHOoJfj7gBMmiWGFwtTfWSnKeggIhAMoEcjrZQDezfWr9wm+ZJh3qY+Ttn3UwULX4FTAUGTXi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107887},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"85d85e076aade1cf9cc5de51d84154b781ea70ac","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.15.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.17.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.8.1","flip-toolkit":"7.1.0"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^9.6.6","jest":"^26.6.2","react":"^18.2.0","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^8.40.0","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.11.0","react-dom":"^18.2.0","babel-jest":"^29.5.0","typescript":"^5.0.4","@babel/core":"^7.21.8","@types/jest":"^29.5.1","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^18.2.6","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^5.0.1","@babel/runtime":"^7.21.5","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^18.2.4","@babel/preset-env":"^7.21.5","styled-components":"^4.4.1","@babel/preset-react":"^7.18.6","eslint-plugin-react":"^7.32.2","react-test-renderer":"^18.2.0","@babel/preset-typescript":"^7.21.5","@typescript-eslint/parser":"^5.59.5","@types/react-test-renderer":"^18.0.0","@typescript-eslint/eslint-plugin":"^5.59.5"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.1.0_1684106903657_0.7761503107002732","host":"s3://npm-registry-packages"}},"7.2.0":{"name":"react-flip-toolkit","version":"7.2.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.2.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"b7210f88ea57e42e9295d9b14c2d143dc50bb1e4","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.2.0.tgz","fileCount":18,"integrity":"sha512-V4uSUDpy2AkZzVPAijFhXyX4ngRP5OW4jQAz8XLBQDvI8XNxtD88Vxz91niIZaSIi3N13N5wI+dUhlOItNdnow==","signatures":[{"sig":"MEQCICTNUC2c7mquR62lOxq2czVfOSBe9+kptf0Ds5fUn3dtAiAP+ztEmAXaqac9MzWdh6s1fQ+rtIX/CIq3A17hcZLkHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":128635},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"exports":"./lib/index.modern.mjs","gitHead":"63b914792574c171e26dca47e25c12eb9615ab24","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"10.5.2","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"20.13.1","browserslist":["> 1%","last 2 versions"],"dependencies":{"prop-types":"^15.8.1","flip-toolkit":"7.2.0"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^10.8.1","jest":"^26.6.3","react":"^18.3.1","sinon":"^9.2.4","watch":"^1.0.2","eslint":"^8.57.0","parcel":"^1.12.4","ts-jest":"^26.5.6","prettier":"^2.8.8","npm-watch":"^0.13.0","react-dom":"^18.3.1","babel-jest":"^29.5.0","typescript":"^5.5.3","@babel/core":"^7.24.7","@types/jest":"^29.5.12","microbundle":"0.15.1","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^18.3.3","@emotion/core":"^10.3.1","normalize.css":"^8.0.1","react-scripts":"^5.0.1","@babel/runtime":"^7.24.7","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^18.3.0","@babel/preset-env":"^7.24.7","styled-components":"^4.4.1","@babel/preset-react":"^7.24.7","eslint-plugin-react":"^7.34.3","react-test-renderer":"^18.3.1","@babel/preset-typescript":"^7.24.7","@typescript-eslint/parser":"^5.62.0","@types/react-test-renderer":"^18.3.0","@typescript-eslint/eslint-plugin":"^5.62.0"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.2.0_1720146674959_0.7239803020675253","host":"s3://npm-registry-packages"}},"7.2.4":{"name":"react-flip-toolkit","version":"7.2.4","description":"Configurable FLIP animation helpers for React","license":"MIT","source":"src/index.ts","main":"lib/index.js","module":"lib/index.es.js","types":"lib/index.d.ts","amdName":"ReactFlipToolkit","repository":{"type":"git","url":"git+https://github.com/aholachek/react-flip-toolkit.git"},"bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"author":{"name":"Alex Holachek"},"keywords":["react-component","FLIP","transition","animation"],"engines":{"node":">=8","npm":">=5"},"scripts":{"microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","start":"parcel --no-cache demo/index.html --out-dir demo/lib","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","build":"cp ../../README.md ./README.md; yarn microbundle","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","watch":"watch 'npm run build:no-compress' ./src","build:no-compress":"microbundle --no-compress","check-types":"tsc --noEmit","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","inspect":"npx source-map-explorer lib/","lint":"eslint src/**/*.{ts,tsx}","format":"npx prettier --write 'src/**/*.{ts,tsx}'","fix":"eslint src/**/*.{ts,tsx} --fix","format-and-fix":"npm-run-all format fix","test":"jest --testPathIgnorePatterns \"lib|domtest\"","preversion":"npm test","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","version":"npm run build","prepublish":"npm run build"},"dependencies":{"flip-toolkit":"7.2.4","prop-types":"^15.8.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"devDependencies":{"@babel/core":"^7.24.7","@babel/preset-env":"^7.24.7","@babel/preset-react":"^7.24.7","@babel/preset-typescript":"^7.24.7","@babel/runtime":"^7.24.7","@emotion/core":"^10.3.1","@types/jest":"^29.5.12","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@types/react-test-renderer":"^18.3.0","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0","babel-jest":"^29.5.0","babel-polyfill":"^6.26.0","eslint":"^8.57.0","eslint-plugin-react":"^7.34.3","jest":"^26.6.3","lodash.shuffle":"^4.2.0","microbundle":"0.15.1","normalize.css":"^8.0.1","npm":"^10.8.1","npm-run-all":"^4.1.5","npm-watch":"^0.13.0","parcel":"^1.12.4","prettier":"^2.8.8","react":"^18.3.1","react-dom":"^18.3.1","react-icons":"^3.11.0","react-scripts":"^5.0.1","react-test-renderer":"^18.3.1","sinon":"^9.2.4","styled-components":"^4.4.1","ts-jest":"^26.5.6","typescript":"^5.5.3","watch":"^1.0.2"},"browserslist":["> 1%","last 2 versions"],"_id":"react-flip-toolkit@7.2.4","gitHead":"2d00d4517d926598122242c8f40d05ae48553044","homepage":"https://github.com/aholachek/react-flip-toolkit#readme","_nodeVersion":"20.13.1","_npmVersion":"10.5.2","dist":{"integrity":"sha512-+aZBZwzHBDfJzMRLjAAOKiBkrk8PV0YFVE0k1x85+UsykApLwg8a0LlQ5H80uFltFZmGtrQ7EE1krhiZ1jI5ig==","shasum":"4eb10f89cc1081209446a4b04c10416403865fbd","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.2.4.tgz","fileCount":16,"unpackedSize":113873,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+pm5wq0xozGNqc1mnbyTLSSGyiHwnftCUI7imuxvyMAiBqDz9rA1v6wVgeg73yJoVusk2a++aj0uPNOdZHPbx2HA=="}]},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"directories":{},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-flip-toolkit_7.2.4_1720285397323_0.6569639034499473"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-18T00:09:59.516Z","modified":"2024-07-06T17:03:17.761Z","1.0.0":"2018-06-18T00:09:59.608Z","1.0.1":"2018-06-19T14:19:53.233Z","1.0.2":"2018-06-19T23:10:40.585Z","1.0.3":"2018-06-20T00:51:29.097Z","1.0.4":"2018-06-20T00:52:07.505Z","1.0.5":"2018-06-20T01:39:07.988Z","1.0.6":"2018-06-20T03:33:41.836Z","1.0.7":"2018-06-20T03:43:05.062Z","1.0.8":"2018-06-20T03:45:26.626Z","1.0.9":"2018-06-20T11:08:39.778Z","1.1.0":"2018-06-21T22:09:12.586Z","1.1.1":"2018-06-23T03:21:16.977Z","1.1.2":"2018-06-23T14:57:26.423Z","1.1.3":"2018-06-23T15:53:59.204Z","1.1.4":"2018-06-23T18:07:25.910Z","1.1.5":"2018-06-24T00:27:27.893Z","1.1.6":"2018-06-24T15:41:24.163Z","1.1.7":"2018-06-24T15:47:47.615Z","1.1.8":"2018-06-24T21:50:03.837Z","1.1.9":"2018-06-24T21:56:43.004Z","1.1.10":"2018-06-24T22:05:16.130Z","1.1.11":"2018-06-24T22:38:29.174Z","1.1.12":"2018-06-24T23:11:57.669Z","1.0.0-alpha.2":"2018-06-25T13:03:28.263Z","1.0.0-alpha.3":"2018-06-25T13:06:12.243Z","1.0.0-alpha.4":"2018-06-25T13:07:29.380Z","1.0.0-alpha.5":"2018-06-25T13:15:46.520Z","1.0.0-alpha.6":"2018-06-25T13:17:42.375Z","1.1.13-0":"2018-06-25T13:28:17.786Z","1.1.13-1":"2018-06-25T13:31:48.047Z","1.1.13-2":"2018-06-25T13:34:38.110Z","1.1.13-6":"2018-06-25T13:41:38.884Z","1.1.13-7":"2018-06-25T16:12:49.834Z","1.1.13":"2018-06-25T16:20:16.221Z","1.1.14":"2018-06-25T19:25:01.798Z","1.1.15-0":"2018-06-26T01:53:40.397Z","1.1.15-2":"2018-06-27T03:28:53.155Z","1.1.15-3":"2018-06-27T19:09:46.358Z","1.1.15-4":"2018-06-27T19:51:45.041Z","1.1.15-5":"2018-06-27T19:56:25.668Z","1.1.15-6":"2018-06-27T21:12:13.114Z","2.0.0":"2018-06-28T17:56:10.935Z","2.0.1":"2018-06-28T17:58:23.586Z","2.0.2":"2018-06-28T18:08:55.932Z","2.0.3":"2018-06-28T20:45:32.482Z","2.0.4":"2018-06-29T12:19:44.770Z","2.0.5":"2018-06-29T13:08:49.732Z","2.0.6":"2018-06-29T13:11:32.356Z","2.0.7":"2018-06-29T16:22:07.867Z","2.0.8":"2018-06-29T16:57:14.257Z","2.0.9":"2018-07-03T02:06:15.632Z","3.0.0-0":"2018-07-08T16:36:28.445Z","3.0.0-beta1":"2018-07-08T16:48:47.803Z","3.0.0-beta2":"2018-07-08T19:55:03.835Z","3.0.0-beta3":"2018-07-08T21:20:27.959Z","3.0.0-beta4":"2018-07-08T22:58:39.752Z","3.0.0":"2018-07-09T02:16:08.030Z","3.0.1-beta2":"2018-07-11T12:10:33.921Z","3.0.1":"2018-07-11T13:29:35.779Z","3.0.2":"2018-07-11T16:56:00.478Z","3.0.3":"2018-07-11T21:53:16.585Z","3.0.4-beta2":"2018-07-12T00:58:53.500Z","3.0.4":"2018-07-12T02:03:03.919Z","3.0.5-beta1":"2018-07-13T03:01:53.903Z","3.0.5":"2018-07-13T03:14:21.793Z","3.0.6-beta1":"2018-07-21T22:42:16.653Z","3.0.6-beta2":"2018-07-22T00:46:00.972Z","3.0.6-beta3":"2018-07-22T21:42:36.282Z","3.0.6-beta4":"2018-07-22T21:58:58.864Z","3.1.0":"2018-07-23T02:42:25.486Z","3.1.1":"2018-07-23T11:38:04.285Z","4.0.0-beta1":"2018-08-02T10:50:40.159Z","4.0.0-beta2":"2018-08-04T15:02:22.214Z","4.0.0-beta3":"2018-08-04T15:48:06.732Z","4.0.0-beta4":"2018-08-04T16:28:34.655Z","4.0.0-beta5":"2018-08-04T16:48:55.139Z","4.0.0-beta6":"2018-08-04T22:48:48.735Z","4.0.0-beta7":"2018-08-05T02:54:24.602Z","4.0.0":"2018-08-05T14:26:53.778Z","4.0.1-beta1":"2018-08-12T04:08:32.800Z","4.0.1":"2018-08-16T15:26:30.336Z","4.0.2":"2018-08-16T15:30:22.101Z","4.1.0-beta1":"2018-08-31T19:22:44.177Z","4.1.0-beta2":"2018-08-31T21:08:48.069Z","4.1.0-beta3":"2018-09-01T16:13:07.518Z","4.1.0-beta5":"2018-09-01T18:01:37.729Z","4.0.3-beta1":"2018-09-02T17:36:59.524Z","4.0.3":"2018-09-02T18:41:49.003Z","4.0.4":"2018-09-02T19:00:19.534Z","4.0.5":"2018-09-02T20:42:48.897Z","4.0.6":"2018-09-06T22:17:36.186Z","4.0.7":"2018-09-15T04:36:44.503Z","4.0.8":"2018-09-17T20:21:06.770Z","4.0.9":"2018-09-17T20:48:25.703Z","5.0.0-beta0":"2018-09-28T02:20:53.151Z","5.0.0-beta1":"2018-09-28T13:19:58.771Z","5.0.0":"2018-09-28T15:08:35.486Z","5.0.1-beta":"2018-09-28T22:12:14.701Z","5.0.1":"2018-09-28T22:16:00.594Z","5.0.2":"2018-10-04T21:28:44.857Z","5.0.3-beta1":"2018-10-17T00:53:24.753Z","5.0.3":"2018-10-17T23:33:36.282Z","5.0.4":"2018-10-19T14:57:11.668Z","5.0.5":"2018-10-21T13:54:46.855Z","6.0.0-beta0":"2018-11-06T13:54:06.409Z","6.0.0-beta2":"2018-11-08T02:46:43.621Z","6.0.0-beta3":"2018-11-09T00:59:56.113Z","6.0.0":"2018-11-09T15:33:36.041Z","6.1.0-beta0":"2018-11-09T18:00:12.348Z","6.1.0-beta1":"2018-11-09T22:58:57.918Z","6.1.0-beta2":"2018-11-11T21:05:54.210Z","6.1.0":"2018-11-12T16:20:42.534Z","6.1.1-beta0":"2018-11-12T19:09:24.068Z","6.1.1-beta1":"2018-11-12T20:35:45.403Z","6.1.1-beta2":"2018-11-12T22:00:54.091Z","6.2.0":"2018-11-12T23:49:22.488Z","6.2.1-beta0":"2018-11-13T18:55:05.274Z","6.2.1-beta1":"2018-11-13T21:17:24.889Z","6.2.1":"2018-11-14T02:12:06.477Z","6.2.2":"2018-11-19T15:14:51.739Z","6.2.3-beta0":"2018-11-25T14:12:29.253Z","6.3.0":"2018-11-25T14:28:22.278Z","6.3.1-beta0":"2018-12-15T20:59:45.033Z","6.3.1-beta1":"2018-12-15T21:24:48.217Z","6.3.1":"2018-12-15T21:29:47.906Z","6.3.2":"2018-12-28T18:14:04.960Z","6.3.3":"2019-01-01T14:39:27.820Z","6.3.4-0":"2019-01-02T20:22:09.467Z","6.3.4-1":"2019-01-02T20:38:56.881Z","6.3.4-2":"2019-01-02T21:33:37.259Z","6.3.4-3":"2019-01-02T21:45:39.064Z","6.3.4-4":"2019-01-02T22:50:56.774Z","6.3.4-5":"2019-01-03T01:47:36.071Z","6.3.4-6":"2019-01-03T15:57:20.154Z","6.3.4-7":"2019-01-03T16:05:59.294Z","6.3.4-8":"2019-01-03T16:33:46.529Z","6.3.4-10":"2019-01-03T19:44:56.734Z","6.3.4-11":"2019-01-03T22:08:52.415Z","6.3.4-13":"2019-01-03T22:49:50.556Z","6.4.0":"2019-01-04T02:08:53.865Z","6.4.1":"2019-01-08T01:10:05.609Z","6.5.0-beta0":"2019-01-10T18:40:00.044Z","6.5.0":"2019-01-10T19:35:40.621Z","6.5.1":"2019-01-10T22:00:34.577Z","6.5.2":"2019-01-15T02:08:37.384Z","6.5.3-0":"2019-01-16T20:12:56.623Z","6.5.3":"2019-01-16T21:47:14.846Z","6.5.4":"2019-01-19T00:44:13.438Z","6.5.5":"2019-01-19T02:24:44.230Z","6.5.6-0":"2019-02-18T21:05:48.913Z","6.5.6":"2019-02-18T21:22:07.204Z","6.5.7":"2019-02-22T01:01:19.337Z","6.5.8":"2019-04-10T13:49:02.654Z","6.5.9":"2019-04-13T14:56:12.502Z","6.5.10-0":"2019-05-08T13:18:33.683Z","6.6.0-0":"2019-05-18T19:53:07.782Z","6.6.0":"2019-05-18T20:58:52.610Z","6.6.1":"2019-05-20T13:33:03.163Z","6.6.2":"2019-05-22T02:10:48.182Z","6.6.3":"2019-05-25T14:59:07.960Z","6.6.4-0":"2019-06-16T04:06:51.868Z","6.6.4":"2019-06-16T13:28:52.953Z","6.6.5-0":"2019-06-24T17:20:14.530Z","6.6.5":"2019-06-24T23:36:54.210Z","6.6.6-0":"2019-07-04T23:32:59.318Z","6.6.6-1":"2019-07-05T00:45:57.396Z","6.6.6":"2019-07-05T00:53:37.083Z","6.6.7-1":"2019-07-05T12:20:47.832Z","6.6.7":"2019-07-05T12:31:36.447Z","6.6.8-0":"2019-07-05T13:32:53.296Z","6.6.8":"2019-07-05T13:50:51.534Z","6.6.9-0":"2019-07-09T10:55:23.905Z","6.6.9":"2019-07-09T11:21:46.011Z","7.0.0-alpha.0":"2019-08-09T01:11:21.697Z","7.0.0-alpha.1":"2019-08-09T01:24:51.582Z","7.0.0-7.0.0-alpha.2.0":"2019-08-13T00:31:00.081Z","7.0.0-alpha.2.0":"2019-08-13T00:38:35.073Z","7.0.0-alpha.3":"2019-08-13T01:46:59.587Z","7.0.0-beta.1":"2019-08-13T13:31:24.838Z","7.0.0-beta.2":"2019-08-13T13:41:26.411Z","7.0.0-7.0.0-alpha.4.0":"2019-08-13T15:56:58.626Z","7.0.0-alpha-4.1.0":"2019-08-13T18:05:35.744Z","7.0.0-alpha-4.2.0":"2019-08-15T00:40:29.875Z","7.0.0-5.0":"2019-08-15T13:11:50.671Z","7.0.0-alpha.5":"2019-08-15T13:17:07.141Z","7.0.0-alpha.6":"2019-08-15T17:47:13.197Z","7.0.0-alpha.7":"2019-08-15T18:00:45.504Z","7.0.0-alpha.8":"2019-08-15T18:04:50.597Z","7.0.0-alpha.9":"2019-08-15T18:08:56.975Z","7.0.0-alpha.10":"2019-08-15T18:32:54.765Z","7.0.0-alpha.11":"2019-08-15T19:07:12.580Z","7.0.0-alpha.12":"2019-08-15T20:17:26.685Z","7.0.0-beta.4":"2019-08-15T21:05:53.934Z","7.0.0":"2019-08-16T01:22:10.090Z","7.0.1":"2019-08-16T12:42:08.001Z","7.0.2":"2019-08-16T13:06:12.007Z","7.0.3":"2019-08-22T11:45:25.209Z","7.0.4-beta.0":"2019-08-31T14:01:25.662Z","7.0.4":"2019-08-31T14:58:52.865Z","7.0.5-0":"2019-09-05T17:15:34.988Z","7.0.5-1":"2019-09-05T17:21:51.990Z","7.0.5":"2019-09-05T17:43:39.025Z","7.0.6-0":"2019-09-26T23:51:10.551Z","7.0.6":"2019-09-29T12:19:12.797Z","7.0.7":"2019-11-09T18:40:38.594Z","7.0.8":"2020-02-17T17:42:24.747Z","7.0.9":"2020-03-09T20:43:42.764Z","7.0.10-0":"2020-03-09T21:07:41.892Z","7.0.10":"2020-05-30T15:47:41.282Z","7.0.12-1":"2020-06-11T12:48:12.194Z","7.0.11":"2020-06-11T15:01:38.336Z","7.0.12-0":"2020-06-11T23:50:15.834Z","7.0.12":"2020-06-11T23:54:13.918Z","7.0.13-0":"2020-11-05T17:41:26.379Z","7.0.13-1":"2020-11-05T17:53:09.487Z","7.0.13":"2020-11-05T22:17:32.245Z","7.0.14":"2022-05-13T15:36:37.868Z","7.0.16":"2022-09-04T02:43:57.008Z","7.0.17":"2022-09-30T21:56:28.061Z","7.1.0-0":"2023-05-14T21:00:39.483Z","7.1.0":"2023-05-14T23:28:23.803Z","7.2.0":"2024-07-05T02:31:15.155Z","7.2.4":"2024-07-06T17:03:17.589Z"},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"author":{"name":"Alex Holachek"},"repository":{"type":"git","url":"git+https://github.com/aholachek/react-flip-toolkit.git"},"keywords":["react-component","FLIP","transition","animation"],"license":"MIT","homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"readme":"\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n \n \n \n )\n}\n```\n\n### Simple Example: Two Divs\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst FullScreenSquare = ({ toggleFullScreen }) => (\n \n \n \n)\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n {fullScreen ? (\n \n )\n}\n```\n\n### Simple Example: List Shuffle\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n \n \n \n )\n}\n```\n\n### List Transitions\n\nAdd some interest to a dynamic list of cards by animating changes to cards' sizes and positions.\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n \n```\n\n\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n {/* Flipped components go here...*/}\n \n```\n\nor a custom spring config:\n\n```jsx\n\n {/* Flipped components go here...*/}\n \n```\n[View all spring options in the interactive explorer](https://codesandbox.io/s/react-flip-toolkit-spring-settings-explorer-vjrsh)\n\n\n### Nested Scale Transforms\n\n\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n```\n\nBy 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).\nBut 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.\n\nNote: the DOM element with the inverse transform should lie flush against its parent container for the most seamless animation.\n\nThat 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.\n\n\n\n### Route-based Animations With React Router\n\n\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n {\n return (\n \n {/* Child routes that contain Flipped components go here...*/}\n \n )\n }}\n/>\n```\n\n### More examples\n\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n## The Components\n\n### `Flipper`\n\nThe 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.\n\n```jsx\n{/* children */} \n```\n\n#### Basic Props\n\n| prop | default | type | details |\n| ----------------------- | :--------: | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| flipKey **(required)** | - | `string`, `number`, `bool` | Changing this tells `react-flip-toolkit` to transition child elements wrapped in `Flipped` components. |\n| children **(required)** | - | `node` | One or more element children |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here](https://codesandbox.io/s/react-flip-toolkit-spring-settings-explorer-vjrsh). The prop provided here will be the spring default that can be overrided on a per-element basis on the `Flipped` component. |\n| applyTransformOrigin | `true` | `bool` | Whether or not `react-flip-toolkit` should apply a transform-origin of \"0 0\" to animating children (this is generally, but not always, desirable for FLIP animations) |\n| element | `div` | `string` | If you'd like the wrapper element created by the `Flipped` container to be something other than a `div`, you can specify that here. |\n| className | - | `string` | A class applied to the wrapper element, helpful for styling. |\n| staggerConfig | - | `object` | Provide configuration for staggered `Flipped` children. The config object might look something like the code snippet below: |\n\n```js\nstaggerConfig={{\n // the \"default\" config will apply to staggered elements without explicit keys\n default: {\n // default direction is forwards\n reverse: true,\n // default is .1, 0 < n < 1\n speed: .5\n },\n // this will apply to Flipped elements with the prop stagger='namedStagger'\n namedStagger : { speed: .2 }\n }}\n```\n\n#### Advanced Props\n\n| prop | default | type | details |\n| ----------------------- | :-----: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| decisionData | - | `any` | Sometimes, you'll want the animated children of `Flipper` to behave differently depending on the state transition — maybe only certain `Flipped` elements should animate in response to a particular change. By providing the `decisionData` prop to the `Flipper` component, you'll make that data available to the `shouldFlip` and `shouldInvert` methods of each child `Flipped` component, so they can decided for themselves whether to animate or not. |\n| debug | `false` | `boolean` | This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |\n| portalKey | - | `string` | In general, the `Flipper` component will only apply transitions to its descendents. This allows multiple `Flipper` elements to coexist on the same page, but it will prevent animations from working if you use [portals](https://reactjs.org/docs/portals.html). You can provide a unique `portalKey` prop to `Flipper` to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |\n| onStart | - | `function` | This callback prop will be called before any of the individual FLIP animations have started. It receives as arguments the HTMLElement of the Flipper and the decisionData object described elsewhere. |\n| onComplete | - | `function` | This callback prop will be called when all individual FLIP animations have completed. Its single argument is a list of `flipId`s for the `Flipped` components that were activated during the animation. If an animation is interrupted, `onComplete` will be still called right before the in-progress animation is terminated. |\n| handleEnterUpdateDelete | - | `function` | By default, `react-flip-toolkit` finishes animating out exiting elements before animating in new elements, with updating elements transforming immediately. You might want to have more control over the sequence of transitions — say, if you wanted to hide elements, pause, update elements, pause again, and finally animate in new elements. Or you might want transitions to happen simultaneously. If so, provide the function `handleEnterUpdateDelete` as a prop. [The best way to understand how this works is to check out this interactive example.](https://codesandbox.io/s/4q7qpkn8q0) `handleEnterUpdateDelete` receives the following arguments every time a transition occurs: |\n\n```js\nhandleEnterUpdateDelete({\n // this func applies an opacity of 0 to entering elements so\n // they can be faded in - it should be called immediately\n hideEnteringElements,\n // calls `onAppear` for all entering elements\n animateEnteringElements,\n //calls `onExit` for all exiting elements\n // returns a promise that resolves when all elements have exited\n animateExitingElements,\n // the main event: `FLIP` animations for updating elements\n // this also returns a promise that resolves when\n // animations have completed\n animateFlippedElements\n})\n```\n\n### `Flipped`\n\nWraps an element that should be animated.\n\nE.g. in one component you can have\n\n```jsx\n\n \n \n```\n\nand in another component somewhere else you can have\n\n```jsx\n\n \n \n```\n\nand they will be tweened by `react-flip-toolkit`.\n\nThe `Flipped` component produces no markup, it simply passes some props down to its wrapped child.\n\n#### Wrapping a React Component\n\nIf 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:\n\n```jsx\n\n {flippedProps => \n\nconst MyCoolComponent = ({ flippedProps }) => \n```\n\nYou 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):\n\n```jsx\n\n \n\nconst MyCoolComponent = ({ knownProp, ...rest }) => \n```\n\n#### Basic props\n\n| prop | default | type | details |\n| ------------------------------------------------------ | :--------: | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children **(required)** | - | `node` or `function` | Wrap a single element, React component, or render prop child with the `Flipped` component |\n| flipId **(required unless inverseFlipId is provided)** | - | `string` | Use this to tell `react-flip-toolkit` how elements should be matched across renders so they can be animated. |\n| inverseFlipId | - | `string` | Refer to the id of the parent `Flipped` container whose transform you want to cancel out. If this prop is provided, the `Flipped` component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided `transform` props and will ignore all other props (besides `inverseFlipId`.) [Read more about canceling out parent transforms here.](#practical-scale-transitions) |\n| transformOrigin | `\"0 0\"` | `string` | This is a convenience method to apply the proper CSS `transform-origin` to the element being FLIP-ped. This will override `react-flip-toolkit`'s default application of `transform-origin: 0 0;` if it is provided as a prop. |\n| spring | `noWobble` | `string` or `object` | Provide a string referencing one of the spring presets — `noWobble` (default), `veryGentle`, `gentle`, `wobbly`, or `stiff`, OR provide an object with stiffness and damping parameters. [Explore the spring setting options here.](https://codepen.io/aholachek/full/bKmZbV/) |\n| stagger | `false` | `boolean` or `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide `true` to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |\n| delayUntil | `false` | `string` (flipId) | Delay an animation by providing a reference to another `Flipped` component that it should wait for before animating (the other `Flipped` component should have a stagger delay as that is the only use case in which this prop is necessary.) |\n\n#### Callback props\n\n\n\n\n\n## Global configuration functions\n\nYou can programmatically call the following functions if you need to disable (or re-enable) FLIP animations everywhere.\n\n#### `disableFlip()`\n\nGlobal switch to disable all animations in all `Flipper` containers.\n\n#### `enableFlip()`\n\nGlobal switch to (re-)enable all animations in all `Flipper` containers. Animations are enabled by default. Calling this function is needed only if animations were previously disabled with `disableFlip()`.\n\n#### `isFlipEnabled()`\n\nReturns a boolean indicating whether animations are globally enabled or disabled.\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, and Edge with [Browserstack](https://www.browserstack.com/).\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n- Do you have the [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) setting turned on? As of v7.1.0 that setting will disable all animations.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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, try seeing if it increases the performance of the animation.\n","readmeFilename":"README.md"}
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\nApply the debug prop to have the FLIP animation pause at the very beginning:\n\n\n\nWe see here that the pink outline surrounding the center contents extends much further than the actual text and button. It turns out that we're flipping a wrapper `div` rather than the actual text and button:\n\n```jsx\n\n
\n{this.props.text}
\n \n\n\nNow, the pink outline is hugging the elements that are being animated, so they are no longer getting warped.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n {/* card content goes here */ }\n
\n \n \n \n \n
|\n\n\n## Table of Contents\n- [Demos](#demos)\n- [**Quick start**](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n
Image Transitions
\n\n\n\n\n\n\n
Usage with React Router
\n\n\n\n\n\n\n
Stripe-Inspired Menu
\n\n\n\n\n\n\n
List Transition
\n\n\n\n\n\n\n
Spring Options Explorer
\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://react-flip-toolkit-demos.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [Overly complex, nested cards example](https://react-flip-toolkit-demos.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n\n## Quick start\n\n`npm install react-flip-toolkit`\n\nWrap your container element with a `Flipper` component that has a `flipKey` prop that changes every time an animation should happen.\n\nWrap elements that should be animated with `Flipped` components that have `flipId` props matching them across renders.\n\n### Simplest example: tweening a single element\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
|\n\n\n## Table of Contents\n- [Demos](#demos)\n- [**Quick start**](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n
Image Transitions
\n\n\n\n\n\n\n
Usage with React Router
\n\n\n\n\n\n\n
Stripe-Inspired Menu
\n\n\n\n\n\n\n
List Transition
\n\n\n\n\n\n\n
Spring Options Explorer
\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://react-flip-toolkit-demos.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [Overly complex, nested cards example](https://react-flip-toolkit-demos.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n\n## Quick start\n\n`npm install react-flip-toolkit`\n\nWrap your container element with a `Flipper` component that has a `flipKey` prop that changes every time an animation should happen.\n\nWrap elements that should be animated with `Flipped` components that have `flipId` props matching them across renders.\n\n### Simplest example: tweening a single element\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
|\n\n\n## Table of Contents\n- [Demos](#demos)\n- [**Quick start**](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n
Image Transitions
\n\n\n\n\n\n\n
Usage with React Router
\n\n\n\n\n\n\n
Stripe-Inspired Menu
\n\n\n\n\n\n\n
List Transition
\n\n\n\n\n\n\n
Spring Options Explorer
\n\n\n\n\n\n- [Updating list (`react-flip-move` example clone)](https://react-flip-toolkit-demos.surge.sh/flip-move)\n- [Simplest possible example](https://codepen.io/aholachek/pen/oyKJgL)\n- [Guitar shop](https://react-flip-toolkit-demos.surge.sh/guitar)\n- [Overly complex, nested cards example](https://react-flip-toolkit-demos.surge.sh/cards)\n- [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)\n- [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)\n\n\n## Quick start\n\n`npm install react-flip-toolkit`\n\nWrap your container element with a `Flipper` component that has a `flipKey` prop that changes every time an animation should happen.\n\nWrap elements that should be animated with `Flipped` components that have `flipId` props matching them across renders.\n\n### Simplest example: tweening a single element\n\n```jsx\nimport React, { Component } from React;\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nclass AnimatedSquare extends Component {\n state = { fullScreen: false };\n\n toggleFullScreen = () => {\n this.setState(prevState => ({\n fullScreen: !prevState.fullScreen\n }));\n };\n\n render() {\n return (\n \n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
|\n\n\n## Table of Contents\n- [Demos](#demos)\n- [🆕 Interactive Tutorial](https://alex.holachek.com/rft-tutorial/)\n- [Quick start](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
|\n\n\n## Table of Contents\n- [Demos](#demos)\n- [🆕 Interactive Tutorial](https://alex.holachek.com/rft-tutorial/)\n- [Quick start](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
|\n\n\n## Table of Contents\n- [Demos](#demos)\n- [🆕 Interactive Tutorial](https://alex.holachek.com/rft-tutorial/)\n- [Quick start](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Props](#props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n- [Performance](#performance)\n\n## Demos\n\n\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
|\n\n\n## Table of Contents\n- [Table of Contents](#table-of-contents)\n- [Demos](#demos)\n- [Quick start](#quick-start)\n- [The Components](#the-components)\n - [1. `Flipper`](#1-flipper)\n - [Basic Props](#basic-props)\n - [Advanced Props](#advanced-props)\n - [2. `Flipped`](#2-flipped)\n - [Basic props](#basic-props)\n - [Callback props](#callback-props)\n - [Transform props](#transform-props)\n - [Advanced props](#advanced-props)\n- [Scale transitions made eas(ier)](#scale-transitions-made-easier)\n- [Library details](#library-details)\n- [Troubleshooting](#troubleshooting)\n - [Problem #1: Nothing is happening](#problem-1-nothing-is-happening)\n - [Problem #2: Things look weird:](#problem-2-things-look-weird)\n - [It's still not working: try out the `debug` prop](#its-still-not-working-try-out-the-debug-prop)\n- [Performance](#performance)\n - [1. `PureComponent`](#1-purecomponent)\n - [2. `will-change:transform`](#2-will-changetransform)\n\n## Demos\n\n\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n \n \n {this.state.data.map(d => (\n \n {d} \n \n ))}\n \n
\n );\n }\n}\n```\n[Fork it on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n## The Components\n\n### 1. `Flipper`\n\nThe parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.\n\n```jsx\n\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n \n\n [Learn how to easily set up the above animation with this step-by-step tutorial.](https://alex.holachek.com/rft-tutorial/)\n\n## Practical scale transitions\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n \n\n [Learn how to easily set up the above animation with this step-by-step tutorial.](https://alex.holachek.com/rft-tutorial/)\n\n## Practical scale transitions\n\nSome other FLIP libraries just allow you to animate position changes, but things get more interesting [once you can animate scale changes as well](#demos).\n\n\n\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n ![animation of a sentence transforming into another sentence](\"./example-assets/enter-update-delete.gif\")
\n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n {/* card content goes here */ }\n
\n \n \n \n \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n {/* card content goes here */ }\n
\n \n \n \n \n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n\n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n {/* card content goes here */ }\n
\n \n \n \n \n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n - Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n - 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n - 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.\n \n### Problem #2: Things look weird\n - 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. Check to make sure all `flipId`s are unique.\n - 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.\n - Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\n\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n \n {/* card content goes here */ }\n
\n \n \n \n \n
- \n {this.state.data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird\n\n- 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. Check to make sure all `flipId`s are unique.\n- 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.\n- Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n {/* card content goes here */}
\n \n \n \n \n
- \n {data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird\n\n- 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. Check to make sure all `flipId`s are unique.\n- 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.\n- Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n {/* card content goes here */}
\n \n \n \n \n
- \n {data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird\n\n- 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. Check to make sure all `flipId`s are unique.\n- 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.\n- Make sure you don't have any competing CSS transitions on the element in question.\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n {/* card content goes here */}
\n \n \n \n \n
- \n {data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n {/* card content goes here */}
\n \n \n \n \n
- \n {data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n {/* card content goes here */}
\n \n \n \n \n
- \n {data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n {/* card content goes here */}
\n \n \n \n \n
- \n {data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n {/* card content goes here */}
\n \n \n \n \n
- \n {data.map(d => (\n
- {d} \n
\n\nImage Transitions
\n\n \n\n
\n\nUsage with React Router
\n\n \n\n
\n\nStripe-Inspired Menu
\n\n \n\n
\n\nControl the sequence of entering, updating, and exiting elements
\n \n\n
\n\nSpring Options Explorer
\n\n \n\n
\n\n \n\n
\n\n\n[view on Codepen](https://codepen.io/aholachek/pen/mKXBJR)\n\nThe 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### 1. `PureComponent`\n\nWhen 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 using [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\nFor example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a `Card` component that looks like this:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass Card extends Component {\n render() {\n return (\n {/* card content goes here */}
\n \n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"978368a327a048c2b94bf2fe90f8ea1c63ace07c","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v10.14.0+x64 (darwin)","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.4-beta.0_1567260085495_0.2608911377191374","host":"s3://npm-registry-packages"}},"7.0.4":{"name":"react-flip-toolkit","version":"7.0.4","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.4","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"a48745606dda75429ce2e86929aa4ac3998c64fd","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.4.tgz","fileCount":46,"integrity":"sha512-m+T7S6EG2mc5pU/JKrI+1IKi9n86W221euCwOb8qutBlDy4urAluwNHh0qNxn9Y0lLLBXtWsgTM5OD05D9CmNA==","signatures":[{"sig":"MEQCIHt39M2udEEX08gxSdNPRbNizRSXzsZ1m8Og5u1BaEY3AiBEg3AzMcjNr4NoaOdD8WEWK81OTZX8EihwJ0U479I/FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaostCRA9TVsSAnZWagAAgVYP/i8LggbSEGTRVcuCX2UZ\nC5qWh2EinwUtIAUjVBBHSr2lgrfQsUdMhXGWAC7bP9Lb7L/EriTdd3UhhXL1\n7XHtzw75ycn3Lq/IfHTphp9O/S1rdFXvrWuhSjhMQCq6WpYPUAh7my1kky1i\n4TI3jUv9NrSq6VROSAax1kz4YEfHZQB2euNy6dqX4Ji8lq9UEfSuT4ODj35+\n/BFriRTnG/aipbL8FLfsYSgk7uj1gM1YEtpEAavehCuay3YsKeBXZbxxjrHC\nh2qf+Tuuvu5A+FOvSlFi39KDMOHJPZTlySajmWo9y14YUWvWI/P5MgSH9F1d\nSZhn0odAJc66cxRkQokDJIMzHtYOogy2PRyhJZMnY1kWt9ZXE+923iecQ5MP\nUOl/XpW+kONzLdzuBZnYP7RfABDRUlZqmoRCeSnc/Js1W9efMBnaDAue/Fhu\nCx9fSqQYId8k88s2oRKtkwB7qHnyURcgZ8K0C/2UzT0ndzIu9D1WnPknXwC3\nlsWIy+WFH/ncAZy9ePiXYNWpyyFzx/ntvFJg0Z0JmHGx+I/BlYppvH2MOuw4\nZhgrY6L6vdNMxGad5AxlPIkw3U9X7aNYkhT0e1cvvX2qsZ0XgXoKIbHkGJr1\nNGMpR56gxDCkqbuAXAXgJ8LGHtjSXt5Cr5g0f6OML0ouRlxfjuQaxQaUV/+w\nOvkJ\r\n=cfPT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.4_1567263532705_0.5866757960304128","host":"s3://npm-registry-packages"}},"7.0.5-0":{"name":"react-flip-toolkit","version":"7.0.5-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.5-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"961bd74c9e081314177c226e91cd8feea83ea7fa","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.5-0.tgz","fileCount":46,"integrity":"sha512-yInJsqpPMIDYylYZozlCZBsbnuEZBcdPzxk0B2Th5N84ZBVLmBClrGLbv1M5DvaTBeYGo9FNljz+e96osPngIA==","signatures":[{"sig":"MEUCIAscWZKbYBM8H8Dye8zjpFZ3jk1HQeCDz60WJqcuwb9fAiEAs0wb9RStknbc6/+FmYjKo0anAuICW2gLRP6xzG+Yy6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcUK3CRA9TVsSAnZWagAAnFUQAJZ2JWHXyU/ZP9FFswgH\nh/xDbikJHhR80VMZOj7Z1yXvcXucWkF+TWx250gK/G7TeWQ76SnyPhDZurRX\nzLh6eReVEukBEMQwsPVNHLRD5XeWEqXcod0iZQAFLmwsy/nlL4jBItWphib1\nI1E6MdOEzURzw89IY+z+8pozgoGVEIhwbBREMBoNHi8IqKQqh3hT6TRaSW/2\nZ9ARnqULnvs5UuMGVvbFRc9nNt22W8nFwl3tEqzqv/rP3uIZCdX4qWHDvj71\nXMrXu7quIdKq5b9+bY17mDeks8hmgXyCYjvKj9SzPAHU9hopfWcfKKxqjwPP\naYYqMG9K8yo3VjMEJ1lbqYPqvwjwCtOCYq4njJx3Gi0YydFnM2MnUx6JXK46\ns/xJhPRiS3wCqWgOJ3CnuqQpxhUJyuASUKri4RpTBNQSmNd25kzFER4K1vtQ\nka/6ei4cDVNRmsmcFVoCbll6M/0ITrfiycUsgk7imhqWG3PSA7/H58+EI1Lf\n0TaT1ja7xQznSK/daODwd0YAx8HuSThjj0mMZ5rQ46W0Xhu78ieYklZLB18W\nmi5t7ld39QJjQmQ5BpterBS9wfXJGiThB5JsSsfoHy9WfLWO5VzhOPOxgbLI\nXxo3eKNIDnC+0ndeHUcRUsyo/p90lMAj8h23UHLd6KK8QSyBHiyzYnkDOCUO\n9t62\r\n=QZ/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.5-0_1567703734790_0.25600074607029843","host":"s3://npm-registry-packages"}},"7.0.5-1":{"name":"react-flip-toolkit","version":"7.0.5-1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.5-1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"14cbda1d3b7f3631d57998949446857df8bfc64b","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.5-1.tgz","fileCount":47,"integrity":"sha512-vxcBzizNPWWs8wZhTJlZeuRTlJpAELtsmmKEqiEZrUD4B6qkFDK5rrsY3YKW6s4282QuE7BXh/R3hGDEUx50Yw==","signatures":[{"sig":"MEUCIHJ6VNGG9xV6uZ2nPFRoyqZalv5hpc263GBkv5nL+xzpAiEA6QBr8KWcct5eeSQJNsrGPRZUdYEqt+dN4n6A0WV8OZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcUQwCRA9TVsSAnZWagAApwMP/i/0LufaddPxE1ZHqp07\notjcDPg9GFJTKt7THabAMhbt/ZC8lX1eBScARl7t6ySsRZ+KFs/Sky390Y88\n8xLncvvsbTEbBFOTwI3CAfnP6eI6o0jGRq0d/upBjChkGwrN3EJI1jHZnuSF\nyOiDRMHQ9re/wmXla6ZNVv/I4hPuWDM6MJyooLKrS1CmxCOMJQ8roX6knRbI\n8/PkVD1mo9Vj4AgU9HKPR40Dvgoj7oPQYm7BVaqlirZPjKHDg0NH3/Ytt7O1\nbO4kqsngjXubd7ZeJgbZU95TUJDT7AdGfXVMmhjVbNH7RH2G/xrnSo5SVEkv\n9TFliBzFNlc0wAV43uptkgwW9K42X6sUwTdYtp2io1CVJtHeZPCoqUDSlWB5\nV4A9B/gNskDJSrG0ie8RIS5bXal0R+UZZLqlzCZV6cjgDGbiu/ldN3O2ulfN\nVtTCFaSwPGiyIWBtVXsLUrRgBAzVlyx8DbpIYZz9xibRSs/NnPNzYlD5Mpxc\nsoGbSTrghWifAXD/aDXA0lhzAdIXlkWK8yZmiBowT4EEn1P+H14HED8CV7jq\nd1mwWGL4B/wcGWdtWnmsqBcbTHFvDlr1hBF8hy248Xtfo0DQ7B+9SY7ekqTI\nv7vXdf8FhnT8zDN6/PX+u1dGl3HGVlZKCYiSS3ERoHJrzX0PqFB25d1i8Hpe\nUDdz\r\n=BYql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.5-1_1567704111824_0.8931128760418834","host":"s3://npm-registry-packages"}},"7.0.5":{"name":"react-flip-toolkit","version":"7.0.5","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.5","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"1ccc8869a3388cda824a54de41562eba04fed87c","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.5.tgz","fileCount":47,"integrity":"sha512-zMWUzwtciCqot50V2+6Ac6K23ZN4mzb2f8idYA03emRcxAzDkMQceD/+ZWDDKRRi2DdK3dhOT5tuCbNZ1pdUSA==","signatures":[{"sig":"MEQCIGPFd3akaX2fWY+nO3o/65kho5GSVtFl3/tOhYJ3u4hwAiBz9p4hoUtsqjQoNtKBpFULAmmbqtvarE8kkid33jeuaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcUlLCRA9TVsSAnZWagAA19EP/iXzVbsF2QUfCEhSe9uL\nqo+tVQErwiC+BUghJg4deMns/6W2NZS2SPCUBIKwUj80SClP2DgeDzvXrzo/\n4u8pBEHE7yqmfZVAmtPJS/Vu2IaC7Vx3klUrXsrTRw7tgWaMc9wGyBB3UdqN\n5Ll/MCtenSQ8gJkiZS5FMz49DE6vkfz/gNFctDLycrKxTgrm9WeRLLd1EXNy\nLU0Oorvcr8Rp2heXeHRt0MKdl5u08ZwtYwBFEjea4qSXD8miNLQhTclK+DJP\nGrzV230ElK2WRzJb9bn0CDKyDfQNN1qbphkdu1M3x08Lhima1u1MKUKd+90C\nZ48cEGA4tiqcvkYphtyRepLaTtsg8UWZoz0+w/q+DvnTxSIFtqAxqgmnarRw\nKfU3ymiCZfmv0iPc9+JIRdSTLpmNY+9fegNcVtYv6vWsV+OyE1wSFWR2I3Hd\n5eqD+NyHoHiUi/fUtGXk4+AsmslBgDRB/EVg9FCHQVvhA6iZMVRkyGGMdLZh\nM+7ImePLflQu359NIUTHEw1zjzqaLFFgtaGjhK0rskyMwQJxGF8ceIiJb6OD\n/Sh8+x2n+2y/7lIXe3G1Xm6z0ohD3LGrikc9gucUrHRnc1Txp1Pcg08cLJNI\nen5QVfi18PrHjFwJMW+AmqnLNhInMqCOwLRV8WoAiXxmBekVkTySHCEUylf7\n0wSV\r\n=j8nn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.5_1567705418858_0.22268852908147108","host":"s3://npm-registry-packages"}},"7.0.6-0":{"name":"react-flip-toolkit","version":"7.0.6-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.6-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"dd1acd9ca4c4630f29f46dbc5c639eef782d67e0","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.6-0.tgz","fileCount":47,"integrity":"sha512-hf7KT7k5EG6meLm8la1LfSI/cckozTbpkhyuB0MbSvSBBSzc5+nsim//9LzcfDggsZZlg3xCre/8TlayyCsWnQ==","signatures":[{"sig":"MEYCIQD0uY90cvWzeED+r7OorQWTAx8N5UTaq2iGMJJFazjOXgIhAPikvtqraizzBsr6UgNcjMdTICBEH6RPAZwU77RM0YeY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjU7vCRA9TVsSAnZWagAAGEMP/0n4yPjrLN/3umyYAqMS\nd4xst29tfJzhbhnLZC97HWnvzLFZh6O7Brba64hkNouVuZkbzPgvQS+B+oqU\nkqBfBhHlERRWJTuwRI3E/dyMBydQLml131AnEd2I7gd2gkiDMn8987I7Dawy\nX1IWoFkKQSnZ1diiQHn4PFSPp10I3dv25FcMEWw463AOsC9VFMnBN6gQ0LGm\nZmBUZLMmvGi8GA9pdeR3HXW+6hAJGMsHNcK0IOGAOZJIuPuleZSAb+BSoGQX\nyzFH2FY2Flr1G0GBtr38PcgXi6vbdRuKUK7HsRUGeWugXrjhc2I5zM5rIV45\nJQALO/KCuyrxe1vFxnc4zbGbFgH7AUDRdZvckn7Xd2cHuAItWDiBiZP79JZA\nCgEhHWckdMJYjEYVPQ8eilVAHzVhl/cRKFcHtMxiOkSuIGhnd7KtEuF0dWvw\naHXzZIAWs0Uess1TyTk31XoTziUrW7bWmUMVRV/LDcQjhiQPIlJXf0LV+fYz\ntscgw4X/vrpfK9CSLJPwrOGtEI9O4zTuuWN1Y7bVKstpQ5Na+GW9kX4MSyrk\nt5LPs2nXFCQUhP30jBwOB5OxB/QOD0GPB1UeGbNpg74vHT9Yy29vEXFokllo\nYGCZ8sWm1zFnKDxnW6VUGmHgYp4l5ZE+f5I8E4H/boj+ogFUPx/k2ZZwWJ09\nbr9V\r\n=sQZe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.4.1","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.6-0_1569541870339_0.4174894547696595","host":"s3://npm-registry-packages"}},"7.0.6":{"name":"react-flip-toolkit","version":"7.0.6","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.6","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"eb4b6f17c00f92084a817ce8b4f69dda2a11fdc3","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.6.tgz","fileCount":47,"integrity":"sha512-zZpwNfAGS8/WRrHKOA224NP2aVG4ryVx9vkTkxFsU7tkGUpM5AvjsICYmOVDJhEl5wmR36SjMSmWFicloJVibA==","signatures":[{"sig":"MEUCIQCN8cuKfcevz99AXpYI7SOo4ejWCW+kNW4ydMCe3+uyVAIgLMVZElbG/5gRlcPyb6vAalfTJ4VtHHVzfso6RJU3JoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkKFBCRA9TVsSAnZWagAAmlgP/iAGbvxQpoqtbeWayRzp\n0RamPXrtEpWweAAUEWtl33inPuhHJwKw3iZmUJgx4blNVGazK5/97j5cNEoW\ndGiwco6vuGp+DMWf4s9gR4TowfYjhSc8AI1yMEZ/TpiFCHsOeNCaAEq/cKck\n5tCge//FWb7gt/ytLN8ADlypFoAamfgO+BDkbbBNG4tOdDeD1RGaVQyh+E18\nlrCJVEETfHvqo4oXEWD6etmy/0Vr5/ybxoSznooXN5sOApH718t/zTGN9j6t\np4ard3Y/Ynry7fKqwvKHh6sxk3tivYcpTtzRxwrvlauZbKeR8mG2zlYZpoCg\nWH8oxMUeZRIw9/WBqYQ0MlsTXMJs+6XwMbADO+3zUoVRoACx274RTXfFPUMo\n9UhVBmc9UzHTuIvmCZLIH1e4GfQrh+xzrPdQ5ewRfMc7uRQ95iofrBGENqnk\naNaBzoEya8kWBibvXPvI+Hha3YKKaMl0KA3uPFHXpQqr/qCuhWv81dL7gBlW\nQRuximcjnS9LF4wJIOopyfhqswokfu5bvtzrObSbsz8X0Mx+hW5bNsIORqMz\ncJjmK4qLplFu0SPCBdN/G/O7LfNY0wRvHYVqqgq5zguKp0qx5XXGIv1kFew1\n55zUDkuH0+Tpq1URL06nhj9V7cGcAURSF2ToiwP0bnQsZzJpcLnwf/0HYhu+\nF383\r\n=6EbA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.11.3","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.6_1569759552524_0.3334363147229109","host":"s3://npm-registry-packages"}},"7.0.7":{"name":"react-flip-toolkit","version":"7.0.7","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.7","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"a50d455ff4f9f9961042a7a0eb23bd5a2154c963","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.7.tgz","fileCount":47,"integrity":"sha512-1aORVOoaseauhoBg86P1qy4RgG0spzT50s2Ewiju20KtQjcNdkyqObyzOrl7ETd5fCkLV6uzgkJe8AEzuxYJBQ==","signatures":[{"sig":"MEUCIBaeJ/USf0aAj62JJZcMRhUENugnbnysdOYcJ7mnidB5AiEAjV8GHWfkj+nMtuUrtre1xh5IRy1v2/LNhFPYCU0Z2v4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwgnCRA9TVsSAnZWagAAHHEQAICQQwx2rdhKHTo5rXXr\n+RDcld/e4WPIV7fAgP/kobO6a2YSYGMINRoiWlGIM7xbUbWSPyz3kdhAZejb\npwloGROwXhcMw0XaZZ08+Snb5hNI1+DTXtmpKIUC0g1cg6H7mWFVIe8ooxs6\ndiwSeT1ptt23dZhWKCibwzPVHjpTkA7kvCX7p6GW8To9pbd4NAmpENgGD0M9\nJ3U0Yejbwc1MKGnopFMuquhi6psCO0capToH0+LPG6p7F2dVjmEcLaaY4PVz\ntqLWu8iqz7VoYHf6dCDy36EvDneMZKkLZxyNoSj3bOyoyWPgALHvWWc6axNA\nUoQX2KPX+iVafiFG8RlwGXgihhikfEJLzdWVomnvrmlZKhJY3Ov0zu6bS5dU\neIYvel2AmFOzQbJ6t1HCraTw4Xa3oqH6oUgRb782JDRlwWM5Cp/xD1iq1E5T\n6sKmlcehXqtvTBa1FvVHH3BozbgcVrlC+1mJ+14mX0tpxhaH0p+V5LubYwgj\nghPvAafUMMw39YFpTMnw7qiN5mikWzjjwSp5pOnFCvMSaGrEVC3/UCQf4gwK\nwaw0zkMNsr2k1B0RL9xz7IRwjugUngDN0nOORGRdGy75zDC/BdXO4IhlXQGA\n2ownvoDC+tNjSGHBJChqXgavsmIbKwRWDAELroL1qHRJ2skcDn9qwrOB9L0o\nFH7f\r\n=MfU1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.11.3","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"10.14.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.10.3","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.7_1573324838428_0.5336533421886853","host":"s3://npm-registry-packages"}},"7.0.8":{"name":"react-flip-toolkit","version":"7.0.8","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.8","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"c1f282e345c46165d33af871a8905e629c05707b","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.8.tgz","fileCount":47,"integrity":"sha512-xznHk1S30alkwQxYDHYmvD4OgLC8GAGD4QkqcAhEIJ3ftlG5gxZM9SaCV/ULh+bicAnKEBZHrjXtrGhn9KCHjQ==","signatures":[{"sig":"MEQCIDNXFdhA84tBAsn+LZlWv5fhmqhZCMSbK+oM1z3TIItqAiA7/E645gWvWKS5ouoU5F6lqGtC8kgsvy2UsVk7Ehz4kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeStCBCRA9TVsSAnZWagAA2EIP/jm2h7CTAO3u55Qb2yvf\nIZkJ/GtmHYZJ7SdooFAtO9GMhpy1BltLt4mJsKcDP/PcmVBuoghyF/AWs08t\nFAK7KkAx35w9cJSit5MlCtLqLEfkAHSuS+nFMmyIIrW22l5tirQs0kiJifK7\nGTDiMkaVs2l2t1C1wcG1x6cwECCJHz8rJIWEELdpHeibP/XnuKSg8nLaAlo2\nojHPfefcGxvowC/ANXacC4YFwqQhKf7KCZX01tIyygn2AD0S5QbfMz2cqam4\nQhwMeX6YYSzxzJerv1iD/N4UeAHFQ9oYfg2BpMrImvfCgaKDi7DCTRrZgsi/\nj9fhe2bOqV2TyNvSrg2+ItJ3ZL/PKQ/gR20jz5MVrnlynp3j0bmAwhX5n59S\ndAaFYvtJFZxHeubxQO2VGUDj7m5F8wx3RDEeJxYxMtoI8TnZqFxgUMRL+N8f\n5UVtC2NCQ0w7jdIjw/q6A7qCvTPAOCEaVy7ptZ1CyZJchL6A7TBX9ACGdwFt\nC5uSCDKcHfO2scCgnbdbhU7MXmHQnCLi4if/yITL8JTgho3OwPb/bDcPH4PO\nTGhJtnDUuOeDqSVyAJqKnGVtG6lyBgzdLBHFm3zOEhzO+dQ1mZl6C47IF+gt\ngHriVZovNwwqKm8UGWK8MWEpBKIIev2NV2664knel7crF6ZrfJhhBvpqrWVW\n0OMP\r\n=p5CZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"react":">=16.3.0","rematrix":"0.2.2","@emotion/core":"^10.0.27"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.8_1581961344583_0.8734275560135139","host":"s3://npm-registry-packages"}},"7.0.9":{"name":"react-flip-toolkit","version":"7.0.9","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.9","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"d10cd1d3dea8e6d8d0cf90929cf70ccd2eba76f5","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.9.tgz","fileCount":47,"integrity":"sha512-YQd/N9Bt0Kia3eOpO8R7XqHt0bNC8POzidkzM1ATnogKK4h08IwsBk8YmRaybpKbSHKIwgR/UVT0wTwoyNZUVw==","signatures":[{"sig":"MEUCIQC6QRa/Q0iX55bOF/dFpqMPkNGKr1tRN6CIog/C9yIzYAIgaBQBFHNg8vOWMMWbQWyBt/DnI46l1mndB9J+nj7NDX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZqp/CRA9TVsSAnZWagAAZ00P/0MVKQ3FLDor9qH0yXwH\nUDt2tD2AdkASGBCwIx9HoDmdjhy3liqXu6jNHVp8y4rb7jYK4oiJuebckpub\nFvXvuSKGmqvm7T0YxsH/u51a+bVmWzcd7IxGSpaU5wUjpfUiekyyCkvSud43\nfbv1kDNzDf8oGnsVD45uTSDt90GY+v7U70c3dhXTA1tzu4pJFCudwWHSlhJQ\ndLcvPJ2ONbyW9i1iPIXQQGJRJu6JZgluDU9c9IyvsbB1yCnAvOh7+fFdAy68\nASfCmNaQp/pTiJrTbR/TQE6d6YwABd0+mGEPr7hm+ItlXX8hYK3uXLMgmPwq\n1vU1nXMicvnpigIpmaReohQRO3hKxDj2IC2Rqk5aM/W4TDKbiwcX/G4Ddflb\nOwtpwNXON3WmlnHYNm7ixbav3cm/EfxQcN0KiX5/rlWng5pdd2622FU3ynOV\nRokGTbfHhYzMj/VRMveAHE/Qsjo1H8KTzciDkALEyzinIGo6hoQ1C5j6x+dy\ng5N9PzKjbH34hSGLjOdOJ4ywCzp8+Kg9F2zbq0N23af3Nvxvjz6pax0RwLYx\nQ9asy+2+SZje8PILO7998f7ONzRka0UnDoObSe+AM1pIScRVaXTJAziQdzey\nE7uOPlK58Zqrddvw0AA6OON8FFdBfkO7/XVnA/q4jYmZlSDtw7Y/flcEchjA\n913k\r\n=Lxq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix && node customEntrypoint.js","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.9_1583786622545_0.5408563230702126","host":"s3://npm-registry-packages"}},"7.0.10-0":{"name":"react-flip-toolkit","version":"7.0.10-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.10-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"5c0d3a266a1093e62416191a5847b2ec86938181","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.10-0.tgz","fileCount":38,"integrity":"sha512-pkAmPS2vojQ8CqY9h3w93++0EDKPR8GqKQ6PDJep9W7BBBD3Yi9Jf2e61nIGm0PiaECN8s8f5PGocerkUnwRuQ==","signatures":[{"sig":"MEYCIQC9LAommFUn4eiIhA+qFbT9z65h3eCWpssccLuDjfRb2QIhAIjLeaJKQNhTcd/MG3lAjU7dz9tgAhMDJ4DHiEFlkZG3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZrAeCRA9TVsSAnZWagAAmx8P/Apn+5tPbH3thgiWjHms\nlYnqCoVwH3eaKw7NqJXhB1tAYzB72pTg7cDKPfBAyg9v0HQctygWXwhF1Nga\nnB6KIzFJ3LAX1ko+8UUZ9+YUN96AE8otkHWA7WqBMov/lRAqNPp5eX2KxSOl\nCICf2TJcwWp2I+00JX7CcqLPv5v9uOOYbUSKN2KIhEOBkxcod846h4PK6KIj\nkSdPK4icLN+HygsEVjSfztEM/7QV5asByYPa9QfPT85tFOYoGodhU+NFC9fL\nSnUmmXJ+6//dfvOZ/CwtEnvSRWRGLwoNahRpR95Kt8KQidzi1e/kD1g9f0IY\n6+OL1owwMik0iSAOcqhlUtfo5O9w2U9zDCIUHXA4/H00jHRju2tBv0o7pXiM\n4vlqfFMMr71woYPhTIVehHGjAktEKzaXYPL1rSdyjz7erIk2WYpKaqae+wyO\nfvMqSgAsOa0x2OYKWDkrfOUh1gBdl+E7H9n5+n6y6lLJR1ICnMNPwgbsJCwd\nvZuOhWJVAbOIdq55JqyL0Hct+0HwZLhmEq7CzVkyvjPeaJNvsrc8j5xbt2tD\n9at0l573QU3yFI2AFzRoRMHyYDabcckNXtVFO/wUfsHz4ubYaEWoA/t9WjI7\nJtzk4oUba75z9mnT7D77kIdyYIruS+XhQ+cGQDSjcjlbsW1YoeEeQq+sHsYx\nDWIS\r\n=M8ri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x","prop-types":"^15.x.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.10-0_1583788061711_0.551942841376629","host":"s3://npm-registry-packages"}},"7.0.10":{"name":"react-flip-toolkit","version":"7.0.10","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.10","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"164ee540e71509c115615e7da590ca247e56a174","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.10.tgz","fileCount":38,"integrity":"sha512-P/cP5HTZ5JuXxgSo9auMHw3rizzC3bXDVhAFiKB96tiNlCOFPUhNBLdYoVziuGKTTuRIFK7gpEBMvegcGZqwRA==","signatures":[{"sig":"MEYCIQCv35tPF9vurxjd81ujMviU/VFKYD+sdrnLq9psmiXZMQIhAONjqp+39Zja/gjOeT+zXHTXRPVKzfdaeyNeb+XAY349","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0oAdCRA9TVsSAnZWagAA3XwP/ij78PNfensojeO7GRki\n6a+lahi+8fH2FcKMkZV/v+Bp/A2moz2BQipIcEojPCcuJIxJSjaaU9TdVbTf\nky1M0UEpFPkymiJXB6/vebDPjKZ4u4hgW05p5cgquHTauYfPl1HKil8XWfZ1\nFM5m6xvM5w0a2AtURxcdP/ouUUorURXVybTLv0hzDb9qxRRWub2uEuH2mhKY\nPrpLmK0XhcrIltlYklgjHXUq8poL7EdUp0tq3T6fbkJn9EmkjpBk2XciaOAM\nouaJrJCbgI4fX3aRstq/ctzv+SSKcqjo/kUly0gKqfvqjWwcvuoX0t0F1s3O\nto+PTASVOxkevKkVwytvwK/2pJQflZJmuhyrLxYarGnz0C0KraT9ZGGUIvy7\n6dNad2QOs0Sf+sd2FWYN0LWlx+kU9XAQmyZtTLnu/pZVsbwxnLoF4vcXVs3e\nMV7bkP/zYAp1A1vDOsis6BUf6u0TVJcyryR9u0hRr/GpK68j8oeycKtFzat6\nyRgotVjmqwVCIpK/Dy7b7Qe3CUDVoQemuCv4/3d97XavKKkwrqk0VW7+fK9X\nWznsiEsvWICvl9L/a/7kGSvnVoHMFPDuFAZwd4vRq9ydt0Zp0tcsojNr3lyW\nVM89QF7EU71t6oT26ncpO7Uea6TVvjanFQd8vGRHMeTpFSdv3uoHNI1woYUT\n9CnS\r\n=eAsx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"rematrix":"0.2.2","prop-types":"^15.5.7"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.10_1590853661153_0.6098410604784832","host":"s3://npm-registry-packages"}},"7.0.12-1":{"name":"react-flip-toolkit","version":"7.0.12-1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.12-1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"4af8edbf2021dde858402e49c010275b3fef2003","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.12-1.tgz","fileCount":38,"integrity":"sha512-o57h40Kz68rzYCmFUTzWTtV2UArCIKG1H+HY/tliqutW3GSOnVkHDvP9W6jYC6HxgzjzZMGIqzHG7DEVpZA64w==","signatures":[{"sig":"MEUCIHxmhUrSS/UlX4XTZYo25mX1fE8+rC364Juwags9jfCKAiEAs6L3XZFPs70QX7mJieDgL5wT+sX3gnfVsV7FykGOMAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4igMCRA9TVsSAnZWagAAKDcP/3mFlkm/T+BN7NHKj1pS\nJjgNk+TB+PjAdLsSks+5ZHs7Zb+7YRMT6lSkIfVgC0YMG7FROFHjRca2m10G\nzhBczAxFht1NDKjGIoMW4ntaHMfZUiOcipRHNnyoCwIGWIWannLAGgL+n0ab\nMrVR6TL6KimRVLB/QeofJd3b7BMnxqpLwjlFxv79vZ/Nj4yt+ZpEXTngVP+E\nc2ltXm/w8gy3sKaF1qk83OV9fBp6ayajV4D7bpSPY+NqD7mvlumt52SW9eAt\n/BroopAE3wek93ju9H0yU6EV4wH333qzwiNm2tXwdV1m66u/a1GxSupLjML5\nLlZRdN+xtulK/KgURllLkwBnSkL3Zcsm6fWVPpFjyZryickOkTbmAReqEZfR\nMgdmWUofg9sFKH4286KzFEj3UMRs7r6IK0/nI2n7dq5eIEaVylHFqB171Cbr\nepWixY+HqspblpOhhpLorCfYTwU9XObdLNeUDoKjyJBzTCTAWhzmnz3MUeft\nZwJHX4wEj+HWazfkKruOTl1y328ZMG0p6PvlUQrxgS1nvvX7WxbeEnQ6FaI+\ntuO6sBU87dbHYFEvY0YxpGOIFmSKkvMv0HHaJRmdD6ESa8YOG5zdHy54XtzI\ndVYnp2y17L8coOW07V2lViaQAidgMwBFZgJluIB29WhOfvHCDa3pq2EixjpW\n0h8d\r\n=Md/n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"beta"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.12-1_1591879691987_0.06878027774988871","host":"s3://npm-registry-packages"}},"7.0.11":{"name":"react-flip-toolkit","version":"7.0.11","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.11","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"6ece62f3bd2723f7202617f6bc66c5e9cd8ed6c8","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.11.tgz","fileCount":38,"integrity":"sha512-KIOvETO+cnh598BCDvfJaM24XfaMfFujic19I8LGov1YtgYHjK32XEeDVR9MlPfQq1Gg20/hcx6J6apkveCqww==","signatures":[{"sig":"MEUCIBUvpicv4aEdmOuJgWLsYgSZSc6iaLVlpzfpAUvGba5BAiEAmwY5T9jOSruDKmWAZVgg46hQLSQD9tJaVw7jkFG4GVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4kdSCRA9TVsSAnZWagAA+bUP/R6UiKdlTID4iXYQC6Lb\nDZ6ibqiEllZ01eJCfL7VeHlcALbaNNjZrnGzzhgA9BAMRfDXIovVo4Mmtqvh\neMuhTOdSR4gRbVNQ0/LkIDwL2qbV9F+e8YfW8Nbi7r0Z+Eugjh5NVDtg2uKb\nYZd/taHuEJXEWY0e2N1Xo8MbATuYqN3OWVKRUO30/bQ6+B1TRdxcwa1e1Bqn\nXtbncfPyHlXHZlX/HD4zdCos9j7UxCeCJxbBX+zGcr7kjAMz+ksm/VjN1U7h\nHhTQ+YrDHDcjLXo30tjkgLZilboLzt1isRKCcPwh7h0498Qz0kwv8FoEWK8N\nkB4FhLZJ85mc7fHwYLborPmnsJMG/shZNIitayxurJD8kP9SKNlTx24kygGP\njTxDUEZXj6ZxomYU1ZI3DguBwKIPGjHynQNvzKtQ41hHdxeB2BRKrbTvNsdx\na6Wkh1SKQSBCsB0p0fFX99R8KRiabhS5YNVFc97wYW+A8RmFTx4LKiRFSuCE\nhcJwLHdvz2IR6eDicDDTDNH9WLHm6P+pY3QbUvqYU8CQA4arkCmHOKwCYSfG\nzYymugGDS93+OzFHS7Ui89Y0QWx18OHubDe4Gjlg23OoOZZb3e3e3RaNdMaW\nWKJP0auISNyM0mtnPziOGWAOwFt0BoaDM+1BNhmMH/sL/MTkeSlQNnmslwo0\nN/Vx\r\n=a3bQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","test:all":"npm-run-all test test:dom","test:dom":"parcel mocha/testrunner.html","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.11"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.13.7","chai":"^4.2.0","jest":"^24.7.1","mocha":"^6.2.0","react":"^16.9.0","sinon":"^7.3.2","watch":"^1.0.2","eslint":"^5.16.0","parcel":"^1.12.3","ts-jest":"^24.0.2","prettier":"1.18.2","npm-watch":"^0.6.0","react-dom":"^16.9.0","babel-jest":"^24.7.0","typescript":"^3.5.2","@babel/core":"^7.5.5","@types/jest":"^24.0.15","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.7.0","@types/react":"^16.8.20","normalize.css":"^8.0.1","react-scripts":"^3.0.1","@babel/runtime":"^7.4.5","babel-polyfill":"^6.26.0","@types/react-dom":"^16.8.4","@babel/preset-env":"^7.5.0","styled-components":"^4.3.2","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.8.6","regenerator-runtime":"^0.13.2","babel-preset-react-app":"^9.0.0","@babel/preset-typescript":"^7.3.3","@typescript-eslint/parser":"^1.10.2","@types/react-test-renderer":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.10.2","@babel/plugin-transform-typescript":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.5.0"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.11_1591887698117_0.4585979117702348","host":"s3://npm-registry-packages"}},"7.0.12-0":{"name":"react-flip-toolkit","version":"7.0.12-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.12-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"4c34b21cddf831c84100787ac95563341428e4d1","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.12-0.tgz","fileCount":38,"integrity":"sha512-zujKLvExZDMHhRObEUy9l8Y3pH+W4eXjAMYlEoM6terYagA/b4/XC+mV/Vu8s10ZzsO9HNbs4LC0DpWc/m/96g==","signatures":[{"sig":"MEUCICMIo6JfWpxHjCGdiggBg6qrsGLwfJ9R8BskqB7FzNWfAiEAqlsRdULq1dfvLCempyvBg/OQGj83mPwVz22PFXS7Rfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4sM4CRA9TVsSAnZWagAAussP/RSFW4wqTasOFk4hNurd\nzSNVZtb5ShNCvcmdpFJI245ImhPrCDuWFd3oERyxXcxtS2tdk1CtDhFCr/zs\n2EDSAFxLRgwgqjKg4yDBAY3Ozjg+wGuuzX1jlsPzbnAvaJyzTVWBhR7YyFTw\nQnDaaGNTddJcGCORg/7FZI8WUJhK4nDTDu4Tr5wUBxaeigRPLANAcgTq/uAT\n0G57D1RyvVUBygIzHaiHZb/pEUiIF39WAnU4xNMyeg/7AmZY7BYxWqJRLNxS\nQtOsMH3oxEkRoliAxQ8++Ep8IzDeUD8n+NLZYW74ey8CSSZKeps4VmO1EIAz\nsGrYDKhm5c8zpvvQpJbrF+KhDWTZzlTP1EYieMrK6F5Ym1kj0LgwFJdX4dJZ\ntDPxl47+1hQuJecb/kgOnuwUGQb7ZSbI++tmh3QVwk+/xPlNVmD2N4A5rQub\nwIc+F/koJhAcgoLMIDWKQ1HnWlfze7DPriDy/0Z3EaPjQQTqdAOPnv5qJsss\nEI4gSIb275c2PzM48Vrj+I1YqQXaJLXgIRUmwT69MPYTvtEoRp1uQXbv1HpF\nSk1fjW1Bpi0qFoQkPXpZ7eZrmmOitYjc92SEMqO3cHoH+mSpI9cUKzL+geQE\nt4g/GJxsVbFzG4kwI3FVNnc3Qs0Y/BM9UE73jZ390SjgEDrLryvBGxA96eNf\nsfiM\r\n=Rpsc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.11"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.14.5","chai":"^4.2.0","jest":"^26.0.1","react":"^16.13.1","sinon":"^9.0.2","watch":"^1.0.2","eslint":"^7.2.0","parcel":"^1.12.4","ts-jest":"^26.1.0","prettier":"2.0.5","npm-watch":"^0.6.0","react-dom":"^16.13.1","babel-jest":"^26.0.1","typescript":"^3.9.5","@babel/core":"^7.10.2","@types/jest":"^26.0.0","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.10.0","@types/react":"^16.9.36","normalize.css":"^8.0.1","react-scripts":"^3.4.1","@babel/runtime":"^7.10.2","babel-polyfill":"^6.26.0","@types/react-dom":"^16.9.8","@babel/preset-env":"^7.10.2","styled-components":"^4.3.2","@babel/preset-react":"^7.10.1","eslint-plugin-react":"^7.20.0","react-test-renderer":"^16.13.1","regenerator-runtime":"^0.13.5","babel-preset-react-app":"^9.1.2","@babel/preset-typescript":"^7.10.1","@typescript-eslint/parser":"^3.2.0","@types/react-test-renderer":"^16.9.2","@typescript-eslint/eslint-plugin":"^3.2.0","@babel/plugin-transform-typescript":"^7.10.1","@babel/plugin-proposal-class-properties":"^7.10.1"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.12-0_1591919415698_0.18455453346147088","host":"s3://npm-registry-packages"}},"7.0.12":{"name":"react-flip-toolkit","version":"7.0.12","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.12","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"bc74247d2661cf4f693e73c707b8c7788eab2a96","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.12.tgz","fileCount":38,"integrity":"sha512-JMACwG+oGSDEvQxXZIlZ64EOIZJhw5XZ+1MLHsxDoNWP+Jzb9ZNfKP13jM2rW/sOuN/rLiVPOayHIFWcksu/BA==","signatures":[{"sig":"MEUCIQDGsJtKjTZeAtlnOByZKPVgYtODuf11TVJCozNcGQE5MQIgLIESlg2FZcb+FAUMV0OP7W2Hd1kDPB+EIm/s/z+TFSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4sQmCRA9TVsSAnZWagAAiEMP/RqB4/B2DslqvRcwYwZ/\nFRRKwkNhTs6Fcz9Pzquo5HIoTng+Ln4sbx1DdoMLIGaMjI+M+HBHRHrj69/8\nJBMO9QYejF4sS+sWEZ1/XJv86qsFkApWLcjXwxv/VRXeITgTNBDFKjtjYeCg\nOngzovYVXcc0UgQsAfVXSgxKdhmYpaPeNVSNXc/yjD68tcEovRNodFEDUkSz\nfALj7OM46cfeqOEBTR3x8FW3TqRHIgM3oWO5FdoU37ZMq0PFTYL1I2DGOvDR\nR9ly8tOkQn294bcXsgmV29RUZKntxPOUKWtFoQ9JEpshg63mAvd1RY9Zgi/V\nN6JrPR7VkLDT40tRlznBEAy2bpb3N0ijj6cCJZAdqvs38gTPp+Sm7H1qYVNL\nMIjCN5KrlAz+61IHie5shPMviuyIXlhJkit6MFEczxEi+mVARj+dqtq1gkUt\nh8RcB19v99ftEtwXyUs8exv9zxhRsCOYWeZocVebqWHWli5LNy73EFVjag4J\nBkBKXbFjyLavnS3hbkQDzOCz3ehgyUGygpk1vcOhbu8OA7iPGU/0krc1Ay/x\nouZinOq63fg/GrhUiDBaTN18dNc8gABz/W7yXgVu1qwU4PBUfMC+M9GbOXC8\ntuxQj7tTVAmbKlTq6eEh6au65YzYJoiaO8E9TR0n0skrYp4ZkVEOEC99cO9d\n1/4r\r\n=s/5j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"prettier --write 'src/**/*.{ts,tsx}","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format eslint-fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.12.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"12.13.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.11"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.5","chai":"^4.2.0","jest":"^26.0.1","react":"^16.13.1","sinon":"^9.0.2","watch":"^1.0.2","eslint":"^7.2.0","parcel":"^1.12.4","ts-jest":"^26.1.0","prettier":"2.0.5","npm-watch":"^0.6.0","react-dom":"^16.13.1","babel-jest":"^26.0.1","typescript":"^3.9.5","@babel/core":"^7.10.2","@types/jest":"^26.0.0","microbundle":"0.11.0","npm-run-all":"^4.1.5","react-icons":"^3.10.0","@types/react":"^16.9.36","normalize.css":"^8.0.1","react-scripts":"^3.4.1","@babel/runtime":"^7.10.2","babel-polyfill":"^6.26.0","@types/react-dom":"^16.9.8","@babel/preset-env":"^7.10.2","styled-components":"^4.3.2","@babel/preset-react":"^7.10.1","eslint-plugin-react":"^7.20.0","react-test-renderer":"^16.13.1","regenerator-runtime":"^0.13.5","babel-preset-react-app":"^9.1.2","@babel/preset-typescript":"^7.10.1","@typescript-eslint/parser":"^3.2.0","@types/react-test-renderer":"^16.9.2","@typescript-eslint/eslint-plugin":"^3.2.0","@babel/plugin-transform-typescript":"^7.10.1","@babel/plugin-proposal-class-properties":"^7.10.1"},"peerDependencies":{"react":"16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.12_1591919653743_0.7818670758581872","host":"s3://npm-registry-packages"}},"7.0.13-0":{"name":"react-flip-toolkit","version":"7.0.13-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.13-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"89741089fddde27930655163b0c633d73e4c5bcc","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.13-0.tgz","fileCount":16,"integrity":"sha512-9R06BWRa0vNBlMX1p0+JVUt7TCYQL2S5w5y9r949kGGV2Ah+QY8hkvCqRibIWrEkoeNaev631qz0B5BUZy2Few==","signatures":[{"sig":"MEYCIQCUo/SCcKGq88gnUxnF1kxk3LorXBNwi1IEGcIu0ghzGgIhAM2ROGRrmxwf4D52eQJljqPNeBEPRZF3LFo1SNHrsjvF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpDlGCRA9TVsSAnZWagAAj4UP/1i6x7HTTZfqnABaw5Ai\nZW/ojmLPkgNtclO9snFMQVFgLhvDNnnB1UinlX5tW6DRCEweXnttbxADREMU\nVp3OLW9NXwMhlIJHwExXMP9vhPtgtDaROJoxY4MtpDgNGVJUNH7DHaChjxid\nkJiN4fxPo6TJzgymE9+2o1jKv3BB/viDu1fhwEvqmamOC3DmhV+5uDmjimD1\n+hxwCFmWCkrH4xBJMB+fBM+bNqarOXyAlExlHtEFbPA4baFpBxnR/eHrfbi/\nlH50QCDbH6CWMpAPS0zx+lZleW40ZdTGqTl6tE3mkf6vDsn+Bv5REBDSc1xw\n1LKKATXdWaVYjUBlm5E08mTNItJYpfvteuSV97L2JuF2NYa7bWlDaX6dmvUi\n7Nk1WKxXq3WnSKcvPIQrPP3rj4VvASkdseuZGudhJkFdo4ujp8/mltcp6Dw0\naHyW18mvicIdCiBNtKo00PjETLOZxYoYP0vt3UrIcZsJ6IBzwSfEfnhfBgP3\neGe+jKk64J6LqweAt1ul1uEXTdS9a+ALzeIzcGJZHkqMev+nkxM9kVUaGMZr\nw2FUtg7e9hvo2A/NL/QZ2/NDC96owV2sCx9E8Hjk6fE74iSXpI6deGYFPkpq\nYyde5JKo7DIw2JL9Sdqa7YrNsOfPmtNq8Q0sFz023WVVAKo3NZF4k83H7/ot\nbBNY\r\n=DMOn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.14.5","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"14.5.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.13-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.13-0_1604598086165_0.711116920346432","host":"s3://npm-registry-packages"}},"7.0.13-1":{"name":"react-flip-toolkit","version":"7.0.13-1","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.13-1","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"0ebc3debea7e5bb1d4eaac77f5b0a00150f58aec","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.13-1.tgz","fileCount":16,"integrity":"sha512-Syj3n85IUg2Sc5aTnNvCQAns+5JE5ptBPhDiYAJpXa9nHFrwn4fqENhDWyMUD7xJd95yJ6NTzu839huVHBUgQA==","signatures":[{"sig":"MEQCIGaNugo3KKDhOfhfTCHGHL6Swe9eZJTIoSqcpt0feyLBAiBTgaxKt7/1Rid/pO1/7aeLAIeEFApA4wg6/IZc1+knTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpDwFCRA9TVsSAnZWagAA0y8P/3OeiM2cFF2+bCQvMthX\nNIGl7JFkGb45tuB7FazYHO8cCa16OdEuxE6aFvTb6Sradi9wjFXQwN1G0eCy\nKGjJjVf7fjh7Fkdt94q07fImu+L1GhWevHFsCluIBQzUBZq4y1ewV/IZIkHI\nT7ctEZsQkzPCFIBPbKWAbjvqTbzpk4pdCF3KcjCjm2QBzZRlGl2q9gyHWawc\nTmfoqDPEAanIbMMechqQ8LXLqbdMN3W9glzacR2AlfsgS7am6kxn5x96+bTX\n6JJXxd+OzrFrZ37a1JBM19mdpfwYVEE7bJr8ieaMhqTfoWfsjXvTS/4BDEiB\nn06wLm5Z+1YrcFMkxWWCZZ/S38wX9w4oLezRGYFXyXcsjzk+lDJ4FSU2ODM7\ndp9IB3yy6WgEqtndVZ0M7nmo5F89txd1cOF89ZJW9U+E5FpoSb0+Cc+6Gg18\nTVf0oCL3jrB3d5mh5Q87EDm3NWF8IsjK/D9MChuTSc9F4EPMK+xGxXVZ7lZ7\nzT1Ms5TCLq85AeF1LBme+PjOqImpR+5LuLWBvpdVinHdCdvguwCRzKXTA+eU\nydYltMRGlR7oFZFN8dIfzFNlSQrdo1vz6VbWurkF+suGEOMwLtXwT2Q0PV9O\nM7aUDPrn8SGM5tMbuvGVtg+Ioh7AyyCAKL3Yk/ftv0F2jA476RouivMmRB+W\ndgIA\r\n=8OHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.14.5","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"14.5.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.13-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.13-1_1604598789263_0.06686134553776335","host":"s3://npm-registry-packages"}},"7.0.13":{"name":"react-flip-toolkit","version":"7.0.13","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.13","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"3dd0b58e0cc54c3420bcbf973df899d1d63cd626","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.13.tgz","fileCount":16,"integrity":"sha512-HNsw07LPR9mduytuIzRhb/uslkxFkQlHoXFA2M3O0CutwKM9v7X0SK44uxJgo+S5iP2FeR8gTBSbq/fkrxYEfg==","signatures":[{"sig":"MEYCIQDGCoeNIrJKf6CObYWvNp+DaKixSuv0LaWbc45kWLZqlgIhANIUuVE0wMFhyMR4iOqN/9t5i5TuADx2SYX5xYdSBzYU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpHn8CRA9TVsSAnZWagAA30IP/3fGHe798SvcIPSzno9m\nfvwYXwnIXgd+Z4ph4bUd3ch3FCzo8oUSSLt8XX+5F2pXyr23RJsp8HjhfFHE\nDVDgxJktlk/7vkG/VjIyc2+QcoAo5rQcZ1mi2ePbxn8KAUdasQTfA8onj9p7\nb1s/hDtTuKzj/XQG03KyfEyks/QpbeAjQxYl9CiAaT5/QeQTUwaaMZXCOYvZ\nUFNX5STF93HCahc5t/prMzSCeoGFKnZJ+eFK18+RzNi63dzCuCdljbmciq2H\n7jnel5NlyT8iQsGvcX/WOZo2gJJy2TZi2WB/MPS0pUpQ985jkTHyl0E9nEgy\naIFtbx7k8uq2PuiB7rIV/BoRpHfn0I/uJSUAaz7Gq6zblcZYD8NDoveJQDOc\nhEb35iH6RLws/FOQc622I504LyuruLxopuqcbpVNxVkZXK80L+ixTmgNaqMJ\nalbpMcXxW7CW2/7oWyMUeMbqr8FfbVXHn/T7jamy36Dna8Iw1NoJGlAYQioE\nXoOievPxxd3uoM3F5m+sXvs9Ghnl5BCQ1W21Ira6dx6NrGe1YAUDepQJKJWV\nhoccOUKljl8NpNCG/YfCr4AzpFYVuk2Bn/CWhkoYWooPqAN+eWw0uIpROPJa\ndrKnLi3fxeN/64x52Cq0Cd+M9ZkRuVD54MtzmndcVLle2o/N/aXRdnVJ2xXS\nNQwg\r\n=gnpm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"6.14.5","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"14.5.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.13"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.13_1604614652062_0.49617920487615685","host":"s3://npm-registry-packages"}},"7.0.14":{"name":"react-flip-toolkit","version":"7.0.14","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.14","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"aa72bdcbe9fd5901fd559226e69647d6e2988017","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.14.tgz","fileCount":16,"integrity":"sha512-4ezk9g9yPMDbePCTW81ZIG1dMXa3qCIlYhGnWjJb0fIJJOazSOwV2TXp0lB/kn4R8QK5N3AdwYKPwFQQY8TW3A==","signatures":[{"sig":"MEUCIGUtnl80F5U0uyENBPhrSAcWLeoTsR4BbJTdeKvjaUneAiEA5xeQ4xbIdBcRfzmtfDV1XiE0PsqrehnprZUOPAFKXxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifnsFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTfQ/+PGqBUXLSWE7sZYiLmHPe4mZVpjVpvKGaDO2ckjaCyO/tiYhA\r\njaTwG2A78C9Lel1iBWcHPoRfBmf0gj6OBKpUqYxwDTrHEKyTl7E65Fp2T6kf\r\nAC79WnGloF4vhRjiwEaZj/boLoVhghJ070Zi1eyyUgigmHErq+LVK5yANUm2\r\njpKlosIU31qGeJSeBghTYlH1uKieXLbDNa3JxSaoveDexX0sM2qyb/2xDbjc\r\nLUUlgH9bg7vFYOWqK7IKtwObgXhrOTagavmDTvJ1XUr1QfSenCAgHU5BepkT\r\n/vBJPTbWrHubXQAe33KCt7rADlBqA4Y7X058V5I86xUcMFQEeKTC6SI79qfX\r\nuMSTpNhZLyqRWRDd3D+lmB7oZCA/bzZCylILPCcek74pSU8XM+10ZhXSbMVL\r\npCQwSqNwbtAKde24qBGbm9XbGahlCcIEdi9c1bH1DKXIzXivIaPgNThvLTwO\r\n03ukSH7m4L2c4lVEByCcdy+O8KSjn2W3q9chrxgd7IHjXDokfpanZ2eaaVRC\r\n9Ia8X8uio+ZDHbik2UHoRHd6pWzGBVHrqV413VwughymWogTShvmhrewtDoV\r\nYYSIObx8gMio+4cH6djB8LW3qglzeWxkeY7tX2DAWVlfdktBPPX5ssOLZim3\r\nzqoACusgJR4kjTh/Z0SabYqI0NdoUi96t5E=\r\n=EHTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"dddf46808fd03a7c191accaa228ee7d0977adbcc","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit,rematrix=Rematrix","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.14.2","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.14"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.14_1652456197668_0.614508044484648","host":"s3://npm-registry-packages"}},"7.0.16":{"name":"react-flip-toolkit","version":"7.0.16","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.16","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"4ca1fc69b3e0b7e4544d5e2f4dcda3347b2bf3b0","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.16.tgz","fileCount":16,"integrity":"sha512-ZLnXYJfYhZZ5lKP+FiUjX0lHKe8ZZoAd2HMuOAW3w5ZESNgNTyzu0pRu/bDBqlIox5UkeSlTDBt3dVBcTqv1gg==","signatures":[{"sig":"MEQCIFNCq+M6aVFGTo2Go0KopovlBD+/dheXpbZnygXmGY4iAiA7bSsmlCd1rxJd88nLj9dYNU+TWvuPknbqfmJQPA0zZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFBDtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptEg/8ChDTEM99962hv86wgrSRyj3rQkIKSg3Jhtb7haZ2MmREDW6t\r\nUG6DYbgsBqvNHagTEV/DNSYGXXM6mP+QlwN4oeoOcWwhzJOx6KRuZmOqk6Ek\r\nfDi/JCLhxY8/cMlpyE5epozHako6pUefC1mJGt32PUri8lODz/CiSJtzlBtT\r\n379xnfxopYa9gicD07zdnBvSEEYRH/Bhb1hrhLMk/NnJeP8iFRipqeF22CSQ\r\nomuXrzqI5H34rouxQJaLNIZdAcoqkRBdmoPrbqbeuXuHhX5zhtBmMFSk9kgd\r\n8LcKJqOeHriITJ0xED1HxOYIuG4hH+D49FXkjk1X+6KaOpIrqOYcZpkrUp9a\r\nkcZQGMu71T+5Oj/GIMy6ZeXAe7I0cDdCWs2M3yfgmplWjqfEAlc0y7xwaxpt\r\nHI9X/fI97O5u6m5gR/zPendpWWvn8WB8VEn5sd5m0aH/ypqWvk9N5zg5t2ho\r\n4QMvsegVLvHy/MpdT98nckb7Nh0xljWm3Bw+Gq93h2VxvtTH8SWHEPeLQg4Z\r\nbEpDF6vS+qHOBt8Ar2FTqdHQ2BVHSQ6Ir1wYdVHkPK/myiQmQlDOuyTnsHjZ\r\n+YmdxcwQeFlpIRdXutpM8JywUskNt7PTcPyM+AJJGN/oPkgYRIwkHv2F8sW6\r\nt/Yeqy0gGmxvTDjIkoZOaDvTWAX4z6maz4s=\r\n=b/MH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"ca98788dd566254e6eb45e1122fb3eb06d64c189","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.5.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.14.2","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.16"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.16_1662259436844_0.7781677290717974","host":"s3://npm-registry-packages"}},"7.0.17":{"name":"react-flip-toolkit","version":"7.0.17","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.0.17","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"2b330ab6ead76e82fa0b6a03c58b98a7cfe8ea0a","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.17.tgz","fileCount":16,"integrity":"sha512-dvL7CddwsPm5QHH3rRC5/I5Vjl6hp/QwqcFNIfA4ScfnbSf2xMaAMaPg0frIt0Vm+GO0PXf89hJ9RDmkGzqHKw==","signatures":[{"sig":"MEUCIQDufd4Cc+O5JoJsbdc3tXHitiUcmhIPJWzApEvWmYajawIgWTyVNT291dch63AhsXLGzo1aAYRfFH4w35LZkRPSmJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjN2YMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJrRAAhtOc3BMQRbiCAQ5HITa/fF7MsLzljyv7SCxdObZf1aQ6PdWE\r\ndJiW6rewmG+3ahEUIp8lNGY4xaYj/OmXvTK5RXVj/U++Tips48qYUTbKNEJC\r\nW6gpByl+mmkKqrSqNf4smulahtKJYClzQNlPG/u7g/yvnT/aEaOmkyhfqboh\r\nSAruk+EPn2giip22DsKJvbk/nieofvdPLpfTg8ptpnwoDFHeABXDuS9SNN+B\r\nO+3urVlO7e11HH2YsojxZAg3k1d/wXLWchpKuGkbT9y+XM6YXcu2o67gktjF\r\nSDYRiezBMOj6LTQT7DYsOP4VysOO4ew5KWEqC8oACZCk4wLSf3slBw08APzD\r\nTHoB02jpwUwIj5GMDIdPqBjhTbKAL6hpsaEFZ0D1WCw66vyZJV9GOb/i+zeL\r\ntR1fgld28GG/abIFKQmFBh3uaR0exHtNPRr5dw5ro4vhLg3Go4lUui9H58EF\r\n2p55HOX9bTPOqh8E2RVx1KCOhByRRlfkZk16rMmWyFnDs2aieGhq9p+uPppq\r\nUORxX8yr5lhEKXfCdWT5sfsWFcKR9lpjeoU+HvafDsj3KzrKJ32YQw14Utdv\r\nG/Y7RbMBeNWQXmJqdThBBwHBdeLcEu6RjDfO+avoDz5l29CRxb3y+qiCMcPn\r\naubsB+noRkymn70sxGUt0HX5wc2ntHMfKWc=\r\n=U9x1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"d6dc02c41938b575127b0e84dbf6269f39cff1bf","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.15.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.17.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.5.7","flip-toolkit":"7.0.17"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^6.14.8","jest":"^26.6.2","react":"^17.0.1","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^7.12.1","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.7.0","react-dom":"^17.0.1","babel-jest":"^26.6.2","typescript":"^4.0.5","@babel/core":"^7.12.3","@types/jest":"^26.0.15","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^16.9.55","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^4.0.0","@babel/runtime":"^7.12.1","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^16.9.9","@babel/preset-env":"^7.12.1","styled-components":"^4.4.1","@babel/preset-react":"^7.12.1","eslint-plugin-react":"^7.21.5","react-test-renderer":"^17.0.1","babel-preset-react-app":"^10.0.0","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"^4.6.1","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^4.6.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/plugin-proposal-class-properties":"^7.12.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.0.17_1664574987835_0.37479190863526557","host":"s3://npm-registry-packages"}},"7.1.0-0":{"name":"react-flip-toolkit","version":"7.1.0-0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.1.0-0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"f4501134b7a19cfc714cb6ff1c9cb95a52840ebe","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.1.0-0.tgz","fileCount":16,"integrity":"sha512-w0TvDOcemvQ8qA/gXw5o/cRHzZAWH1t4+KDNniHwLWasByPrckrjQgglEO9SYpzZzxGgOiS+09/JfCrDFRQq5Q==","signatures":[{"sig":"MEYCIQCxVPUZsrD54tIpAUJbbEg0OUd0XJnNIjy4Qw+Q0D3C9QIhAOMe8mIMg7CRUpFxQCHPHlyXQXgEH9POlrrGSgAuabvp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107891},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 with [Browserstack](https://www.browserstack.com/).\n- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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.\n","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"3046160909b6b000b37398603c46db0b0338a67f","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.15.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.17.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.8.1","flip-toolkit":"7.1.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"npm":"^9.6.6","jest":"^26.6.2","react":"^18.2.0","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^8.40.0","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.11.0","react-dom":"^18.2.0","babel-jest":"^29.5.0","typescript":"^5.0.4","@babel/core":"^7.21.8","@types/jest":"^29.5.1","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^18.2.6","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^5.0.1","@babel/runtime":"^7.21.5","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^18.2.4","@babel/preset-env":"^7.21.5","styled-components":"^4.4.1","@babel/preset-react":"^7.18.6","eslint-plugin-react":"^7.32.2","react-test-renderer":"^18.2.0","@babel/preset-typescript":"^7.21.5","@typescript-eslint/parser":"^5.59.5","@types/react-test-renderer":"^18.0.0","@typescript-eslint/eslint-plugin":"^5.59.5"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.1.0-0_1684098039277_0.018113814050825905","host":"s3://npm-registry-packages"}},"7.1.0":{"name":"react-flip-toolkit","version":"7.1.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.1.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"11b990c8f27ee713ef90bdc0871bde8fec2e0aa6","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.1.0.tgz","fileCount":16,"integrity":"sha512-KJ2IecKpYOJWgtXY9myyJzzC96FJaE9/8pFSAKgIoG54tiUAZ64ksDpmB+QmMofqFTa06RK7xWb9Rfavf8qz4Q==","signatures":[{"sig":"MEYCIQD2Gtjy2qgw6xdasMVgHOoJfj7gBMmiWGFwtTfWSnKeggIhAMoEcjrZQDezfWr9wm+ZJh3qY+Ttn3UwULX4FTAUGTXi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107887},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"gitHead":"85d85e076aade1cf9cc5de51d84154b781ea70ac","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"8.15.0","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"16.17.0","browserslist":["> 1%","last 2 versions","IE 11"],"dependencies":{"prop-types":"^15.8.1","flip-toolkit":"7.1.0"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^9.6.6","jest":"^26.6.2","react":"^18.2.0","sinon":"^9.2.1","watch":"^1.0.2","eslint":"^8.40.0","parcel":"^1.12.4","ts-jest":"^26.4.3","prettier":"2.1.2","npm-watch":"^0.11.0","react-dom":"^18.2.0","babel-jest":"^29.5.0","typescript":"^5.0.4","@babel/core":"^7.21.8","@types/jest":"^29.5.1","microbundle":"0.12.4","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^18.2.6","@emotion/core":"^10.1.1","normalize.css":"^8.0.1","react-scripts":"^5.0.1","@babel/runtime":"^7.21.5","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^18.2.4","@babel/preset-env":"^7.21.5","styled-components":"^4.4.1","@babel/preset-react":"^7.18.6","eslint-plugin-react":"^7.32.2","react-test-renderer":"^18.2.0","@babel/preset-typescript":"^7.21.5","@typescript-eslint/parser":"^5.59.5","@types/react-test-renderer":"^18.0.0","@typescript-eslint/eslint-plugin":"^5.59.5"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.1.0_1684106903657_0.7761503107002732","host":"s3://npm-registry-packages"}},"7.2.0":{"name":"react-flip-toolkit","version":"7.2.0","keywords":["react-component","FLIP","transition","animation"],"author":{"name":"Alex Holachek"},"license":"MIT","_id":"react-flip-toolkit@7.2.0","maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"dist":{"shasum":"b7210f88ea57e42e9295d9b14c2d143dc50bb1e4","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.2.0.tgz","fileCount":18,"integrity":"sha512-V4uSUDpy2AkZzVPAijFhXyX4ngRP5OW4jQAz8XLBQDvI8XNxtD88Vxz91niIZaSIi3N13N5wI+dUhlOItNdnow==","signatures":[{"sig":"MEQCICTNUC2c7mquR62lOxq2czVfOSBe9+kptf0Ds5fUn3dtAiAP+ztEmAXaqac9MzWdh6s1fQ+rtIX/CIq3A17hcZLkHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":128635},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.es.js","source":"src/index.ts","amdName":"ReactFlipToolkit","engines":{"npm":">=5","node":">=8"},"exports":"./lib/index.modern.mjs","gitHead":"63b914792574c171e26dca47e25c12eb9615ab24","scripts":{"fix":"eslint src/**/*.{ts,tsx} --fix","lint":"eslint src/**/*.{ts,tsx}","test":"jest --testPathIgnorePatterns \"lib|domtest\"","build":"cp ../../README.md ./README.md; yarn microbundle","start":"parcel --no-cache demo/index.html --out-dir demo/lib","watch":"watch 'npm run build:no-compress' ./src","format":"npx prettier --write 'src/**/*.{ts,tsx}'","inspect":"npx source-map-explorer lib/","prepare":"yarn run build","version":"npm run build","predeploy":"cd example && yarn install && yarn run build","prepublish":"npm run build","preversion":"npm test","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","check-types":"tsc --noEmit","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","format-and-fix":"npm-run-all format fix","build:no-compress":"microbundle --no-compress"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"repository":{"url":"git+https://github.com/aholachek/react-flip-toolkit.git","type":"git"},"_npmVersion":"10.5.2","description":"Configurable FLIP animation helpers for React","directories":{},"_nodeVersion":"20.13.1","browserslist":["> 1%","last 2 versions"],"dependencies":{"prop-types":"^15.8.1","flip-toolkit":"7.2.0"},"_hasShrinkwrap":false,"devDependencies":{"npm":"^10.8.1","jest":"^26.6.3","react":"^18.3.1","sinon":"^9.2.4","watch":"^1.0.2","eslint":"^8.57.0","parcel":"^1.12.4","ts-jest":"^26.5.6","prettier":"^2.8.8","npm-watch":"^0.13.0","react-dom":"^18.3.1","babel-jest":"^29.5.0","typescript":"^5.5.3","@babel/core":"^7.24.7","@types/jest":"^29.5.12","microbundle":"0.15.1","npm-run-all":"^4.1.5","react-icons":"^3.11.0","@types/react":"^18.3.3","@emotion/core":"^10.3.1","normalize.css":"^8.0.1","react-scripts":"^5.0.1","@babel/runtime":"^7.24.7","babel-polyfill":"^6.26.0","lodash.shuffle":"^4.2.0","@types/react-dom":"^18.3.0","@babel/preset-env":"^7.24.7","styled-components":"^4.4.1","@babel/preset-react":"^7.24.7","eslint-plugin-react":"^7.34.3","react-test-renderer":"^18.3.1","@babel/preset-typescript":"^7.24.7","@typescript-eslint/parser":"^5.62.0","@types/react-test-renderer":"^18.3.0","@typescript-eslint/eslint-plugin":"^5.62.0"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"_npmOperationalInternal":{"tmp":"tmp/react-flip-toolkit_7.2.0_1720146674959_0.7239803020675253","host":"s3://npm-registry-packages"}},"7.2.4":{"name":"react-flip-toolkit","version":"7.2.4","description":"Configurable FLIP animation helpers for React","license":"MIT","source":"src/index.ts","main":"lib/index.js","module":"lib/index.es.js","types":"lib/index.d.ts","amdName":"ReactFlipToolkit","repository":{"type":"git","url":"git+https://github.com/aholachek/react-flip-toolkit.git"},"bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"author":{"name":"Alex Holachek"},"keywords":["react-component","FLIP","transition","animation"],"engines":{"node":">=8","npm":">=5"},"scripts":{"microbundle":"microbundle --define process.env.NODE_ENV=production --name=ReactFlipToolkit --jsx React.createElement --globals react=React,prop-types=PropTypes,flip-toolkit=FlipToolkit","start":"parcel --no-cache demo/index.html --out-dir demo/lib","deploy-demo":"parcel build demo/index.html --out-dir demo/lib; cp demo/lib/index.html demo/lib/200.html; surge demo/lib --domain react-flip-toolkit-demos.surge.sh","build":"cp ../../README.md ./README.md; yarn microbundle","build:debug":"microbundle --name=ReactFlipToolkit --jsx React.createElement --no-compress","watch":"watch 'npm run build:no-compress' ./src","build:no-compress":"microbundle --no-compress","check-types":"tsc --noEmit","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","inspect":"npx source-map-explorer lib/","lint":"eslint src/**/*.{ts,tsx}","format":"npx prettier --write 'src/**/*.{ts,tsx}'","fix":"eslint src/**/*.{ts,tsx} --fix","format-and-fix":"npm-run-all format fix","test":"jest --testPathIgnorePatterns \"lib|domtest\"","preversion":"npm test","postpublish":"git push origin master; git push origin --tags; rm ./README.MD","version":"npm run build","prepublish":"npm run build"},"dependencies":{"flip-toolkit":"7.2.4","prop-types":"^15.8.1"},"peerDependencies":{"react":">= 16.x","react-dom":">= 16.x"},"devDependencies":{"@babel/core":"^7.24.7","@babel/preset-env":"^7.24.7","@babel/preset-react":"^7.24.7","@babel/preset-typescript":"^7.24.7","@babel/runtime":"^7.24.7","@emotion/core":"^10.3.1","@types/jest":"^29.5.12","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@types/react-test-renderer":"^18.3.0","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0","babel-jest":"^29.5.0","babel-polyfill":"^6.26.0","eslint":"^8.57.0","eslint-plugin-react":"^7.34.3","jest":"^26.6.3","lodash.shuffle":"^4.2.0","microbundle":"0.15.1","normalize.css":"^8.0.1","npm":"^10.8.1","npm-run-all":"^4.1.5","npm-watch":"^0.13.0","parcel":"^1.12.4","prettier":"^2.8.8","react":"^18.3.1","react-dom":"^18.3.1","react-icons":"^3.11.0","react-scripts":"^5.0.1","react-test-renderer":"^18.3.1","sinon":"^9.2.4","styled-components":"^4.4.1","ts-jest":"^26.5.6","typescript":"^5.5.3","watch":"^1.0.2"},"browserslist":["> 1%","last 2 versions"],"_id":"react-flip-toolkit@7.2.4","gitHead":"2d00d4517d926598122242c8f40d05ae48553044","homepage":"https://github.com/aholachek/react-flip-toolkit#readme","_nodeVersion":"20.13.1","_npmVersion":"10.5.2","dist":{"integrity":"sha512-+aZBZwzHBDfJzMRLjAAOKiBkrk8PV0YFVE0k1x85+UsykApLwg8a0LlQ5H80uFltFZmGtrQ7EE1krhiZ1jI5ig==","shasum":"4eb10f89cc1081209446a4b04c10416403865fbd","tarball":"https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.2.4.tgz","fileCount":16,"unpackedSize":113873,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+pm5wq0xozGNqc1mnbyTLSSGyiHwnftCUI7imuxvyMAiBqDz9rA1v6wVgeg73yJoVusk2a++aj0uPNOdZHPbx2HA=="}]},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"directories":{},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-flip-toolkit_7.2.4_1720285397323_0.6569639034499473"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-18T00:09:59.516Z","modified":"2024-07-06T17:03:17.761Z","1.0.0":"2018-06-18T00:09:59.608Z","1.0.1":"2018-06-19T14:19:53.233Z","1.0.2":"2018-06-19T23:10:40.585Z","1.0.3":"2018-06-20T00:51:29.097Z","1.0.4":"2018-06-20T00:52:07.505Z","1.0.5":"2018-06-20T01:39:07.988Z","1.0.6":"2018-06-20T03:33:41.836Z","1.0.7":"2018-06-20T03:43:05.062Z","1.0.8":"2018-06-20T03:45:26.626Z","1.0.9":"2018-06-20T11:08:39.778Z","1.1.0":"2018-06-21T22:09:12.586Z","1.1.1":"2018-06-23T03:21:16.977Z","1.1.2":"2018-06-23T14:57:26.423Z","1.1.3":"2018-06-23T15:53:59.204Z","1.1.4":"2018-06-23T18:07:25.910Z","1.1.5":"2018-06-24T00:27:27.893Z","1.1.6":"2018-06-24T15:41:24.163Z","1.1.7":"2018-06-24T15:47:47.615Z","1.1.8":"2018-06-24T21:50:03.837Z","1.1.9":"2018-06-24T21:56:43.004Z","1.1.10":"2018-06-24T22:05:16.130Z","1.1.11":"2018-06-24T22:38:29.174Z","1.1.12":"2018-06-24T23:11:57.669Z","1.0.0-alpha.2":"2018-06-25T13:03:28.263Z","1.0.0-alpha.3":"2018-06-25T13:06:12.243Z","1.0.0-alpha.4":"2018-06-25T13:07:29.380Z","1.0.0-alpha.5":"2018-06-25T13:15:46.520Z","1.0.0-alpha.6":"2018-06-25T13:17:42.375Z","1.1.13-0":"2018-06-25T13:28:17.786Z","1.1.13-1":"2018-06-25T13:31:48.047Z","1.1.13-2":"2018-06-25T13:34:38.110Z","1.1.13-6":"2018-06-25T13:41:38.884Z","1.1.13-7":"2018-06-25T16:12:49.834Z","1.1.13":"2018-06-25T16:20:16.221Z","1.1.14":"2018-06-25T19:25:01.798Z","1.1.15-0":"2018-06-26T01:53:40.397Z","1.1.15-2":"2018-06-27T03:28:53.155Z","1.1.15-3":"2018-06-27T19:09:46.358Z","1.1.15-4":"2018-06-27T19:51:45.041Z","1.1.15-5":"2018-06-27T19:56:25.668Z","1.1.15-6":"2018-06-27T21:12:13.114Z","2.0.0":"2018-06-28T17:56:10.935Z","2.0.1":"2018-06-28T17:58:23.586Z","2.0.2":"2018-06-28T18:08:55.932Z","2.0.3":"2018-06-28T20:45:32.482Z","2.0.4":"2018-06-29T12:19:44.770Z","2.0.5":"2018-06-29T13:08:49.732Z","2.0.6":"2018-06-29T13:11:32.356Z","2.0.7":"2018-06-29T16:22:07.867Z","2.0.8":"2018-06-29T16:57:14.257Z","2.0.9":"2018-07-03T02:06:15.632Z","3.0.0-0":"2018-07-08T16:36:28.445Z","3.0.0-beta1":"2018-07-08T16:48:47.803Z","3.0.0-beta2":"2018-07-08T19:55:03.835Z","3.0.0-beta3":"2018-07-08T21:20:27.959Z","3.0.0-beta4":"2018-07-08T22:58:39.752Z","3.0.0":"2018-07-09T02:16:08.030Z","3.0.1-beta2":"2018-07-11T12:10:33.921Z","3.0.1":"2018-07-11T13:29:35.779Z","3.0.2":"2018-07-11T16:56:00.478Z","3.0.3":"2018-07-11T21:53:16.585Z","3.0.4-beta2":"2018-07-12T00:58:53.500Z","3.0.4":"2018-07-12T02:03:03.919Z","3.0.5-beta1":"2018-07-13T03:01:53.903Z","3.0.5":"2018-07-13T03:14:21.793Z","3.0.6-beta1":"2018-07-21T22:42:16.653Z","3.0.6-beta2":"2018-07-22T00:46:00.972Z","3.0.6-beta3":"2018-07-22T21:42:36.282Z","3.0.6-beta4":"2018-07-22T21:58:58.864Z","3.1.0":"2018-07-23T02:42:25.486Z","3.1.1":"2018-07-23T11:38:04.285Z","4.0.0-beta1":"2018-08-02T10:50:40.159Z","4.0.0-beta2":"2018-08-04T15:02:22.214Z","4.0.0-beta3":"2018-08-04T15:48:06.732Z","4.0.0-beta4":"2018-08-04T16:28:34.655Z","4.0.0-beta5":"2018-08-04T16:48:55.139Z","4.0.0-beta6":"2018-08-04T22:48:48.735Z","4.0.0-beta7":"2018-08-05T02:54:24.602Z","4.0.0":"2018-08-05T14:26:53.778Z","4.0.1-beta1":"2018-08-12T04:08:32.800Z","4.0.1":"2018-08-16T15:26:30.336Z","4.0.2":"2018-08-16T15:30:22.101Z","4.1.0-beta1":"2018-08-31T19:22:44.177Z","4.1.0-beta2":"2018-08-31T21:08:48.069Z","4.1.0-beta3":"2018-09-01T16:13:07.518Z","4.1.0-beta5":"2018-09-01T18:01:37.729Z","4.0.3-beta1":"2018-09-02T17:36:59.524Z","4.0.3":"2018-09-02T18:41:49.003Z","4.0.4":"2018-09-02T19:00:19.534Z","4.0.5":"2018-09-02T20:42:48.897Z","4.0.6":"2018-09-06T22:17:36.186Z","4.0.7":"2018-09-15T04:36:44.503Z","4.0.8":"2018-09-17T20:21:06.770Z","4.0.9":"2018-09-17T20:48:25.703Z","5.0.0-beta0":"2018-09-28T02:20:53.151Z","5.0.0-beta1":"2018-09-28T13:19:58.771Z","5.0.0":"2018-09-28T15:08:35.486Z","5.0.1-beta":"2018-09-28T22:12:14.701Z","5.0.1":"2018-09-28T22:16:00.594Z","5.0.2":"2018-10-04T21:28:44.857Z","5.0.3-beta1":"2018-10-17T00:53:24.753Z","5.0.3":"2018-10-17T23:33:36.282Z","5.0.4":"2018-10-19T14:57:11.668Z","5.0.5":"2018-10-21T13:54:46.855Z","6.0.0-beta0":"2018-11-06T13:54:06.409Z","6.0.0-beta2":"2018-11-08T02:46:43.621Z","6.0.0-beta3":"2018-11-09T00:59:56.113Z","6.0.0":"2018-11-09T15:33:36.041Z","6.1.0-beta0":"2018-11-09T18:00:12.348Z","6.1.0-beta1":"2018-11-09T22:58:57.918Z","6.1.0-beta2":"2018-11-11T21:05:54.210Z","6.1.0":"2018-11-12T16:20:42.534Z","6.1.1-beta0":"2018-11-12T19:09:24.068Z","6.1.1-beta1":"2018-11-12T20:35:45.403Z","6.1.1-beta2":"2018-11-12T22:00:54.091Z","6.2.0":"2018-11-12T23:49:22.488Z","6.2.1-beta0":"2018-11-13T18:55:05.274Z","6.2.1-beta1":"2018-11-13T21:17:24.889Z","6.2.1":"2018-11-14T02:12:06.477Z","6.2.2":"2018-11-19T15:14:51.739Z","6.2.3-beta0":"2018-11-25T14:12:29.253Z","6.3.0":"2018-11-25T14:28:22.278Z","6.3.1-beta0":"2018-12-15T20:59:45.033Z","6.3.1-beta1":"2018-12-15T21:24:48.217Z","6.3.1":"2018-12-15T21:29:47.906Z","6.3.2":"2018-12-28T18:14:04.960Z","6.3.3":"2019-01-01T14:39:27.820Z","6.3.4-0":"2019-01-02T20:22:09.467Z","6.3.4-1":"2019-01-02T20:38:56.881Z","6.3.4-2":"2019-01-02T21:33:37.259Z","6.3.4-3":"2019-01-02T21:45:39.064Z","6.3.4-4":"2019-01-02T22:50:56.774Z","6.3.4-5":"2019-01-03T01:47:36.071Z","6.3.4-6":"2019-01-03T15:57:20.154Z","6.3.4-7":"2019-01-03T16:05:59.294Z","6.3.4-8":"2019-01-03T16:33:46.529Z","6.3.4-10":"2019-01-03T19:44:56.734Z","6.3.4-11":"2019-01-03T22:08:52.415Z","6.3.4-13":"2019-01-03T22:49:50.556Z","6.4.0":"2019-01-04T02:08:53.865Z","6.4.1":"2019-01-08T01:10:05.609Z","6.5.0-beta0":"2019-01-10T18:40:00.044Z","6.5.0":"2019-01-10T19:35:40.621Z","6.5.1":"2019-01-10T22:00:34.577Z","6.5.2":"2019-01-15T02:08:37.384Z","6.5.3-0":"2019-01-16T20:12:56.623Z","6.5.3":"2019-01-16T21:47:14.846Z","6.5.4":"2019-01-19T00:44:13.438Z","6.5.5":"2019-01-19T02:24:44.230Z","6.5.6-0":"2019-02-18T21:05:48.913Z","6.5.6":"2019-02-18T21:22:07.204Z","6.5.7":"2019-02-22T01:01:19.337Z","6.5.8":"2019-04-10T13:49:02.654Z","6.5.9":"2019-04-13T14:56:12.502Z","6.5.10-0":"2019-05-08T13:18:33.683Z","6.6.0-0":"2019-05-18T19:53:07.782Z","6.6.0":"2019-05-18T20:58:52.610Z","6.6.1":"2019-05-20T13:33:03.163Z","6.6.2":"2019-05-22T02:10:48.182Z","6.6.3":"2019-05-25T14:59:07.960Z","6.6.4-0":"2019-06-16T04:06:51.868Z","6.6.4":"2019-06-16T13:28:52.953Z","6.6.5-0":"2019-06-24T17:20:14.530Z","6.6.5":"2019-06-24T23:36:54.210Z","6.6.6-0":"2019-07-04T23:32:59.318Z","6.6.6-1":"2019-07-05T00:45:57.396Z","6.6.6":"2019-07-05T00:53:37.083Z","6.6.7-1":"2019-07-05T12:20:47.832Z","6.6.7":"2019-07-05T12:31:36.447Z","6.6.8-0":"2019-07-05T13:32:53.296Z","6.6.8":"2019-07-05T13:50:51.534Z","6.6.9-0":"2019-07-09T10:55:23.905Z","6.6.9":"2019-07-09T11:21:46.011Z","7.0.0-alpha.0":"2019-08-09T01:11:21.697Z","7.0.0-alpha.1":"2019-08-09T01:24:51.582Z","7.0.0-7.0.0-alpha.2.0":"2019-08-13T00:31:00.081Z","7.0.0-alpha.2.0":"2019-08-13T00:38:35.073Z","7.0.0-alpha.3":"2019-08-13T01:46:59.587Z","7.0.0-beta.1":"2019-08-13T13:31:24.838Z","7.0.0-beta.2":"2019-08-13T13:41:26.411Z","7.0.0-7.0.0-alpha.4.0":"2019-08-13T15:56:58.626Z","7.0.0-alpha-4.1.0":"2019-08-13T18:05:35.744Z","7.0.0-alpha-4.2.0":"2019-08-15T00:40:29.875Z","7.0.0-5.0":"2019-08-15T13:11:50.671Z","7.0.0-alpha.5":"2019-08-15T13:17:07.141Z","7.0.0-alpha.6":"2019-08-15T17:47:13.197Z","7.0.0-alpha.7":"2019-08-15T18:00:45.504Z","7.0.0-alpha.8":"2019-08-15T18:04:50.597Z","7.0.0-alpha.9":"2019-08-15T18:08:56.975Z","7.0.0-alpha.10":"2019-08-15T18:32:54.765Z","7.0.0-alpha.11":"2019-08-15T19:07:12.580Z","7.0.0-alpha.12":"2019-08-15T20:17:26.685Z","7.0.0-beta.4":"2019-08-15T21:05:53.934Z","7.0.0":"2019-08-16T01:22:10.090Z","7.0.1":"2019-08-16T12:42:08.001Z","7.0.2":"2019-08-16T13:06:12.007Z","7.0.3":"2019-08-22T11:45:25.209Z","7.0.4-beta.0":"2019-08-31T14:01:25.662Z","7.0.4":"2019-08-31T14:58:52.865Z","7.0.5-0":"2019-09-05T17:15:34.988Z","7.0.5-1":"2019-09-05T17:21:51.990Z","7.0.5":"2019-09-05T17:43:39.025Z","7.0.6-0":"2019-09-26T23:51:10.551Z","7.0.6":"2019-09-29T12:19:12.797Z","7.0.7":"2019-11-09T18:40:38.594Z","7.0.8":"2020-02-17T17:42:24.747Z","7.0.9":"2020-03-09T20:43:42.764Z","7.0.10-0":"2020-03-09T21:07:41.892Z","7.0.10":"2020-05-30T15:47:41.282Z","7.0.12-1":"2020-06-11T12:48:12.194Z","7.0.11":"2020-06-11T15:01:38.336Z","7.0.12-0":"2020-06-11T23:50:15.834Z","7.0.12":"2020-06-11T23:54:13.918Z","7.0.13-0":"2020-11-05T17:41:26.379Z","7.0.13-1":"2020-11-05T17:53:09.487Z","7.0.13":"2020-11-05T22:17:32.245Z","7.0.14":"2022-05-13T15:36:37.868Z","7.0.16":"2022-09-04T02:43:57.008Z","7.0.17":"2022-09-30T21:56:28.061Z","7.1.0-0":"2023-05-14T21:00:39.483Z","7.1.0":"2023-05-14T23:28:23.803Z","7.2.0":"2024-07-05T02:31:15.155Z","7.2.4":"2024-07-06T17:03:17.589Z"},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"author":{"name":"Alex Holachek"},"repository":{"type":"git","url":"git+https://github.com/aholachek/react-flip-toolkit.git"},"keywords":["react-component","FLIP","transition","animation"],"license":"MIT","homepage":"https://github.com/aholachek/react-flip-toolkit#readme","bugs":{"url":"https://github.com/aholachek/react-flip-toolkit/issues"},"readme":"\n \n \n \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/8130rn9q2)\n\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst AnimatedSquare = () => {\n const [fullScreen, setFullScreen] = useState(false)\n const toggleFullScreen = () => setFullScreen(prevState => !prevState)\n\n return (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/74q85nq1qq)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\n\nconst Square = ({ toggleFullScreen }) => (\n \n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/14v8o5xy44)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Flipper, Flipped } from 'react-flip-toolkit'\nimport shuffle from 'lodash.shuffle'\n\nconst ListShuffler = () => {\n const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n const shuffleList = () => setData(shuffle(data))\n\n return (\n - \n {data.map(d => (\n
- {d} \n
\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/list-transitions-ju549)\n\n### Stagger Effects\n\nThe `react-flip-toolkit` library offers spring-driven stagger configurations so that you can achieve complex sequenced effects.\n\nFor the most basic stagger effect, you can simply add a `stagger` boolean prop to your `Flipped` element:\n\n```jsx\n\n\n\n[Fork this example on Code Sandbox](https://codesandbox.io/s/wnnxl223n8)\n\n\n### Spring Customizations\n\n`react-flip-toolkit` uses springs for animations. To customize the spring, you can pass in a preset name:\n\n```jsx\n// spring preset can be one of: \"stiff\", \"noWobble\", \"gentle\", \"veryGentle\", or \"wobbly\"\n\n\n\n- [Fork this example on Code Sandbox](https://codesandbox.io/s/github/aholachek/react-stripe-menu)\n- [Fork Github repo](https://github.com/aholachek/react-stripe-menu)\n\n\nInteresting 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:\n\n```jsx\n\n \n \n
\nsome text that will not be warped
\n \n\n\n[Fork Github repo](https://github.com/aholachek/react-flip-toolkit-router-example)\n\n\n`react-flip-toolkit` works great with client-side routers to provide route-driven transitions:\n\n```jsx\n\n\n \n\n
\n\n\n\n## Global configuration functions\n\nYou can programmatically call the following functions if you need to disable (or re-enable) FLIP animations everywhere.\n\n#### `disableFlip()`\n\nGlobal switch to disable all animations in all `Flipper` containers.\n\n#### `enableFlip()`\n\nGlobal switch to (re-)enable all animations in all `Flipper` containers. Animations are enabled by default. Calling this function is needed only if animations were previously disabled with `disableFlip()`.\n\n#### `isFlipEnabled()`\n\nReturns a boolean indicating whether animations are globally enabled or disabled.\n\n\n## Library details\n\n\n\n\n\n- Tested in latest Chrome, Firefox, Safari, and Edge with [Browserstack](https://www.browserstack.com/).\n- Requires React 16+\n- Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations\n\n## Troubleshooting\n\n### Problem #1: Nothing is happening\n\n- Make sure you're updating the `flipKey` attribute in the `Flipper` component whenever an animation should happen.\n- 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](#wrapping-a-react-component) and pass down to the necessary DOM element.\n- 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.\n- `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.\n- Do you have the [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) setting turned on? As of v7.1.0 that setting will disable all animations.\n\n### Problem #2: Things look weird / animations aren't behaving\n\n- **Check to make sure all `flipId`s 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.\n- **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.\n- Make sure you don't have any **competing CSS transitions** on the element in question.\n- **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.)\n\n### Problem #3: It's still not working\n\n- Try out the `debug` prop. If you still can't figure out what's going wrong, you can add the [the `debug` prop](#props) directly on your `Flipper` component to pause transitions at the beginning.\n- If you think something might actually be broken, or are completely stuck, feel free to make an issue.\n\n## Performance\n\n`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](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing).\nHowever, 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.\n\n### `Memoization`\n\nWhen 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`](https://reactjs.org/docs/react-api.html#reactmemo) or [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 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.\n\n### `will-change:transform`\n\n```css\n.box {\n will-change: transform;\n}\n```\n\nThis [CSS property](https://dev.opera.com/articles/css-will-change-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, try seeing if it increases the performance of the animation.\n","readmeFilename":"README.md"}