Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try menu appear animation & start work on handbook #13617

Merged
merged 26 commits into from
Feb 7, 2019

Conversation

jasmussen
Copy link
Contributor

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:

popover appear

@jasmussen jasmussen added the Needs Design Feedback Needs general design feedback. label Jan 31, 2019
@jasmussen jasmussen self-assigned this Jan 31, 2019
@jasmussen jasmussen requested a review from a team January 31, 2019 12:23
@youknowriad
Copy link
Contributor

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?

@@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@gziolo gziolo Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


.edit-post-more-menu__content & {
transform-origin: top right;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

transform-origin: top left;
}

.edit-post-more-menu__content & {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

to {
transform: translateY(0%) scaleY(1) scaleX(1);
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

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
Copy link
Contributor

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

@folletto
Copy link
Contributor

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
Copy link
Contributor

FWIW, the animation feels a little slow to me.

@kjellr
Copy link
Contributor

kjellr commented Jan 31, 2019

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:

inserter

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?

animation

@mapk
Copy link
Contributor

mapk commented Jan 31, 2019

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
Copy link
Contributor Author

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

appear

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

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

@jasmussen
Copy link
Contributor Author

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

simulator

@jasmussen
Copy link
Contributor Author

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?

Joen Asmussen added 2 commits February 1, 2019 09:49
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.
@jasmussen jasmussen force-pushed the try/menu-appear-animation branch from 58bc526 to 1d1f164 Compare February 1, 2019 08:49
@youknowriad
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor Author

This is amazing Riad, thanks so much!

animations

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.

@jasmussen jasmussen added the [Type] Developer Documentation Documentation for developers label Feb 1, 2019
@youknowriad
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link
Contributor Author

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

@youknowriad
Copy link
Contributor

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 youknowriad merged commit 3f0ef0b into master Feb 7, 2019
@youknowriad youknowriad deleted the try/menu-appear-animation branch February 7, 2019 16:27
@youknowriad
Copy link
Contributor

Let's animate this editor

@aduth
Copy link
Member

aduth commented Apr 8, 2019

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


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
Copy link
Member

@aduth aduth Jan 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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" />

?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

This was referenced Apr 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.