What?

Tracked in #42770

After the regression introduced by #40740, this PR aims at restoring (and improving) the Popover's opening animation

Why?

#40740 introduces a few big changes to Popover — in particular, it introduced a new placement prop (that should replace the legacy position prop). Alongside the placement prop, #40470 introduced two new functions:

• positionToPlacement: a function to "convert" position values to placement values
• placementToAnimationOrigin: a function to associate an animation origin, given the placement

This refactor caused the popover to animate unexpectedly (i.e. from the from animation origin (example).

Furthermore, as I looked into solving this issue, I noticed that Popover still relied on the animate component, which was supposed to be deprecated already some time ago (see #27390).

Finally, I also noticed that the Popover was animating even when in its expanded mode, which is supposed to occupy the full screen on mobile — I believe that animating a piece of UI as big as the whole screen with a translate/scale animation could be excessive.

How?

• Switched to framer-motion (instead of the animate component) for the Popover's animation
  • Tweaked a few animation parameters compared to the CSS used in the animate component:
    • same animation duration: 0.1s
    • same easing function: cubic-bezier(0, 0, 0.2, 1)
    • added more animation origin options (e.g. it's now possible to animated from the middle of the x and y axis)
    • kept the same translation amount, but improved it by allowing for more directions (e.g the popover can also translate from the bottom and from the right, previously it could only translate from top and left)
    • added a fade-in animation (from 0 to 1 opacity)
• Regardless of the animate property, the popover won't animate when in its expanded state (on mobile). This change was caused by two reasons:
  • When expanded, the popover would still have its animation origin computed based on its placement — even if the placement isn't really taken into account in the expanded state (the popover is full screen)
  • As said before, since the popover takes the whole screen when expanded on mobile, an opening animation felt overwhelming
  • If we want to keep the animation in the expanded state on mobile, I suggest we look at introducing a special case for its entry animation, which doesn't rely on placement and/or is less overwhelming visually.
• Completely refactored the placementToAnimationOrigin logic, using a lookup table instead of hard-to-read logic for the animation origin
• Moved both positionToPlacement and placementToAnimationOrigin to a separate utils.js file
• Added unit tests for the positionToPlacement function and the variable parts of the placementToAnimationOrigin function
• Tweaked the Storybook examples to make it easier to debug placements and animations

Testing Instructions

For ease of debug, the animation duration can be changes like so:

diff --git a/packages/components/src/popover/utils.js b/packages/components/src/popover/utils.js
index a5d2814db2..6ae9b77885 100644
--- a/packages/components/src/popover/utils.js
+++ b/packages/components/src/popover/utils.js
@@ -78,6 +78,6 @@ export const placementToMotionAnimationProps = ( placement ) => {
 			[ translateProp ]: `${ 2 * translateDirection }em`,
 		},
 		animate: { opacity: 1, scale: 1, [ translateProp ]: 0 },
-		transition: { duration: 0.1, ease: [ 0, 0, 0.2, 1 ] },
+		transition: { duration: 3, ease: [ 0, 0, 0.2, 1 ] },
 	};
 };

Storybook

Open Storybook and play around with the Popover examples. In particular:

• check that, for each placement value, the popover animates from the correct animation origin
• check that the rest of the animation parameters are satisfactory (e.g. duration, easing, translation amount, scale amount)
• check that the popover doesn't animate when the animate prop is set to false
• check that the popover doesn't animate when the expandOnMobile prop is set to true and the popover is rendered in mobile viewports (even if the animate prop is set to true)
• check that the popover doesn't animate when the prefers-reduced-motion flag is set by the user (even if the animate prop is set to true)

In the editor

Do a sanity check across the editor and make sure that the popover behaves (and animates when necessary) as expected

Known issues

#42770 has a list of known issues.

Specifically to testing for animation origin, it is possible that the positionToPlacement function introduced in #40740 is not converting the position 100% correctly. For the sake of this PR's scope, we should focus on the placement to animation origin logic (the position to placement logic can be tackled separately).

Screenshots or screencast

Storybook (normal speed), this PR:

Storybook (slower speed), this PR:

Editor (normal speed), trunk:

Editor (normal speed), this PR: