Try menu appear animation & start work on handbook #13617

jasmussen · 2019-01-31T12:23:11Z

This PR aims to start work on #8029, by creating an animation for use with popovers, and by starting documentation for hwo to best use animation.

It:

Adds a "scale and appear" animation to the block toolbar, the more menu, and the block library
It adds a very very early draft of an animation document, which includes an early inventory of current animations in use.

GIF:

youknowriad · 2019-01-31T12:26:39Z

It adds a very very early draft of an animation document, which includes an early inventory of current animations in use.

I don't see this, did I miss something?

gziolo · 2019-01-31T12:27:42Z

packages/components/src/popover/style.scss

@@ -177,6 +177,18 @@ $arrow-size: 8px;
 	.components-popover:not(.is-mobile):not(.is-middle).is-left & {
 		margin-right: -24px;
 	}
+
+	// Animate some of the popovers


How about we add a prop to the Popover component which would enable a class name which we put here instead?

Maybe instead, this would be a HoC/renderprop/hook adding the correct className based on the "position" (top left,...)

Yep, something like that :)
Whatever is easy to setup and explain in docs. If we ask to add CSS styles to enable animation it might be harder to follow.

youknowriad · 2019-01-31T12:28:25Z

packages/components/src/popover/style.scss

+
+	.edit-post-more-menu__content & {
+		transform-origin: top right;
+	}


Ideally these styles shoudn't be added here and instead added to each respective component's stylesheet.

Or generalized and controlled by the value passed through prop translated into a corresponding class name.

gziolo · 2019-01-31T12:30:14Z

packages/components/src/popover/style.scss

+		transform-origin: top left;
+	}
+
+	.edit-post-more-menu__content & {


Is it something that could be also based on the prop passed to the component?

youknowriad · 2019-01-31T12:30:35Z

packages/edit-post/src/style.scss

+	to {
+		transform: translateY(0%) scaleY(1) scaleX(1);
+	}
+}


If this animation is tied to the "popover" component, I guess this style should go there but if it's a very generic animation that can be applied anywhere, maybe we could try working on an "animatation" stylesheet loaded as a dependency where it's being used.

Ideally, SASS would allow these keyframes in mixins in someways, (with rewrite rules maybe) but I'm not sure if that's possible

jasmussen · 2019-01-31T12:31:50Z

I don't see this, did I miss something?

