Global switch for enabling/disabling animations (#218)

* Global switch for enabling/disabling animations

* Running tests, formatting, documenting, finalizing

* Re-exporting global animation switch functions in react-flip-toolkit

packages/flip-toolkit/src/Flipper.ts

@@ -1,4 +1,4 @@
-import onFlipKeyUpdate from './flip'
+import { onFlipKeyUpdate } from './flip'
 import getFlippedElementPositionsBeforeUpdate from './flip/getFlippedElementPositions/getFlippedElementPositionsBeforeUpdate'
 import { assign } from './utilities'
 import {

packages/flip-toolkit/src/flip/index.ts

@@ -15,6 +15,14 @@ import {
   ScopedSelector
 } from './animateFlippedElements/types'
 
+let enabled = true
+
+const disableFlip = () => (enabled = false)
+
+const enableFlip = () => (enabled = true)
+
+const isFlipEnabled = () => enabled
+
 const createPortalScopedSelector =
   (portalKey: string) => (selector: string) => {
     return toArray(
@@ -73,6 +81,7 @@ const onFlipKeyUpdate = ({
   onComplete,
   onStart
 }: OnFlipKeyUpdateArgs) => {
+  if (!enabled) return
   const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
   if (mediaQuery.matches) return
   const flippedElementPositionsAfterUpdate =
@@ -150,4 +159,4 @@ const onFlipKeyUpdate = ({
   }
 }
 
-export default onFlipKeyUpdate
+export { disableFlip, enableFlip, isFlipEnabled, onFlipKeyUpdate }

packages/flip-toolkit/src/index.ts

@@ -2,6 +2,6 @@ import * as utilities from './utilities'
 import * as constants from './constants'
 export { default as Flipper } from './Flipper'
 export { default as getFlippedElementPositionsBeforeUpdate } from './flip/getFlippedElementPositions/getFlippedElementPositionsBeforeUpdate'
-export { default as onFlipKeyUpdate } from './flip'
+export * from './flip'
 export { utilities, constants }
 export { default as spring } from './Spring'

packages/react-flip-toolkit/README.md

@@ -278,6 +278,20 @@ That means any layout styles — padding, flexbox, etc—should be appli
 - [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)
 - [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)
 
+## Global configuration
+
+### `disableFlip()`
+
+Global switch to disable all animations in all `Flipper` containers.
+
+### `enableFlip()`
+
+Global 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()`.
+
+### `isFlipEnabled()`
+
+Returns a boolean indicating whether animations are globally enabled or disabled.
+
 ## The Components
 
 ### `Flipper`
@@ -486,6 +500,8 @@ spring({
 - 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.
 - Is the element that's receiving props from `Flipped` visible in the DOM? `react-flip-toolkit` attempts to optimize performance by not animating elements that are off-screen or elements that have no width or height.
 - `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.
+- 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.
+- Make sure you didn't disable animations using `disableFlip()`. You can check if animations are enabled or disabled by calling `isFlipEnabled()`. `enableFlip()` will re-enable FLIP animations globally.
 
 ### Problem #2: Things look weird / animations aren't behaving
 

packages/react-flip-toolkit/src/index.ts

@@ -1,3 +1,4 @@
+export { disableFlip, enableFlip, isFlipEnabled } from 'flip-toolkit'
 export { default as Flipper } from './Flipper'
 export { default as Flipped } from './Flipped'
 export { default as ExitContainer } from './ExitContainer'