title: onsen.io angular 1.x custom animation broken going from 2.6.2 -> 2.9.2
body: <p>Tried to ask this question in your FORUM on <code>onsen.io</code> but your <code>NEW TOPIC</code> button is broken - even when i am logged in - the button does nothing - doesnt even throw an error.... so here we are</p>
  
  <p>i recently upgraded onsen.io so i can have iPhone-X compatibility.</p>
  
  <p>now my custom animation is broken </p>
  
  <p><code>dropAnimation.js:15 Uncaught TypeError: Cannot read property 'NavigatorTransitionAnimator' of undefined at dropAnimation.js:15</code></p>
  
  <p>and here is the code that used to work (and which the onsen guy helped me perfect it)</p>
  
  <pre><code>// register custom lift animation
  var dropAnimator = function(options) {
    options = options || {};
  
    this.timing = options.timing || 'ease';
    this.duration = options.duration || 0.4;
    this.delay = options.delay || 0;
  
    var div = document.createElement('div');
    div.innerHTML = '&lt;div style="position: absolute; width: 100%; height: 100%; z-index: 2; background-color: black; opacity: 0;"&gt;&lt;/div&gt;';
    this.backgroundMask = div.firstChild;
    this.blackMaskOpacity = 0.4;
  };
  
  dropAnimator.prototype = Object.create(ons.NavigatorElement.NavigatorTransitionAnimator.prototype);
  
  dropAnimator.prototype.push = function(enterPage, leavePage, callback) {
      this.backgroundMask.remove();
      leavePage.parentNode.insertBefore(this.backgroundMask, leavePage);
  
      ons.animit.runAll(
          ons.animit(enterPage)
            .saveStyle()
            .queue({
              css: {
                transform: 'translate3D(0px, -100%, 0px)',
                opacity: 0.9
              },
              duration: 0
            })
            .wait(this.delay)
            .queue({
              css: {
                transform: 'translate3D(0px, 0px, 0px)',
                opacity: 1.0
              },
              duration: this.duration,
              timing: this.timing
            })
            .restoreStyle()
            .queue(function(done) {
              this.backgroundMask.remove();
              callback();
              done();
            }.bind(this))
  
      );
  };
  
  dropAnimator.prototype.pop = function(enterPage, leavePage, callback) {
      this.backgroundMask.remove();
      enterPage.parentNode.insertBefore(this.backgroundMask, enterPage);
  
      ons.animit.runAll(
          ons.animit(leavePage)
            .queue({
              css: {
                transform: 'translate3D(0px, 0px, 0px)'
              },
              duration: 0
            })
            .wait(this.delay)
            .queue({
              css: {
                transform: 'translate3D(0px, -100%, 0px)'
              },
              duration: this.duration,
              timing: this.timing
            })
            .queue(function(done) {
              this.backgroundMask.remove();
              callback();
              done();
            }.bind(this))
      );
  };
  
  // register animation name
  ons.NavigatorElement.registerAnimator('drop', dropAnimator);
  </code></pre>
  
  <p>this is a simple lift and drop animation.</p>