Ack, looks like I forgot to `git add the new MD file, and now I'm relocating home! I'll be sure to commit it tomorrow, sorry about that.

youknowriad · 2019-01-31T12:33:26Z

I'm looking forward adding some subtle animations to Gutenberg. Thanks for starting this Joen.

folletto · 2019-01-31T13:49:10Z

On principle: good move, great to get this started, nice effect. 🌟

I feel this is the kind of thing I'd push live early right after a release so people can feel it.

Aside: I consider 200ms the upper limit for these animations. So from a theoretical perspective I think we're good.

Have we checked the performance on mobile?

melchoyce · 2019-01-31T18:56:07Z

FWIW, the animation feels a little slow to me.

kjellr · 2019-01-31T19:17:00Z

Agreed with @melchoyce and @folletto on the speed. I tried speeding it up to 0.01s and it feels pretty good to me. (It could maybe even be a little faster than that, but 0.05s seemed a little too quick).

I did see this error, which doesn't happen to me in master:

The inserter there pops up, even though there isn't enough space. 🤔

It also seemed weird that the Content Structure and Block Navigation menus didn't have this animation... but I'm guessing those use a different component or something?

mapk · 2019-01-31T23:16:33Z

I experienced the bug that Kjell mentioned as well. And also agree on speeding up the animation a tad. It's looking so beautiful... and FUN!

jasmussen · 2019-02-01T08:32:37Z

THANK you all for the wonderful feedback! I heartily agree, the animation should be faster, here it is in .1s:

The GIF doesn't capture it, but it is faster.

I also added the documentation file, your thoughts there are welcome.

jasmussen · 2019-02-01T08:36:39Z

The animation uses translate only, so it's really fast, and it seems to work well in the simulator also:

jasmussen · 2019-02-01T08:47:00Z

Aside from the the docs and additional feedback, it feels like the primary next step to figure out is the point of origin. It is partially encapsulated in these comments by @gziolo and @youknowriad:

Maybe instead, this would be a HoC/renderprop/hook adding the correct className based on the "position" (top left,...)

Ideally these styles shoudn't be added here and instead added to each respective component's stylesheet.

Or generalized and controlled by the value passed through prop translated into a corresponding class name.

If this animation is tied to the "popover" component, I guess this style should go there but if it's a very generic animation that can be applied anywhere, maybe we could try working on an "animatation" stylesheet loaded as a dependency where it's being used.

These all speak to the same point: this animation needs a point of origin. Which as noted in the docs is a key principle we have to consider — the animation from the ellipsis button and outwards can help create a sense of place and origin of the menu.

There are a few challenges with that, though:

These animations have to be RTL aware
These animations have to be context aware. For example as illustrated by Kjell, sometimes the popover will upen upwards, and then the transform origin has to change to accommodate that.

If, to @gziolo's suggestion, we could work the transform-origin property into the popover component itself, it seems like we could address all those issues, including CSS context feedback such as #13617 (comment). Can you help here Grzegorz?

This PR aims to start work on #8029, by creating an animation for use with popovers, and by starting documentation for hwo to best use animation. It: - Adds a "scale and appear" animation to the block toolbar, the more menu, and the block library - It adds a very very early draft of an animation document, which includes an early inventory of current animations in use.

youknowriad · 2019-02-01T09:27:01Z

I have some time, I'll play with this PR a bit today and see if we can build an animate component or something similar.

youknowriad · 2019-02-01T10:18:36Z

I pushed an update here using a component. The idea is that we'd use this component for several kind of animations.
I also applied the animation automatically to all popovers except the tooltips.
If you all agree with the approach, I think we should document the props of this component instead of documenting the classNames.

Let me know what you think @gziolo @jasmussen

jasmussen · 2019-02-01T10:36:05Z

This is amazing Riad, thanks so much!

This appears solid to me. Very very nice. Notice how the document outline correctly animates from top center as it should. Solid!

I'm applying the Docs label because to me it seems like the next step is just going over the text a little bit.

youknowriad · 2019-02-01T10:49:23Z

@jasmussen I noticed there's a small issue in this PR (no matter the approach) caused by the fact that the Popover component tries to recompute its position right after it appears depending on its height. (you can see it by try by trying the empty paragraph inserter when the height of the window is small).

Which means if the height is equal to 0 (like when applying the animation), the computation is wrong. This is very specific to the Popover component though and I wonder if I can apply a fix this way:

Hide the popover for the first render using CSS visibility that way the height is correct
Apply the animation with a very small delay which I think won't be noticeable

youknowriad · 2019-02-01T10:54:41Z

I fixed the issue mentioned above, for me this is ready. Feel free to take over (README of the component...), if there's need for code tweaks, I'm here to help.

jasmussen · 2019-02-01T10:55:05Z

You do so fast and amazing work Riad, it's a gosh darn privilege to have your help on this.

youknowriad · 2019-02-01T10:55:49Z

I think this PR is very important and open the door to a lot of small animations (using this component) into other places of the UI.

youknowriad · 2019-02-07T16:28:04Z

Let's animate this editor

…rt work on handbook (#13617)

aduth · 2019-04-08T19:24:20Z

Related issue in use of Animate on the URL popover: #14872

aduth · 2020-01-30T17:53:20Z

packages/components/src/animate/README.md

+
+This animation is meant for popover/modal content, such as menus appearing. It shows the height and width of the animated element scaling from 0 to full size, from its point of origin. 
+
+#### Options


Is there a reason that options ought to be a separate object, vs. just having its own properties be props of the component itself?

In other words, is...

<Animate type="appear" options={ { origin: 'top' } } />

...necessarily any better than:

<Animate type="appear" origin="top" />

?

My thinking at the time is that "options" are type-specific, their format change for each animation type.

My thinking at the time is that "options" are type-specific, their format change for each animation type.

Okay, thanks for clarifying. I'm not sure it would necessarily be wrong to still flatten these as top-level props, even if each type had their own handling and own set of options, but the rationale you give is sensible.

It may have been misleading to me because in the current implementation, the only option is origin, and it is consistent for both the appear and slide-in types, though I suppose that's more a reflection of its current state, and these may be expanded at some point in the future.

jasmussen added the Needs Design Feedback Needs general design feedback. label Jan 31, 2019

jasmussen self-assigned this Jan 31, 2019

jasmussen requested a review from a team January 31, 2019 12:23

gziolo reviewed Jan 31, 2019

View reviewed changes

youknowriad reviewed Jan 31, 2019

View reviewed changes

gziolo reviewed Jan 31, 2019

View reviewed changes

youknowriad reviewed Jan 31, 2019

View reviewed changes

Joen Asmussen added 2 commits February 1, 2019 09:49

Faster animation & commit docs.

1d1f164

jasmussen force-pushed the try/menu-appear-animation branch from 58bc526 to 1d1f164 Compare February 1, 2019 08:49

Try an animate component

5f17198

jasmussen added the [Type] Developer Documentation Documentation for developers label Feb 1, 2019

Fix popover initial position

b028d51

youknowriad merged commit 3f0ef0b into master Feb 7, 2019

youknowriad deleted the try/menu-appear-animation branch February 7, 2019 16:27

This was referenced Feb 18, 2019

Bump plugin version to 5.1.0-rc.1 #13908

Merged

Bump plugin version to 5.1.0 #13960

Merged

kjellr mentioned this pull request Feb 21, 2019

Begin adding support for the prefers-reduced-motion setting, Add a11y notes to the animation docs. #14021

Merged

youknowriad pushed a commit that referenced this pull request Mar 6, 2019

Add an Animate component and menu appear animation for popovers & sta…

9a25f00

…rt work on handbook (#13617)

youknowriad pushed a commit that referenced this pull request Mar 6, 2019

Add an Animate component and menu appear animation for popovers & sta…

868399b

…rt work on handbook (#13617)

aduth mentioned this pull request Apr 8, 2019

Components: URL input popover animates repeatedly on text/selection change #14872

Closed

aduth reviewed Jan 30, 2020

View reviewed changes

This was referenced Jul 16, 2024

[Snyk] Upgrade @wordpress/postcss-plugins-preset from 1.6.0 to 5.1.0 WontonSam/woocommerce-admin#124

Open

[Snyk] Upgrade @wordpress/base-styles from 3.6.0 to 5.1.0 WontonSam/woocommerce-admin#127

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try menu appear animation & start work on handbook #13617

Try menu appear animation & start work on handbook #13617

jasmussen commented Jan 31, 2019

youknowriad commented Jan 31, 2019

gziolo Jan 31, 2019

youknowriad Jan 31, 2019

gziolo Jan 31, 2019 •

edited

Loading

youknowriad Jan 31, 2019

gziolo Jan 31, 2019

gziolo Jan 31, 2019

youknowriad Jan 31, 2019

jasmussen commented Jan 31, 2019

youknowriad commented Jan 31, 2019

folletto commented Jan 31, 2019

melchoyce commented Jan 31, 2019

kjellr commented Jan 31, 2019

mapk commented Jan 31, 2019

jasmussen commented Feb 1, 2019

jasmussen commented Feb 1, 2019

jasmussen commented Feb 1, 2019

youknowriad commented Feb 1, 2019

youknowriad commented Feb 1, 2019

jasmussen commented Feb 1, 2019

youknowriad commented Feb 1, 2019

youknowriad commented Feb 1, 2019

jasmussen commented Feb 1, 2019

youknowriad commented Feb 1, 2019

youknowriad commented Feb 7, 2019

aduth commented Apr 8, 2019

aduth Jan 30, 2020 •

edited

Loading

youknowriad Feb 3, 2020

aduth Feb 3, 2020


		This animation is meant for popover/modal content, such as menus appearing. It shows the height and width of the animated element scaling from 0 to full size, from its point of origin.

		#### Options

Try menu appear animation & start work on handbook #13617

Try menu appear animation & start work on handbook #13617

Conversation

jasmussen commented Jan 31, 2019

youknowriad commented Jan 31, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo Jan 31, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasmussen commented Jan 31, 2019

youknowriad commented Jan 31, 2019

folletto commented Jan 31, 2019

melchoyce commented Jan 31, 2019

kjellr commented Jan 31, 2019

mapk commented Jan 31, 2019

jasmussen commented Feb 1, 2019

jasmussen commented Feb 1, 2019

jasmussen commented Feb 1, 2019

youknowriad commented Feb 1, 2019

youknowriad commented Feb 1, 2019

jasmussen commented Feb 1, 2019

youknowriad commented Feb 1, 2019

youknowriad commented Feb 1, 2019

jasmussen commented Feb 1, 2019

youknowriad commented Feb 1, 2019

youknowriad commented Feb 7, 2019

aduth commented Apr 8, 2019

aduth Jan 30, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo Jan 31, 2019 •

edited

Loading

aduth Jan 30, 2020 •

edited

Loading