Getting Hybrid app animation to be smoother, is it possible?

zig

I tried this on stackoverflow but figured its more of a question for discussion rather than anyone having a solid answer.

Ive complete a hybrid app using Intel XDK and angularjs. Performance wise overall Im happy enough with it considering its not a native app, however one thing that has me stopped in my tracks is the animation smoothness.

Im currently testing using an Android Galaxy S3. There are several bits of simple animations, obvious elements like pop ups etc and the side menu etc.

Im not happy with the animation. Its ok, but only ok, not as good as a desktop browser, or native apps.

Here is some sample code...

CSS

.side-menu {   
  background: none repeat scroll 0 0 #000;   
  height: 100%;
  left: -75%; 
  position: absolute;
  transition: all 0.2s linear 0s;  
  width: 75%;
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
 } 

.side-menu.show_menu {  
  left:0%; 
}

HTML

<div class="side-menu" ng-class="{'show_menu' : show_menu }"> 
  // stuff 
</div>

I have done quite a bit of research and reading on Hybrid app development and am aware of its limitations.

My question, is there a better way of doing animations in general for a more reliable smoothness? i.e.might CSS3 @keyframes have a better performance than using the transition above? Or might raw javascript be better than CSS?

I am not using jQuery for the app at all, im trying to stay away from it while I work with Angular.

Also I included the

-webkit transform

properties as I understand this forces whats called hardware acceleration , but Id be lying if I understand fully what its supposed to do. Either way its not making a difference to the smoothness.

Is what Im looking beyond the capabilities without building a native app?

mmalaka

I am exploring hybrid apps at the moment and I am using ionicframework which work very well with angular check http://ionicframework.com/

srsly78

You could do it all yourself with webgl but this would be a lot of work. Performance wise this would be the optimal solution.

zig

Hi all,

Just an update, so after doing a bit of reading I realised there is a noticeable difference in the Javascript APIs that talk to the device. I then stumbled across Crosswalk, https://crosswalk-project.org/ , from brief reading it seems this is a project where it insured that the best and most up to date APIs are being chosen.

So, then I went back to Intel XDK and saw there was an option to "Build with crosswalk", and voila, its now perfect animation! Not only that but the HTML/CSS is rendered exactly as the way it should have been originally (this was another issue I didnt bother addressing as I thought I could look at it later)