Animate the canvas transitions #30802
Merged
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
youknowriad
added
[Type] Enhancement
youknowriad
force-pushed
the
update/animate-canvas
branch
from
38cf0c6 to
3d94be2
Compare
|
Size Change: +31 kB (+2%) Total Size: 1.46 MB
ℹ️ View Unchanged
|
mtias
reviewed
Apr 13, 2021
| @@ -1,5 +1,8 @@ | |||
| .edit-post-visual-editor { | |||
| position: relative; | |||
| transition: padding 0.2s linear; | |||
|
Here's what I see: pr.mp4The animation from Template > Content works quite well. But I find the template flashing in to view when moving from Content > Template a little jarring. To the point where it dilutes the overall effect of the animation. I wonder if we could fade the blocks out / in accordingly to smoothen that a bit? We will also need to consider how the inspector behaves when we switch to the Template tab. Quick mockup: animate.mp4 |
|
I refactored the animations to use framer motion and also added a fadein/fadeout transition. It's a bit wild :P (the fading required an extra div) |
|
I had to Couple of issues:
animation.mp4I wonder if we need the snackbar now... the animation indicates a significant shift in context. |
|
I see this:
Looks and feels great. 👍 👍 A few things:
Things that we should look at separately:
|
|
Is-link patch here: #30823 |
yes, that is due to the fact that the dependencies of some of these blocks are not there (in the cache) initially, so there's some jumps as the blocks load their content.
I'll take a look at this. I'll remove the snackbar as well. |
|
I don't mind the snackbar for now until we figure out all the other details (how the header transforms, the sidebar, etc). |
This should be fixed now. |
I'm not able to reproduce this
I don't think so but you never know 😬 |
|
So we get this in? It's an extra 30kb (react-framer-motion) in edit-post script. |
jasmussen
approved these changes
Apr 14, 2021
|
Looks like this broke some e2e tests, I suspect the extra div. |
|
Would you rather merge the CSS transition first while we use framer more extensively for the different viewports and extra transitions? |
|
If the extra div is mostly for the fade, we could do without that for now. |
youknowriad
force-pushed
the
update/animate-canvas
branch
from
c8e781f to
e9e394d
Compare
|
The fadding out/in is not possible with CSS transitions because there's no "exit" animations. I think I'm personally fine with the extra 30kb to support this change and allow potentially other similar animations in the future. We can revisit the decision after we experience these animations more. |
|
Let's get it in then :) |
ellatrix
reviewed
Apr 20, 2021
| key={ isTemplateMode ? 'template' : 'post' } | ||
| initial={ { opacity: 0 } } | ||
| animate={ { opacity: 1 } } | ||
| > |
There was a problem hiding this comment.
Why the need for a second div? Can't this be part of the motion.div above?
There was a problem hiding this comment.
It needs to be unmounted/remounted to trigger the exit transition and it needs to fade/in out just the content and not the frame.
There was a problem hiding this comment.
What's the difference visually? Fading out the frame or content would look the same?
There was a problem hiding this comment.
The frame resizes itself at the same time, if we remount it, we kill that animation.
7 tasks
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.
This PR adds some animations to the editor canvas when swithching to template mode back and forth and also when switching the device preview.