U4-11224 - SPIKE: (timebox 1 day) Determine how animations should work moving between screens in infinite editing

Created by Shannon Deminick 16 Apr 2018, 09:59:52 Updated by Robert Copilau 07 May 2018, 07:58:29

Subtask of: U4-11218

Investigate potentially different animation frameworks to help us out with this instead of hacking our own.

We should have consistent animations for showing a new screen and removing an existing screen.

We should find an example or two of how we'd like this to work.

2 Attachments

Download infinite-editors.mp4

Download infinite-doc-type-editor.mp4

Comments

Mads Rasmussen 04 May 2018, 08:29:43

PR: PR: https://github.com/umbraco/Umbraco-CMS/pull/2613

The PR combines the two issues: U4-11223 and U4-11224.

In this PR I have tested animations and animation frameworks. The PR adds the animation framework anime.js (http://animejs.com/) which is currently the best framework I could find with the MIT license. The documentation is great and the API is flexible so we are able to do all the things we want with this framework. The big challenge is it doesn’t perform impressively and we are running into some performance issues when we are animating complex editors. I found a stress test of a lot a frameworks and the big winner looks like GSAP https://greensock.com/gsap but because of licensing we have difficulties including this in Umbraco. (https://greensock.com/js/speed.html the test is made by gsap but my naivety makes me consider the test as valid)

For now I have removed the performance heavy animations and kept the ones that looks okay. It leaves some of the infinite editing experience a bit “lacky” but we will have to go through a couple of iteration to make it really good. The most important part of this PR is it makes infinite editing work and we are able to start testing different flows.

In this PR I have also changed the doc type editor to use infinite editors instead of overlays. It is a good way for us to test the infinite flow because it includes a couple of stacked editors in different sizes. The Doc type editor flow could use a bit more general infinite flow optimisation because we save and close some some editors at some weird places and in one case we close two editors at once which doesn’t work as well in infinite editing as with the normal overlays. But yeah, just more things to improve on...

What have I done to optimise animations so far:

  • I use transform when adding/removing new editors
  • Only animate the necessary elements (as few elements as possible)
  • Remove all content when removing/adding new editors so we animate as few dom elements as possible
  • Test out the css property “will-change” to let the browser know when an element will animate. I only add this to the element right before it animates and removes it again when it’s done. You can read more about it here: https://css-tricks.com/almanac/properties/w/will-change/

Moving forward here is a couple of things we can try to bring back the other animations and increase performance:

  • Change the animations so they only use transform instead of left position to lower the time to paint each frame
  • Make sure to only start one animation at the time with timelines and delays.
  • Look into hiding the content of the editors to have less dom elements
  • Add the will-change property to the collapsing/expanding editors to prepare the browser the elements will animate .. + all your wonderful suggestions 🙂

I have added two videos: one of me just opening random editors and one of the doc type editor flow. The doc type editor flow has a “small” error at the end but that is just v8 doing its thing (it might even be fixed in a more up to date branch)

I will stop rambling now 🙂


Robert Copilau 07 May 2018, 07:58:04

Great stuff with the infinity flow in the document type creation, feels great, I would really like to close the editors with the ESC key but that is just me being nitpicky, I realize that it will come at some point :) Merging.


Priority: Normal

Type: Task

State: Fixed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted:

Affected versions: 8.0.0

Due in version: 8.0.0

Sprint: Sprint 84

Story Points: 1

Cycle: