From 0a38620b98383d20b03d6068986393d961208ad0 Mon Sep 17 00:00:00 2001 From: Stefano Baldan Date: Tue, 2 Jul 2024 15:30:45 +0200 Subject: [PATCH 1/3] Global switch for enabling/disabling animations --- packages/flip-toolkit/src/flip/index.ts | 11 ++++++++++- packages/flip-toolkit/src/index.ts | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/flip-toolkit/src/flip/index.ts b/packages/flip-toolkit/src/flip/index.ts index ece5a56..c19f95d 100644 --- a/packages/flip-toolkit/src/flip/index.ts +++ b/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} diff --git a/packages/flip-toolkit/src/index.ts b/packages/flip-toolkit/src/index.ts index 87a5bda..d9d61d2 100644 --- a/packages/flip-toolkit/src/index.ts +++ b/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' From 6a35e939159dd540c70b6005659b0495a8655d47 Mon Sep 17 00:00:00 2001 From: Stefano Baldan Date: Tue, 2 Jul 2024 17:10:12 +0200 Subject: [PATCH 2/3] Running tests, formatting, documenting, finalizing --- packages/flip-toolkit/src/Flipper.ts | 2 +- packages/flip-toolkit/src/flip/index.ts | 6 +++--- packages/react-flip-toolkit/README.md | 2 ++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/flip-toolkit/src/Flipper.ts b/packages/flip-toolkit/src/Flipper.ts index eaa39b1..9154fbf 100644 --- a/packages/flip-toolkit/src/Flipper.ts +++ b/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 { diff --git a/packages/flip-toolkit/src/flip/index.ts b/packages/flip-toolkit/src/flip/index.ts index c19f95d..a4be85e 100644 --- a/packages/flip-toolkit/src/flip/index.ts +++ b/packages/flip-toolkit/src/flip/index.ts @@ -17,9 +17,9 @@ import { let enabled = true -const disableFlip = () => enabled = false +const disableFlip = () => (enabled = false) -const enableFlip = () => enabled = true +const enableFlip = () => (enabled = true) const isFlipEnabled = () => enabled @@ -159,4 +159,4 @@ const onFlipKeyUpdate = ({ } } -export {disableFlip, enableFlip, isFlipEnabled, onFlipKeyUpdate} +export { disableFlip, enableFlip, isFlipEnabled, onFlipKeyUpdate } diff --git a/packages/react-flip-toolkit/README.md b/packages/react-flip-toolkit/README.md index 0037ef8..9c69f79 100644 --- a/packages/react-flip-toolkit/README.md +++ b/packages/react-flip-toolkit/README.md @@ -486,6 +486,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()` from the `flip-toolkit` package. You can check if animations are enabled or disabled by calling `isFlipEnabled()` function from the same package. Calling `enableFlip()` will re-enable FLIP animations globally. ### Problem #2: Things look weird / animations aren't behaving From e40e36db57468b79e21d70451ca468327ea474a4 Mon Sep 17 00:00:00 2001 From: Stefano Baldan Date: Tue, 2 Jul 2024 17:44:13 +0200 Subject: [PATCH 3/3] Re-exporting global animation switch functions in react-flip-toolkit --- packages/react-flip-toolkit/README.md | 16 +++++++++++++++- packages/react-flip-toolkit/src/index.ts | 1 + 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/react-flip-toolkit/README.md b/packages/react-flip-toolkit/README.md index 9c69f79..9196b21 100644 --- a/packages/react-flip-toolkit/README.md +++ b/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` @@ -487,7 +501,7 @@ spring({ - 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()` from the `flip-toolkit` package. You can check if animations are enabled or disabled by calling `isFlipEnabled()` function from the same package. Calling `enableFlip()` will re-enable FLIP animations globally. +- 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 diff --git a/packages/react-flip-toolkit/src/index.ts b/packages/react-flip-toolkit/src/index.ts index 2874849..ec812cb 100644 --- a/packages/react-flip-toolkit/src/index.ts +++ b/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'