Video: iPad inspired Flipboard page flip with Qt QML

| March 15, 2011 | 2 Replies

Tommi Laukanen strikes again with yet another awesome step forward with QT QML projects. Inspired by Flipboard for iPad (which he says would be the one app to make him get one) he’s sought about to mimic Flipboard’s page turn effect with QML script. Flipboard for iPad looks great huh? I wonder what other aspects Tommi can bring over, as well as increasing the flip turn speed.

…I thought about trying to mimic the Flipboard’s page turn effect with the QML script. The page turn is pretty simple and a bit more modern then traditional paper like curly page turn. In Flipboard the page rotates from the center like folding the screen.

I created this effect with Flipable element which is clipped with parent Item element so that only the half of the flipable is visible at all times. The flipable element contains a duplicate page content as the underlying element which is just created with HTML formatted Text element. I also added a flavor of shadow to the Transition animation so that inner part of the fold seems a bit darker. Shadow was created with transparent gradient image.

Here you can see the page turn (or fold) in action with the Nokia N900. Rendering speed wasn’t that fast when I used “raster” rendering and might have been way faster if “opengl” would have been used.

Thanks Bas for the heads up!

substanceofcode via MeeGoExperts


Tags: , , , ,

Category: Maemo, Nokia, Nseries

About the Author ()

Hey, thanks for reading my post. My name is Jay and I'm a medical student at the University of Manchester. When I can, I blog here at and tweet now and again @jaymontano. We also have a twitter and facebook accounts @mynokiablog and Check out the tips, guides and rules for commenting >>click<< Contact us at tips(@) or email me directly on jay[at]