2

In our single-page application we have two modes that the user can switch between. The most striking visual difference is that the top navigation bar is completely different, which is why we use crossfade between the two as visual cue to the mode change.

As the animation is playing , there's a lot else happening in the browser - DOM is updated and redrawn, XHRs are done, objects are created&destroyed etc. End result is that the animation becomes quite choppy. In fact, sometimes it seems as if no smooth animation actually happened, because the new navigation bar just appears in two or three steps.

Are there any tips or tricks that one could utilize to achieve smooth animation during time when javascript engine in the browser is under a lot of strain? Are CSS perhaps transitions any benefit? Any suggestions or quality reading material on this are welcome.

VoY
  • 5,479
  • 2
  • 37
  • 45
  • 1
    Try implementing the animations with css3 transitions such as `translateX`. These can be hardware accelerated and are typically a lot smoother. Keep in mind that not all transitions can be hardware accelerated, only very specific ones. – Halcyon May 20 '14 at 14:42
  • Do you know about requestAnimationFrame? Might not help, with so much else going on. – John Powell May 20 '14 at 14:42
  • 1
    you could switch to a js library like `velocity.js` which handles animations through `requestAnimationFrame`, reduce redraws and repaints, promote your elements as composite layers using GPU acceleration – Fabrizio Calderan May 20 '14 at 14:45
  • My guess is that the dom updates make it quite heavy. Is it possible to wait for the animation to complete and then update the dom? – Sven van de Scheur May 20 '14 at 14:45
  • Am I correct in assuming that jQuery uses requestAnimationFrame internally to run its animations? It probably does, right? – VoY May 20 '14 at 14:49
  • Possibly out of date, but interesting: http://stackoverflow.com/questions/7999680/why-doesnt-jquery-use-requestanimationframe – John Powell May 20 '14 at 14:52
  • If possible, can post `html`, `css`, `js`, jsfiddle / example of effects ? Thanks – guest271314 May 20 '14 at 14:53
  • For element you want to animate you can add translateZ(0) or translate3d(0,0,0) this force GPU accelaration, http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/, you can use also RAF for debouncing scrolling or resize. Read here some about it here http://www.html5rocks.com/en/tutorials/speed/animations/ – keypaul May 20 '14 at 20:02

0 Answers0