Using Flickable to implement a view change animation

From Nokia Developer 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 22:58.
48 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.