We have moved to GitHub Issues
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.
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:
Moving forward here is a couple of things we can try to bring back the other animations and increase performance:
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 🙂
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.
Backwards Compatible: True
Affected versions: 8.0.0
Due in version: 8.0.0
Sprint: Sprint 84
Story Points: 1