Native View Transition Animations

If anyone’s interested, I found a way to use native view transitions with Ionic Framework.

This solution will only work on smartphones, so desktop browsers and Ionic View are out of the question.

##Requirements


To make this work we need Telerik Native Page Transitions plugin. It’s made for KendoUI but at the same time it’s platform agnostic making it usable with Ionic.

Plugin can be found here: http://plugins.telerik.com/cordova/plugin/native-page-transitions#VersionHistory

Install it like this:

cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions

##Tutorial

You can read the previously mentioned documentation.

Or tutorial post here, it includes a working example + GitHub demo link.

I would be grateful if someone could test this on iOS.

I even wrote a light Ionic directive:

nameApp.directive('goNative', ['$ionicGesture', '$ionicPlatform', function($ionicGesture, $ionicPlatform) {
  return {
	restrict: 'A',

	link: function(scope, element, attrs) {

	  $ionicGesture.on('tap', function(e) {

		var direction = attrs.direction;
		var transitiontype = attrs.transitiontype;

		$ionicPlatform.ready(function() {

		  switch (transitiontype) {
			case "slide":
			  window.plugins.nativepagetransitions.slide({
				  "direction": direction
				},
				function(msg) {
				  console.log("success: " + msg)
				},
				function(msg) {
				  alert("error: " + msg)
				}
			  );
			  break;
			case "flip":
			  window.plugins.nativepagetransitions.flip({
				  "direction": direction
				},
				function(msg) {
				  console.log("success: " + msg)
				},
				function(msg) {
				  alert("error: " + msg)
				}
			  );
			  break;
			  
			case "fade":
			  window.plugins.nativepagetransitions.fade({
				  
				},
				function(msg) {
				  console.log("success: " + msg)
				},
				function(msg) {
				  alert("error: " + msg)
				}
			  );
			  break;

			case "drawer":
			  window.plugins.nativepagetransitions.drawer({
				  "origin"         : direction,
				  "action"         : "open"
				},
				function(msg) {
				  console.log("success: " + msg)
				},
				function(msg) {
				  alert("error: " + msg)
				}
			  );
			  break;
			  
			case "curl":
			  window.plugins.nativepagetransitions.curl({
				  "direction": direction
				},
				function(msg) {
				  console.log("success: " + msg)
				},
				function(msg) {
				  alert("error: " + msg)
				}
			  );
			  break;			  
			  
			default:
			  window.plugins.nativepagetransitions.slide({
				  "direction": direction
				},
				function(msg) {
				  console.log("success: " + msg)
				},
				function(msg) {
				  alert("error: " + msg)
				}
			  );
		  }


		});
	  }, element);
	}
  };
}]);

I will refine it over time. This was made just for a testing purpose.

##Examples

I’ve intentionally used a slow Android device:

###Before:

###After:

Note: The first video is not a representative performance of Ionic Framework, I’ve used a low-end Android smartphone (Sony M2) to emphasize the difference.

13 Likes

Looks cool
I will definitely try it out :slight_smile:

OMG!!! Tried it out on my app and everyone told me this is native app.

I was amazed as much as you :smile:

1 Like

OMG!!! Thanks @Gajotres

Ok :slight_smile: Been giving this a go on android and ios.

The first main issue is that on iOS you have a ‘swipe to go back’ to get back from a detail view to a list view. By disabling all the ionic transitions we instantly lose this.

So, first alteration to the directive might be to somehow selective disable specific ionic animations when needed rather than just have a global disable which breaks a lot of things?

Or perhaps a way to re-implement swipe to go back using native?

Tnx, on this info, I will need to turn on my Mac this time :slight_smile:

I think I can even implement swipe to go back native. Give me some time until this weekend to try this out.

2 Likes

I’ve implemented this in my app and in general I have to say it’s really snazzy. The animations certainly feel 100% native.

However I’m having an issue where it will often complete the animation but still be rendering the previous view, and then after a “moment” it will render the new view.

Is anybody else experiencing this? Is this possibly just a configuration issue in my app and/or a problem with how views are loaded?

1 Like

And also issues with back button. Both hardware and the header back button generated by ionic. How would you go about that. Right now I am handling at $stateChangeStart event. I am just using slide-right for this and does not feel as an ideal way to go.

I’m also experiencing this, maybe configuring delay will give the right effect

You need to play with configuration parameters, from what I can see they will differ depending on an application.

I think it would be great if this plugin is officially included in ionic framework and the core devs use this instead of css transitions.

My clients complain that the transitions are choppy at best in android. Probably this will help.

1 Like

The same tag you apply to the list items can also be applied to the back / navigation buttons.

e.g.

<button class="button button-clear" ng-click="vm.goBack()">  becomes   <button class="button button-clear" ng-click="vm.goBack()"  transitiontype="slide" direction="right" go-native>

That is if you are coding them in your template. Alternately make the same change globally within app.js. :slight_smile: Hope that helps.

I wonder if there is a way to detect if the ‘image’ has been rendered and is ready for use, then trigger off the back of that action completing rather than guessing a time.

1 Like

I tried to make it work width crosswalk

ionic browser add crosswalk@14.43.343.17

Test on Genymotion emulator - Sony x peria z 4.3 api 18 1080x1920 - and at the beginning view transitions - application hangs

I stopped using Crosswalk a long time ago, it’s causing more problems than it solves. It’s useful with less complex applications, everything else is just bug after bug.

1 Like

Its works fine on iOS!

Thxs

No thank you :smile:

It seems this dont work with Crosswalk, i tested on my phone and no animation love :frowning:

I am using <ion-nav-bar>. Is there any way to handle back button globally? Right now I am checking history state, pushing and popping into a stack and based on that stack value I am calling the opposite effect of animation to handle back buttons.