Switch from JS to CSS based animation

[dimaursu]

I've implemented a while ago the animation in pure CSS, simplifying the JS code, and making the animation smoother (about a 3x gain in FPS).
Are you interested in this? The whole trick involves a checkbox, it's quite simple.

It might be a bit less flexible than the JS animation, it's a bit harder to get the drawer state (although not that hard, just reading the checkbox value)

diaspora@0fb6767

[sualko]

I think the commit is not enough, there should be more from diaspora#63, but that is just an aside.

Are there any disadvantages of this method? Browser support or something like that? I never thought about css performance, but I'm always interested in learning new things (could be useful for #83).

While googling I found http://css-tricks.com/myth-busting-css-animations-vs-javascript/ and therefore https://greensock.com/jquery-gsap-plugin. Do you know gsap? That could boost every animation.

[sualko]

performance improvements are at least 3x, in Firefox benchmarks

How did you perform your benchmarks?

[dimaursu]

You can use Chromium and Firefox inspector. The "Timeline" feature shows the FPS and where was the time spent. it was 5 FPS vs 15 FPS during animation (which is still slow, quite far from 60 FPS), but definitely better. The animation was visibly smoother, mainly because of using css translate instead of animation on the right property. CSS translations have GPU acceleration, and do not stutter like JS ones.

[dimaursu]

http://jankfree.org/ -the resources where I've learned this stuff. Using greensock to animate a drawer - that's kinda overdoing it, it's not worth it. In terms of browser support, we're pretty much covered:
http://caniuse.com/#search=translate
this being used for animation (but of course we can provide a css fallback with animation on the right property)
http://caniuse.com/#search=sibling
and a sibbling selector is used for animation of the drawer with a checkbox, which keeps the state of the drawer.

One thing that could be a problem - you can't have swipes on a mobile device. That can only be achieved with JS.

[sualko]

Together with #229 and #217 this should be fixed.