Flipboard page flip with Qt QML

Posted on by

If there’s one app that would make me to buy iPad that would be Flipboard. Their social magazine have such a beautiful user experience which others could really learn from. I’d like to see more apps like that on other tablets as well.

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.

You can download the QML code from here.

  • Pingback: Qt and QML - Tommi Shows Flipboard page flip

  • Anonymous

    Looks nice.

  • Pingback: Video: iPad inspired Flipboard page flip with Qt QML : My Nokia Blog

  • Pingback: Page flip with Qt QML like Flipboard on iPad | Latest News Update & Technolgy Blog on Software -Web Application

  • Couldvbb

    Looks good, how to install and use

    • Joayush

      did u got it yet….

  • http://www.facebook.com/people/Saugata-Datta/540195122 Saugata Datta

    Hi,
    Can you (yea you can :)) create a application for e-Book reader for Symbian^3, which is really missing till now.. :(

  • http://antoinerjwright.com Antoine RJ Wright

    It does indeed look nice. And it’s good to know that the tech in Qt can pull this off. What are some of the issues performance or usability wise with this? For example, does it scale well for additional images/text, or is there a drop-off with performance at some point.

    To those looking at this for a Flipboard-like app, I would say to reach higher. If this kind of page transition can be done with Qt, then how should application or even system interfaces be better designed around these transitions in order to make the device and any content more fluid to the viewer? Just duplicating theFlipboard experience, at least with this tech demo, is the low bar to what should be done.

    Maybe this would be worth implementing into an app like Katana (Qt, Maemo 5), since it deals with a lot of text, and scrolling Bible passages should probably be nixed. If/when I get an N900, this would be the kind of exploration of UX that I would be most interested in figuring out and making work.

  • http://twitter.com/trixolina Tracy Rolling

    Awesome.

  • Anrydisappear

    Hi,man and thanks for yours great job.If find time can you explane how to install this application.
    regards

  • Cvetoslav Ludmiloff

    Thanks man, I was looking for such example so long. It is so wonderful.
    Will make my own soon and show it here:
    http://archstable.blogspot.com

  • Bogdan

    yes, but how to flip in the same direction several times, i.e. a true e-book ?