Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Using Flickable to implement a view change animation

From Wiki
Jump to: navigation, search
Article Metadata
Tested with
Devices(s): E7, N8, N900
Platform(s): Symbian
Keywords: QML, Flickable
Created: kratsan (27 Dec 2010)
Last edited: kiran10182 (31 Oct 2013)



This article demonstrates how to create a transition animation between two views by using Flickable in non-interactive mode. The two rectangles representing the views are placed inside a flickable one on top of the another in y-direction. Both of the views are exactly same size than the base size of the UI. The flickable is then controlled by a MouseArea to set the contentY property to switch the view.

This technique was used in the Nokia Developer example Dj Turntable to switch between views.


  • Qt 4.7 or higher is installed on your platform.


import Qt 4.7
Item {
id: base
width: 640; height: 360
Component.onCompleted: flickable.state = "view1"
Flickable {
id: flickable
anchors.fill: parent
interactive: false
Rectangle {
id: view1
width: base.width; height: base.height
color: "black"
Text { anchors.centerIn: parent; text: "View 1"; color: "white" }
Rectangle {
id: view2
width: base.width; height: base.height; y: height
color: "gray"
Text { anchors.centerIn: parent; text: "View 2"; color: "white" }
states: [
State {
name: "view1"
PropertyChanges { target: flickable; contentY: 0 }
State {
name: "view2"
PropertyChanges { target: flickable; contentY: base.height }
transitions: Transition {
PropertyAnimation { property: "contentY"; easing.type: Easing.InOutQuart; duration: 750 }
MouseArea {
anchors.fill: parent
onClicked: {
if(flickable.state == "view1") { flickable.state = "view2" }
else { flickable.state = "view1" }


The Flickable element was used in non-interactive mode to implement a view change transition.

This page was last modified on 31 October 2013, at 19:58.
65 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.