DropZone: Smooth animation #49517
Merged
DropZone: Smooth animation #49517
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
richtabor
added
the
[Feature] Drag and Drop
|
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. |
apeatling
approved these changes
Apr 3, 2023
jameskoster
approved these changes
Apr 4, 2023
richtabor
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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