-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Simplify site icon animation on hover. #38783
Conversation
Size Change: +62 B (0%) Total Size: 1.15 MB
ℹ️ View Unchanged
|
Thank you, Joen. I personally like this animation, and making it smoother will be a good improvement. As @gwwar pointed out in my PR, you'll also need to update animation for Site Editor: gutenberg/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js Lines 59 to 65 in 0bad51e
cc @paaljoachim. |
Thanks for looking, and for the reminder! The code drift of having no shared components here is pretty bad 🙈 — but I think I fixed it. Another look? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good 👍
Since conversation is still ongoing in the issue, let's wait for the feedback from others as well before we merge this.
This is a lot better! Much smoother and just a little more subtile. . |
With three approvals and a green button, and since it's not a ton of code, it's tempting to merge this one. I'll let it sit for tomorrow :) |
Cool, I'll land this one but I'm always happy to follow up! |
Description
Fixes #38575. Alternative to #38702.
This PR smooths out the animation that is added to the site icon when present. The animation helps signify the importance of the element:
When no icon is applied, the existing hover style remains:
When you toggle "reduce motion" in your browser or operating system, no animation is shown.
Testing Instructions
Add a site icon if you have none already. For example insert the site logo block, add and publish and image, then reload the page. Hover the top left button.
Checklist:
*.native.js
files for terms that need renaming or removal).