Implement a block reordering animation #16065

youknowriad · 2019-06-10T09:45:26Z

More details on this post https://matiasventura.com/post/using-motion-to-express-change/

This is not completely ready, but feedback would be appreciated already.

Testing instructions

Try moving blocks, multi-selection, removing blocks.
Try in "reduced motion" mode.

youknowriad · 2019-06-10T09:46:02Z

packages/block-editor/src/components/block-list/index.js

+		reset: resetAnimation,
+		config: { mass: 5, tension: 2000, friction: 200 },
+		immediate: prefersReducedMotion,
+	} );


This animation needs to be documented a bit (as not so simple :) )

youknowriad · 2019-06-10T09:48:26Z

packages/block-editor/src/components/block-list/index.js

+	return (
+		<animated.div
+			ref={ ref }
+			className={ classnames( 'editor-block-list__block-animated-container', {


This adds a new container for each block. We could probably consider whether it's possible to reuse the same block container.

jasmussen · 2019-06-11T07:20:53Z

This is really nice. Impressive work. Lovely to see the reduced motion mixin doing its thing here.

GIF:

Note that the framerate is not super accurate in that GIF, it's much smoother in real life.

However there's one issue which happens if you rapidly click the move buttons in fast succession. What I imagine happens here is that the previous animation did not finish before the new destination is set, so it stutters when you do this. We'll have to find a way to address that.

Animation can never be blocking, i.e. you should never have to wait for an animation to complete before you can take an additional action. This is the case now — you can click fast to move. Just noting this principle because throttling the clicks is not how we can fix the jumpiness.

Is there a way the new y coordinate can be set, mid-animation and without overriding the existing y coordinate? I.e. if you rapidly click the animation continues unabated but is suddenly just faster?

youknowriad · 2019-06-11T13:06:24Z

Is there a way the new y coordinate can be set, mid-animation and without overriding the existing y coordinate? I.e. if you rapidly click the animation continues unabated but is suddenly just faster?

That's already the case, I think the issue is different. Still trying to understand exactly what's happening (as it's very hard to notice in my computer), but if I'm not mistaken, I fear this is not really solvable. The way the animation works at the moment is:

1- User clicks move
2- Render the output as if there's no animation at all to compute the final destination coordinates.
3- Revert to the previous position
4- Animate the block towards the computed destination.

I think the issue might be that the fact that we actually move the block and restore its position can be noticed somewhere even if we do it instantaneously.

SchneiderSam · 2019-06-11T13:10:08Z

Soo cool. Thanks for that! Just one worry: doesn't the performance suffer from it?

jasmussen · 2019-06-11T13:10:57Z

If all other solution ideas fall short, perhaps a plan b would be to not animate at all in case the movers are clicked very rapidly. One would imagine that in most cases they are used more slowly and not incessantly clicked as in my testing, so turning animation off in that edge case would probably be fine.

youknowriad · 2019-06-11T13:11:42Z

@SchneiderSam I didn't measure yet but I don't think it would suffer that much. If I notice degradations, we might decide to enable it for small/medium posts (less than500 blocks for instance)

youknowriad · 2019-06-11T13:12:22Z

@jasmussen can you describe what's the issue you're seeing when clicking quickly?

swissspidy · 2019-06-11T13:13:18Z

So if I understand this correctly, as a plugin developer I cannot disable animations for my custom post type? We have some customizations where blocks can be freely positioned using drag and drop, so re-ordering with animations like this would not quite work. useReducedMotion only checks an ENV var (which is a compile time thing I guess) and the user's reduced motion preferences.

youknowriad · 2019-06-11T13:14:40Z

We have some customizations where blocks can be freely positioned using drag and drop, so re-ordering with animations like this would not quite work

Curious to learn more about this and why it wouldn't work? (it works for floats for instance)

jasmussen · 2019-06-11T13:21:14Z

can you describe what's the issue you're seeing when clicking quickly?

It's hard to capture in low framerate GIFs, but I'll record a video next time I can. Basically when you rapidly click the movers, faster than the duration of the animation, I'm seeing what can best be described as jumpiness, tearing, and blinking.

swissspidy · 2019-06-11T13:58:28Z

Curious to learn more about this and why it wouldn't work? (it works for floats for instance)

@youknowriad Happy to tell you more about it on Slack. I just briefly tested it and I think it's not relevant for our project as the blocks are positioned within the block list using position: absolute. But the extra container currently breaks our customized layout. Mostly our concern though 🙂

It's hard to capture in low framerate GIFs, but I'll record a video next time I can. Basically when you rapidly click the movers, faster than the duration of the animation, I'm seeing what can best be described as jumpiness, tearing, and blinking.

I have definitely noticed that too in my quick testing, although I was not able to reliably trigger it. But the animation was suddenly super fast and moving at like 2x speed.

youknowriad · 2019-06-11T14:47:30Z

I pushed a small tweak that I think makes the animation (quick clicks) a bit smoother. Can you confirm?

jasmussen · 2019-06-12T09:25:19Z

I pushed a small tweak that I think makes the animation (quick clicks) a bit smoother. Can you confirm?

Actually I can. I don't know what you did, but I can no longer reproduce the rather stark stuttering and flickering I saw previously.

Here's a video where I'm SUPER STRESSING it. I'm clicking so fast my mouse is about to explode:

https://cloudup.com/cziNUXxGNcM

Yes, it's slliiiiightly choppy when clicking so fast, but well within the boundaries of what's acceptable. Honestly, all good on my account, now! 👍 👍

And for posterity: this animation follows the animation guidelines we have in place for Gutenberg, notably:

It supports reduced motion
The animation exists to reinforce points of origin and destination
It is fast, and does not block user input while animating
It is simple and appropriate for the type of item being animated

koke · 2019-06-12T10:31:26Z

It seems react-spring should work on react-native, but pinging @Tug since he's working on porting BlockList to work on gutenberg-mobile.

youknowriad · 2019-06-12T10:43:52Z

I noticed a small issue with "Drag & Drop". It seems that the CSS transform applied to the animated wrapper alters the position of the draggable element. (To be able to inspect, you can comment the content of this function https://github.com/WordPress/gutenberg/blob/master/packages/components/src/draggable/index.js#L36)

cc @jasmussen @nosolosw if you have ideas on how we can make the draggable position work in this situation.

jasmussen · 2019-06-13T07:19:02Z

if you have ideas on how we can make the draggable position work in this situation.

Not quite deep enough in the code to know how to help. Is it a bit of CSS that makes it not work?

youknowriad · 2019-07-03T14:47:58Z

I'm going to land this to have it at least a few days in master before the release.

mtias · 2019-07-03T17:16:41Z

packages/block-editor/src/components/block-list/moving-animation.js

+			y: 0,
+		},
+		reset: resetAnimation,
+		config: { mass: 5, tension: 2000, friction: 200 },


I'm not completely satisfied with this set yet, but we can tweak it later.

youknowriad · 2019-07-03T17:41:17Z

Thanks all for your help on this one.

etoledom · 2019-07-04T16:15:52Z

packages/compose/src/hooks/use-reduced-motion/index.js

+ *
+ * @type {boolean}
+ */
+const IS_IE = window.navigator.userAgent.indexOf( 'Trident' ) >= 0;


Just a heads up that this line breaks the mobile app.
I created a PR on gutenberg-mobile side to solve it: wordpress-mobile/gutenberg-mobile#1195

Oh sorry about that. Should we maybe create a custom version of useReducedMotion that always return "true" on mobile? Is there an equivalent to prefers-reduced-motion in mobile?

I think the equivalent landed on 0.60 which was just released: facebook/react-native#23839

Nice, let's add the equivalent hook once we upgrade to 0.60

ellatrix · 2019-07-08T10:16:51Z

@youknowriad @mtias This seems to have added motion as well on typing. Is this by intention? I don't see any discussion around it. It feels a bit weird to move the blocks on Enter.

Even if this is the desired experience (I find it a bit annoying):

It's not consistent. If I press Shift+Enter, there's no movement.
For a typewriter experience, where the caret position is maintained, the animation doesn't make sense at all. The block moves up and then animates down again.

Could we disable it when the user is typing?

youknowriad · 2019-07-08T11:13:13Z

The animation is based on the "block list order" change (additions, removals and reordering). There's no easy way to distinguish the different type of "block additions".

We can decide to only apply the animation if the block length stays consistent (reordering) but personally, I do find it useful in the other cases as well.

ellatrix · 2019-07-08T11:37:36Z

@youknowriad I agree if you manually insert a new block. But this is different.

ellatrix · 2019-07-08T13:44:52Z

The toolbar is now also hidden behind the previous block. This is caused by translate3d(0px, 0px, 0px).

youknowriad · 2019-07-08T14:25:53Z

In theory, the transform is only applied while moving though?

ellatrix · 2019-07-09T05:56:31Z

@youknowriad Doesn't look like it. It's there on page load.

BenjaminZekavica · 2019-07-10T15:34:14Z

The toolbar is now also hidden behind the previous block. This is caused by translate3d(0px, 0px, 0px).

I have tested it but this bug is only in the Twenty Nineteen Theme not in Gutenberg Core.

youknowriad · 2019-07-10T17:39:12Z

@ellatrix @BenjaminZekavica can any of you create an issue about this so we don't forget about it. It seems we can remove the transform once the x,y,z equal 0 (no animation)?

youknowriad commented Jun 10, 2019

View reviewed changes

youknowriad requested review from aduth, jasmussen, mapk, mtias and a team June 10, 2019 09:49

youknowriad self-assigned this Jun 10, 2019

youknowriad added [Type] Enhancement A suggestion for improvement. Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. labels Jun 12, 2019

youknowriad marked this pull request as ready for review June 12, 2019 10:40

youknowriad requested review from ellatrix, gziolo and talldan as code owners June 12, 2019 10:40

Disable animations on IE

3279e11

youknowriad force-pushed the try/block-reordering-animation branch from 41ee739 to 3279e11 Compare July 3, 2019 14:54

mtias approved these changes Jul 3, 2019

View reviewed changes

mtias reviewed Jul 3, 2019

View reviewed changes

youknowriad merged commit eba2fc8 into master Jul 3, 2019

youknowriad deleted the try/block-reordering-animation branch July 3, 2019 17:18

mtias mentioned this pull request Jul 3, 2019

Explore Adding Motion to Block Moving Actions #15922

Closed

etoledom reviewed Jul 4, 2019

View reviewed changes

etoledom mentioned this pull request Jul 4, 2019

Adding navigator.userAgent to our globals to solve a crash wordpress-mobile/gutenberg-mobile#1195

Merged

youknowriad added this to the Gutenberg 6.1 milestone Jul 5, 2019

aduth mentioned this pull request Jul 10, 2019

i can see only white screen after updating gutenberg 6.1 #16502

Closed

BenjaminZekavica mentioned this pull request Jul 10, 2019

Gutenberg - Transition [Transform] Bug on Reordering #16519

Closed

ellatrix mentioned this pull request Jul 11, 2019

Toolbar hidden behind image #16529

Closed

amyriounis mentioned this pull request Jul 11, 2019

Isuue with editor.BlockListBlock filter after v6.1 #16540

Closed

youknowriad mentioned this pull request Aug 19, 2019

Phase 2 Scope & Features #13113

Closed

22 tasks

aduth mentioned this pull request May 25, 2020

Promote the use of particular React utility libraries? #22599

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement a block reordering animation #16065

Implement a block reordering animation #16065

youknowriad commented Jun 10, 2019 •

edited

youknowriad Jun 10, 2019

youknowriad Jun 10, 2019

jasmussen commented Jun 11, 2019

youknowriad commented Jun 11, 2019 •

edited

SchneiderSam commented Jun 11, 2019

jasmussen commented Jun 11, 2019

youknowriad commented Jun 11, 2019

youknowriad commented Jun 11, 2019

swissspidy commented Jun 11, 2019

youknowriad commented Jun 11, 2019 •

edited

jasmussen commented Jun 11, 2019

swissspidy commented Jun 11, 2019

youknowriad commented Jun 11, 2019

jasmussen commented Jun 12, 2019

koke commented Jun 12, 2019

youknowriad commented Jun 12, 2019

jasmussen commented Jun 13, 2019

youknowriad commented Jul 3, 2019

mtias Jul 3, 2019

youknowriad commented Jul 3, 2019

etoledom Jul 4, 2019

youknowriad Jul 4, 2019

koke Jul 4, 2019

youknowriad Jul 4, 2019

ellatrix commented Jul 8, 2019

youknowriad commented Jul 8, 2019

ellatrix commented Jul 8, 2019

ellatrix commented Jul 8, 2019

youknowriad commented Jul 8, 2019

ellatrix commented Jul 9, 2019

BenjaminZekavica commented Jul 10, 2019

youknowriad commented Jul 10, 2019

Implement a block reordering animation #16065

Implement a block reordering animation #16065

Conversation

youknowriad commented Jun 10, 2019 • edited

youknowriad Jun 10, 2019

Choose a reason for hiding this comment

youknowriad Jun 10, 2019

Choose a reason for hiding this comment

jasmussen commented Jun 11, 2019

youknowriad commented Jun 11, 2019 • edited

SchneiderSam commented Jun 11, 2019

jasmussen commented Jun 11, 2019

youknowriad commented Jun 11, 2019

youknowriad commented Jun 11, 2019

swissspidy commented Jun 11, 2019

youknowriad commented Jun 11, 2019 • edited

jasmussen commented Jun 11, 2019

swissspidy commented Jun 11, 2019

youknowriad commented Jun 11, 2019

jasmussen commented Jun 12, 2019

koke commented Jun 12, 2019

youknowriad commented Jun 12, 2019

jasmussen commented Jun 13, 2019

youknowriad commented Jul 3, 2019

mtias Jul 3, 2019

Choose a reason for hiding this comment

youknowriad commented Jul 3, 2019

etoledom Jul 4, 2019

Choose a reason for hiding this comment

youknowriad Jul 4, 2019

Choose a reason for hiding this comment

koke Jul 4, 2019

Choose a reason for hiding this comment

youknowriad Jul 4, 2019

Choose a reason for hiding this comment

ellatrix commented Jul 8, 2019

youknowriad commented Jul 8, 2019

ellatrix commented Jul 8, 2019

ellatrix commented Jul 8, 2019

youknowriad commented Jul 8, 2019

ellatrix commented Jul 9, 2019

BenjaminZekavica commented Jul 10, 2019

youknowriad commented Jul 10, 2019

youknowriad commented Jun 10, 2019 •

edited

youknowriad commented Jun 11, 2019 •

edited

youknowriad commented Jun 11, 2019 •

edited