myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

that breaks onsen and is recommended for production angular - guess im SOL there.

Also, what files do i need to include in my compiled cordova project?

would it be safe to simply drop all un minified files? Im not sure i use any of the font awesome stuff - but i did use a couple ionicons

Also - what JS files are required? here are my current includes in index.html

<link rel="stylesheet" href="lib/onsenui/css/onsenui.min.css"/>
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.min.css"/>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="lib/onsenui/js/angular-onsenui.min.js"></script>

the app works great so is it safe to simply drop all files from production build that i didn’t explicitly include?

That works like a charm! Thank you very much - glad to see ONSEN is still kicking butt. Cheers

thanks for the reply - following the docs i got the animation to successfully drop when PUSHING a page - but i am not successful to get the page to LIFT back up from whence it came on a POP event.

on a POP event the page simply disappears instantly.

Here is my code so far - any guidance would be greatly appreciated.

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 = '<div style="position: absolute; width: 100%; height: 100%; z-index: 2; background-color: black; opacity: 0;"></div>';
  this.backgroundMask = div.firstChild;
  this.blackMaskOpacity = 0.4;
};

dropAnimator.prototype = Object.create(ons.NavigatorElement.NavigatorTransitionAnimator.prototype);

dropAnimator.prototype.push = function(enterPage, leavePage, done) {
    this.backgroundMask.remove();
    leavePage.parentNode.insertBefore(this.backgroundMask, leavePage);

    const maskClear = ons.animit(this.backgroundMask)
      .wait(this.delay + this.duration)
      .queue(done => {
        this.backgroundMask.remove();
        done();
      });

    ons.animit.runAll(
        maskClear,
        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(),
        done()

    );
};

dropAnimator.prototype.pop = function(enterPage, leavePage, done) {
    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
          }),
        done()
    );
};

// register animation name
ons.NavigatorElement.registerAnimator('drop', dropAnimator);

Id like an animation for the Navigator that is the opposite of Lift… so a DROP animation.

Re: Custom Navigation Animation (fall/drop)

i got the previous example to work when Onsen was pre 2.0 release…

Now I’m stuck again. I have no idea how to register the new animation so it can be used with the Navigator.

i found this aberrant CODEPEN that shows how to register a name for an animation - but the resulting animation is always a SLIDE regardless of what i change the animators too.

angular.module('onsen').run(function(NavigatorView, SimpleSlideTransitionAnimator) {
  NavigatorView.registerTransitionAnimator('foo', new SimpleSlideTransitionAnimator())
});

i have my previous animation code ready - i just need a way to hook into onsen’s navigator for use.

Please help!
Thank you
Dan