Custom Navigation Animation (fall/drop)

[DirtyRed5789]

no clue how to create custom animations - you mention it here:

https://onsen.io/guide/overview.html#Transitionanimation

but when i go to look at the code i have zero idea of how to first NAME my custom animation or link it to the ONSEN js calls?

how does

module.factory('FadeTransitionAnimator', ['NavigatorTransitionAnimator', function(NavigatorTransitionAnimator) {})

translate into a call of:

pushPage('page2.html', {animation: 'fade'})

furthermore, i think alot of people would like a DROP of FALL animation. Exactly like LIFT - but it drops from the top of the viewport rather than from the bottom.

if you can provide a basic COMPLETE example of how to accomplish this that is TESTED and working, i can go an implement it.

my stats:
cordova v6.0.0
OnsenIO v1.3.14

THANK YOU VERY MUCH

-Dan

[munsterlander]

@DirtyRed5789 Dan, check out this thread for more info: http://stackoverflow.com/questions/29115915/how-to-change-slide-direction-for-resettopage/33349225#33349225

Specifically, copying @Fran-Diox’s post info:

Basically, you can create a new animator and define it as you need. This is the basic example in OnsenUI repository: https://github.com/OnsenUI/OnsenUI/blob/1.3.14/framework/views/simpleSlideTransitionAnimator.js

As you can see there, two functions are defined: push and pop animations. resetToPage() uses the “push” animation like pushPage() does, not like popPage(). However, if you just want to invert that, you can create a new animator and define its “push” function exactly the same as the previous “pop” function. You have a quick example here:

http://codepen.io/frankdiox/pen/azQMZE

If you change the parameters of the transform functions you will get a different behavior, so you can adapt it as you want. Hope it helps!

If you need more help than what those examples show, let me know and I can see what I can do.

[Fran Diox]

@DirtyRed5789

In the link that @munsterlander posted this is the code that is registering a name for the animator:

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

So you can do { animation: 'foo' } or { animation: new reversedSlide() }.
I agree this should be documented better. We will try to cover this when writing the final docs for Onsen 2.0. Perhaps meanwhile we could write a blog post about it :)

By the way, @munsterlander , I just edited your post to fix a broken link :sweat_smile: I also updated it on SOF.

[munsterlander]

@Fran-Diox Thank you thank you!

[DirtyRed5789]

This post is deleted!

[DirtyRed5789]

This post is deleted!

[DirtyRed5789]

here is my custom drop if anyone else wants to use it!

(function() {
	'use strict;';

	var module = angular.module('onsen');

	module.factory('customDropAnimation', function(NavigatorTransitionAnimator) {

		var customDropAnimation = NavigatorTransitionAnimator.extend({

			backgroundMask : angular.element(
				'<div style="position: absolute; width: 100%;' +
				'height: 100%; background-color: #ffffff;"></div>'
			),

			push: function(enterPage, leavePage, callback) {
				var mask = this.backgroundMask.remove();
				leavePage.element[0].parentNode.insertBefore(mask[0], leavePage.element[0]);

		        var maskClear = animit(mask[0])
		          .wait(0.6)
		          .queue(function(done) {
		            mask.remove();
		            done();
		          });

		        animit.runAll(
		        	maskClear,

					animit(enterPage.element[0])
					.queue({
						css: {
							transform: 'translate3D(0, -100%, 0)',
						},
						duration: 0
					})
					.queue({
						css: {
							transform: 'translate3D(0, 0, 0)',
						},
						duration: 0.4,
						timing: 'cubic-bezier(.1, .7, .1, 1)'
					})
					.wait(0.2)
					.resetStyle()
					.queue(function(done) {
						callback();
						done();
					}),

					// dont move leaving page
					animit(leavePage.element[0])
		        );
			},

			pop: function(enterPage, leavePage, callback) {
		        var mask = this.backgroundMask.remove();
		        enterPage.element[0].parentNode.insertBefore(mask[0], enterPage.element[0]);

		        animit.runAll(

		          animit(mask[0])
		            .wait(0.4)
		            .queue(function(done) {
		              mask.remove();
		              done();
		            }),

		          // dont move entering page
		          animit(enterPage.element[0]),

		          animit(leavePage.element[0])
		            .queue({
		              css: {
		                transform: 'translate3D(0, 0, 0)'
		              },
		              duration: 0
		            })
		            .queue({
		              css: {
		                transform: 'translate3D(0, -100%, 0)'
		              },
		              duration: 0.4,
		              timing: 'cubic-bezier(.1, .7, .1, 1)'
		            })
		            .wait(0.2)
					.resetStyle()
					.queue(function(done) {
						callback();
						done();
					})
		            
		        );
			}
		});

		return customDropAnimation;
	});

})();

[Fran Diox]

@DirtyRed5789 Thanks for sharing :)

[Leonardo Augusto]

Thanks i’ll check to my apps. ;)

[munsterlander]

Pretty cool! I just really like how extensible Onsen is!

[DirtyRed5789]

Little update - i was seeing a flicker happen during PAGE PUSH when i was emulating IOS devices with the drop animation. Removing the

.wait(0.2)

solved it for now…

push: function(enterPage, leavePage, callback) {
	var mask = this.backgroundMask.remove();
	leavePage.element[0].parentNode.insertBefore(mask[0], leavePage.element[0]);

    var maskClear = animit(mask[0])
      .wait(0.6)
      .queue(function(done) {
        mask.remove();
        done();
      });

    animit.runAll(
    	maskClear,

		animit(enterPage.element[0])
		.queue({
			css: {
				transform: 'translate3D(0, -100%, 0)',
			},
			duration: 0
		})
		.queue({
			css: {
				transform: 'translate3D(0, 0, 0)',
			},
			duration: 0.4,
			timing: 'cubic-bezier(.47,0,.47,1)'
		})
		// .wait(0.2) -> causes flicker sometimes
		.resetStyle()
		.queue(function(done) {
			callback();
			done();
		}),

		// dont move leaving page
		animit(leavePage.element[0])
    );
},