search

MozillaReality / horizon

(2015) Horizon was an experimental VR browser built on web standards using CSS-VR.
http://mozvr.github.io/horizon/web/
Other
1 stars 0 forks source link

Animate a single container when HUD is toggled #135

Open cvan opened 9 years ago

cvan commented 9 years ago

problem

currently, there is (1) a flicker when the HUD is closed as Horizon loads for the first time and (2) jank when the HUD is opened/closed.

diagnosis

in showing the HUD and hiding the HUD, we're doing a bunch of writes, which by nature cause layout reflows. I'd wager money that we'd see reduced jank if we animated on one element (#hud) and used a class to toggle visibility.

transitions vs. animations

I can't speak on which is more performant under the hood (though I'm curious which is more optimised under the hood), but from a code-maintenance perspective, transitioning on visibility would be easier than setting these show and hide animations.

proposed solution

  1. add a default class to the HUD (#hud) so we don't need to explicitly call FrameManager.hideHud() when Horizon loads.
  2. when the HUD is opened/dismissed, toggle the visibility of a single DOM element (#hud), instead of a bunch of child elements.
  3. use classList.toggle to toggle the visibility class (instead of directly calling style) on the animated/transitioned element.
  4. consider using transitions instead of animations (if they prove to be more performant).
jcarpenter commented 9 years ago

Will discuss with @kearwood this week in Vancouver to better understand what might be causing the gliches and identify potential work arounds. Two issues with above are:

1) Longer term we aspire to create richer animations, wherein multiple elements simultaneously animate values like position, scale, opacity, etc. It's smart to identify a work around to glitches with today's builds, but we should not stop there. 2) HUD actually consists of multiple elements with independent visibility. eg Loading indicator and stop/reload button persist even when other HUD elements are closed. So we need something more granular than visibility on #hud.