

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

======
grimtrigger
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.

~~~
amirnathoo
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.

~~~
malandrew
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?

------
randallu
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!).

~~~
itsmonktastic
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!

~~~
randallu
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...](https://github.com/android/platform_frameworks_base/blob/master/libs/androidfw/VelocityTracker.cpp)

------
joahua
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.

~~~
amirnathoo
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...](http://docs.trigger.io/en/v1.4/modules/topbar.html#modules-
topbar)

:-D

------
asawilliams
why not use css transforms for the transitions?

~~~
itsmonktastic
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>

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

