Simple and fast CSS page transitions in your hybrid mobile app

http://trigger.io/cross-platform-application-development-blog/2012/09/05/simple-and-fast-css-page-transitions-in-your-hybrid-mobile-app/

by amirnathoo • 14 years ago

40 13 14 years ago

trigger.io

grimtrigger• 14 years ago

For any blog post like this, the absolute first thing should be a demo. "Simple" and "fast" are claims that cant be verified by looking at code, and a demo is a primer that makes code easier to understand.

amirnathoo2• 14 years ago

You're right, you can see a simple transition here: http://jsfiddle.net/Fqbym/

You'd need to setup the Trigger.io build / test environment to see the full example code from the post used in a mobile app. Maybe next time we can show that to you in a screencast, we'll work on it.

Malcx• 14 years ago

Thanks for the link but I think you're still missing it slightly. I'd like a url I can point my phone at to see the demo app running.

Not a screencast as I can't gauge lag from that, but a functioning demo to play with.

I want to be able to test on my phone to see it's "simple and fast" from the UX perspective before I'll investigate further.

malandrew• 14 years ago

If I have to set up a Trigger.io build/test environment to see something used in a mobile app, it fails on being simple. I know it's your platform and all and you're trying to sell it, but entice me to use it with breadcrumbs in the form of progressively more advanced demos up until I need Trigger.io to see the most advanced demos.

Is using/experimenting with Trigger.io as trivial as an apt-get or npm install?

randallu2• 14 years ago

Good start, but it'd be nicer if the swipe gesture was tracked live and the transition performed once the touch point was released (taking velocity into account for bonus points). This'd be more like the iOS home screen switch gesture (imagine if that didn't track live!).

itsmonktastic2• 14 years ago

Hi, author of the post here. I'll admit I kept the premise simple here in order to provide a more introduction on how to "roll your own" effects without too much overhead.

The sort of thing you've described seems to have been implemented pretty well as a zepto plugin: http://blog.kojo.com.au/flickable-zepto-plugin/ (in particular this demo: http://blog.kojo.com.au/demos/flickable/demo2.html ) which works wonderfully on my Galaxy Nexus, but I haven't had much of a chance to play with this yet!

randallu2• 14 years ago

That is nice, thanks for the link :). It's a pity the touch events don't include finger velocity -- you can confuse the velocity tracker in that example by swiping back and forth quickly before releasing.

Android has a whole bunch of velocity trackers, but they're probably expensive in JS (solve least squares, etc). Code is here: https://github.com/android/platform_frameworks_base/blob/mas...

asawilliams2• 14 years ago

why not use css transforms for the transitions?

mortenjorck• 14 years ago

This is an especially pertinent question as CSS transforms tend to be hardware-accelerated on mobile Webkit, playing more smoothly and using less battery, while jQuery animations tend not to be.

itsmonktastic2• 14 years ago

The tutorial uses Zepto for animations, which backs onto CSS transforms.

"Zepto exclusively uses CSS transitions for effects and animation. jQuery easings are not supported."

From http://zeptojs.com/#animate

asawilliams2• 14 years ago

doesnt look like they implement 3d transforms which is where the performance would come from.

joahua• 14 years ago

There's a webkit bug that is pertinent here.

We can't accelerate animation on a mobile app that uses position:fixed for persistent headers due to http://code.google.com/p/chromium/issues/detail?id=20574

This makes for some jerky transitions, unfortunately, but the alternative is forgoing the simplicity and performance afforded by position:fixed for persistent nav.

amirnathoo2• 14 years ago

With trigger.io you can use native titlebar and tabbar elements so you don't have to mess around with position:fixed http://docs.trigger.io/en/v1.4/modules/topbar.html#modules-t...

:-D

Simple and fast CSS page transitions in your hybrid mobile app

Related Stories