-
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
DropZone: Smooth animation #49517
DropZone: Smooth animation #49517
Conversation
Size Change: +145 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
Flaky tests detected in 6885183. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4611507886
|
Thanks Rich! Btw |
Good idea. I wonder if the animation is still a little elaborate – do we need the foreground scale effect? |
I did tone it down a bit from trunk, but I think the micro animation of the foreground makes it a bit more approachable/friendly. |
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.
The transition is much smoother with this change, much prefer it. 👍
What?
The drop zone animation is feeling a bit antiquated, with the smoother animations introduced within the Site Editor, as well as the drop indicators between blocks. It also takes just a bit too long (due to timing, but also scaling) than it should.
In this PR I'm tweaking the animation of the background and foreground elements of the drop zone component. And adding a bit more space between the icon and text foreground elements.
I've removed the scaling effect to simplify and smooth out the drop-in animation. Without the scaling, and a few slight tweaks to the timing, the animation is more fluid and seamless. Note that the drop zone animation already fades out (without scaling) for the exit animation in trunk. I'm bringing that same fluidity to the show animation.
Testing Instructions
Visuals
Before:
CleanShot.2023-03-31.at.14.02.17.mp4
After:
CleanShot.2023-03-31.at.13.59.07.mp4