Android animation performance

[nickw]

In https://github.com/meteoric/contacts/issues/1 @rclai reported that:

I can see the left/right swipe more but there's still a fade out of the current content before the new content swipes in.

In the browser, there's a seamless transition that doesn't involve the fading out of the current content.

[nickw]

Update: I was able to get a Nexus 4 running Lollipop for testing. Here's what I've found:

The Contacts example and Meteor Hunt are both pretty laggy when it comes to navigation transitions and modal transitions.

The Demo App seems pretty good.

I think the difference is that the Demo app has mostly static templates/data, while the other two examples are using real data.

[rclai]

Yes, I had a feeling it was performance-related.

[PolGuixe]

I have a OnePlus One running the Meteor Hunt and the Contacts application and I can say that it is laggy as well.

[zleman1593]

True for me on a galaxy S4. Any idea why this is the case? Not a problem on any of my ios devices.

[nickw]

I pushed some minor improvements related to Android animations earlier this week (but haven't released a new version on atmosphere yet). Also @dennisharrison is working on some general animation-related performance issues in: https://github.com/meteoric/meteor-ionic/issues/4.

I'm not sure exactly why it's so much slower on Android (although I've noticed everything on Android is pretty clunky compared to iOS), but I'm confident we'll be able to get it fixed.

[dennisharrison]

@nickw Checking in on this issue - letting you know the flickering is pretty trivial to fix a number of ways. The Android animation performance can be solved with using GSAP or the like. I've been sidetracked from this with implementing file upload management and Froala inside a sample meteor-ionic project.

https://github.com/dennisharrison/mapp-skeletor

This isn't ready for public consumption by a long shot, but I'll be putting the performance css and js animation tweaks in here first - have meteor-ionic as a local package currently. I'm aiming to get you the pull request to make the flickering stop and smooth the animations this week coming up.

[nickw]

@dennisharrison ok great, thanks for the update.

If I get time I'm going to experiment with using -webkit-transform-style: preserve-3d; to get rid of the flicker.

In general, I'd love to be able to solve these issues with standard HTML/JS techniques like requestAnimationFrame as opposed to adding a large dependencies like GSAP, but at this point whatever works is good enough for me.

[nickw]

Did some digging on my own this weekend and updated here: https://github.com/meteoric/meteor-ionic/issues/4#issuecomment-73446896

[dennisharrison]

@nickw I agree with you on not adding dependencies: I think in this case the positives outweigh the negatives of dragging along that extra dep.

You could use requestAnimationFrame but there are GSAP & Velocity packages which shave off a lot of the rough edges, there is a lot of work done here. If you wanted to pick one over the other and use their jQuery animate() compatible plugin then a user of meteor-ionic could swap them out on a whim as they both feature API parity for jQuery animate().

I need GSAP for other things in the mobile projects that velocity won't handle - so this would be a boon to me personally :)

Moving rest of this to #4