title: Performance issues when animate on mobile with angularjs
body: <p>I am in the end of a mobile application development using AngularJS wrapped in a cordova webview but I have some issues with the panel transition animations.</p>
  
  <p>I stopped trying with ngAnimate since I have strange behaviour with it. I'm actually using two divs who permanently stay in the DOM and wrap the current and next panel content I compile. I'm using the <a href="http://www.greensock.com/gsap-js/" rel="nofollow">GSAP Framework</a> to animate them, which is famous about its performances. But the animation are too laggy.</p>
  
  <p>So I made a profiling frame by frame with the chrome dev tools timeline, and I saw that my scripting time was taken too long at the controller initialisation.</p>
  
  <p>So I came up with two ideas : I can detect either the controller initialisation end (but I don't know how to do that in Angular), or I find a way to spread out the execution on multiple frames.</p>
  
  <p>Can somebody lead me in a way ?</p>
  
  <p>Here is the structure in index.html :</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="SparterApp" lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
          &lt;title&gt;MyApp&lt;/title&gt;
          &lt;link rel="stylesheet" href="styles/styles.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="panelCtrl" ng-controller="panelCtrl"&gt;
              &lt;nav id="menu" ng-include="'views/menu.html'"&gt;&lt;/nav&gt;
              &lt;section id="currentPanel"&gt;&lt;/section&gt;
              &lt;section id="nextPanel"&gt;&lt;/section&gt;
          &lt;/div&gt;
          &lt;script src="bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/TweenMax.min.js"&gt;&lt;/script&gt;
          &lt;!-- Some others vendor scripts and my own angular scripts --&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My panel controller :</p>
  
  <pre><code>'use strict';
  
  angular.module('SparterApp')
      .controller('panelCtrl', function ($scope, $compile, $http, $timeout, animService) {
  
          nextPanelHandler = $('#nextPanel');
          currentPanelHandler = $('#currentPanel');
          var protect = false;
  
          $scope.callbackNextPanel = function () {
              currentPanelHandler.hide();
              nextPanelHandler.attr('id', 'currentPanel');
              currentPanelHandler.attr('id', 'nextPanel');
              var buffer = nextPanelHandler;
              nextPanelHandler = currentPanelHandler;
              currentPanelHandler = buffer;
              protect = false;
          };
  
  
  
          /*
          **  Load the next panel in the 'section.nextPanel' element, compile it with angular, and execute the setted animation
          **
          **  templateUrl : the desired template url relative to the views folder or 'close' for closing popup
          **  options : an object with two attributes
          **      enterClass : the initialisation class for the next panel
          **      time : the time of the animation
          **  params : an object with all the arguments you want to transfer between panels
          */
  
          $scope.nextPanel = function (templateUrl, options, params) {
              // Prevent multi trigger
              if (!protect) {
                  protect = true;
                  var tl = new TimelineLite({
                      paused: true,
                      onComplete: $scope.callbackNextPanel
                  });
  
                  // Get a initialisation in a list
                  var enterAnimFrom = animService.getAnimFrom(options.enterClass);
                  enterAnimFrom.onComplete = nextPanelHandler.show;
                  //Prepare the animation
                  tl.fromTo(
                      nextPanelHandler,
                      options.time,
                      enterAnimFrom,
                      {
                          x: 0,
                          y: 0,
                          scale: 1,
                          rotation: 0,
                          opacity: 1,
                          ease: options.ease
                      },
                      'start'
                  );
                  // Get the template to compile
                  var newPanel = $http({method: 'GET', url: 'views/' + templateUrl})
                  .success(function(data, status, headers, config) {
                      nextPanelHandler.html(data);
                      $scope.params = params;
                      $compile(nextPanelHandler.contents())($scope);
                      // Play the animation
                      tl.play();
                  })
                  .error(function(data, status, headers, config) {
                      alert('An error occured with the next panel loading');
                  });
              }
          };
  
      });
  </code></pre>
  
  <p>And the structure of a panel :</p>
  
  <pre><code>&lt;div ng-controller="loginCtrl" class="panel"&gt;
      &lt;!-- The panel content --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can share the timeline if it helps</p>