Restructure the examples. They are now organized into various

subdirectories to make it easier to locate examples for certain
features (e.g. animation) and to distinguish between different types
of examples (e.g. very basic examples vs complex demo-like examples).

18 files changed, 570 insertions, 0 deletions

diff --git a/examples/declarative/animation/animation.qmlproject b/examples/declarative/animation/animation.qmlproject
new file mode 100644
index 0000000000..d4909f8685
--- /dev/null
+++ b/examples/declarative/animation/animation.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/declarative/animation/basics/basics.qmlproject b/examples/declarative/animation/basics/basics.qmlproject
new file mode 100644
index 0000000000..d4909f8685
--- /dev/null
+++ b/examples/declarative/animation/basics/basics.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/declarative/animation/basics/color-animation.qml b/examples/declarative/animation/basics/color-animation.qml
new file mode 100644
index 0000000000..61737e9f07
--- /dev/null
+++ b/examples/declarative/animation/basics/color-animation.qml
@@ -0,0 +1,70 @@
+import Qt 4.7
+import Qt.labs.particles 1.0
+
+Item {
+    id: window
+    width: 640; height: 480
+
+    // Let's draw the sky...
+    Rectangle {
+        anchors { left: parent.left; top: parent.top; right: parent.right; bottom: parent.verticalCenter }
+        gradient: Gradient {
+            GradientStop {
+                position: 0.0
+                SequentialAnimation on color {
+                    loops: Animation.Infinite
+                    ColorAnimation { from: "DeepSkyBlue"; to: "#0E1533"; duration: 5000 }
+                    ColorAnimation { from: "#0E1533"; to: "DeepSkyBlue"; duration: 5000 }
+                }
+            }
+            GradientStop {
+                position: 1.0
+                SequentialAnimation on color {
+                    loops: Animation.Infinite
+                    ColorAnimation { from: "SkyBlue"; to: "#437284"; duration: 5000 }
+                    ColorAnimation { from: "#437284"; to: "SkyBlue"; duration: 5000 }
+                }
+            }
+        }
+    }
+
+    // the sun, moon, and stars
+    Item {
+        width: parent.width; height: 2 * parent.height
+        NumberAnimation on rotation { from: 0; to: 360; duration: 10000; loops: Animation.Infinite }
+        Image {
+            source: "images/sun.png"; y: 10; anchors.horizontalCenter: parent.horizontalCenter
+            rotation: -3 * parent.rotation
+        }
+        Image {
+            source: "images/moon.png"; y: parent.height - 74; anchors.horizontalCenter: parent.horizontalCenter
+            rotation: -parent.rotation
+        }
+        Particles {
+            x: 0; y: parent.height/2; width: parent.width; height: parent.height/2
+            source: "images/star.png"; angleDeviation: 360; velocity: 0
+            velocityDeviation: 0; count: parent.width / 10; fadeInDuration: 2800
+            SequentialAnimation on opacity {
+                loops: Animation.Infinite
+                NumberAnimation { from: 0; to: 1; duration: 5000 }
+                NumberAnimation { from: 1; to: 0; duration: 5000 }
+            }
+        }
+    }
+
+    // ...and the ground.
+    Rectangle {
+        anchors { left: parent.left; top: parent.verticalCenter; right: parent.right; bottom: parent.bottom }
+        gradient: Gradient {
+            GradientStop {
+                position: 0.0
+                SequentialAnimation on color {
+                    loops: Animation.Infinite
+                    ColorAnimation { from: "ForestGreen"; to: "#001600"; duration: 5000 }
+                    ColorAnimation { from: "#001600"; to: "ForestGreen"; duration: 5000 }
+                }
+            }
+            GradientStop { position: 1.0; color: "DarkGreen" }
+        }
+    }
+}
diff --git a/examples/declarative/animation/basics/images/face-smile.png b/examples/declarative/animation/basics/images/face-smile.png
new file mode 100644
index 0000000000..3d66d72578
--- /dev/null
+++ b/examples/declarative/animation/basics/images/face-smile.png
diff --git a/examples/declarative/animation/basics/images/moon.png b/examples/declarative/animation/basics/images/moon.png
new file mode 100644
index 0000000000..9407b2b4f0
--- /dev/null
+++ b/examples/declarative/animation/basics/images/moon.png
diff --git a/examples/declarative/animation/basics/images/shadow.png b/examples/declarative/animation/basics/images/shadow.png
new file mode 100644
index 0000000000..8270565e87
--- /dev/null
+++ b/examples/declarative/animation/basics/images/shadow.png
diff --git a/examples/declarative/animation/basics/images/star.png b/examples/declarative/animation/basics/images/star.png
new file mode 100644
index 0000000000..27ef924267
--- /dev/null
+++ b/examples/declarative/animation/basics/images/star.png
diff --git a/examples/declarative/animation/basics/images/sun.png b/examples/declarative/animation/basics/images/sun.png
new file mode 100644
index 0000000000..7713ca5ce7
--- /dev/null
+++ b/examples/declarative/animation/basics/images/sun.png
diff --git a/examples/declarative/animation/basics/property-animation.qml b/examples/declarative/animation/basics/property-animation.qml
new file mode 100644
index 0000000000..87ac8eca03
--- /dev/null
+++ b/examples/declarative/animation/basics/property-animation.qml
@@ -0,0 +1,63 @@
+import Qt 4.7
+
+Item {
+    id: window
+    width: 320; height: 480
+
+    // Let's draw the sky...
+    Rectangle {
+        anchors { left: parent.left; top: parent.top; right: parent.right; bottom: parent.verticalCenter }
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "DeepSkyBlue" }
+            GradientStop { position: 1.0; color: "LightSkyBlue" }
+        }
+    }
+
+    // ...and the ground.
+    Rectangle {
+        anchors { left: parent.left; top: parent.verticalCenter; right: parent.right; bottom: parent.bottom }
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "ForestGreen" }
+            GradientStop { position: 1.0; color: "DarkGreen" }
+        }
+    }
+
+    // The shadow for the smiley face
+    Image {
+        anchors.horizontalCenter: parent.horizontalCenter
+        source: "images/shadow.png"; y: smiley.minHeight + 58
+
+        // The scale property depends on the y position of the smiley face.
+        scale: smiley.y * 0.5 / (smiley.minHeight - smiley.maxHeight)
+    }
+
+    Image {
+        id: smiley
+        property int maxHeight: window.height / 3
+        property int minHeight: 2 * window.height / 3
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        source: "images/face-smile.png"; y: minHeight
+
+        // Animate the y property. Setting loops to Animation.Infinite makes the
+        // animation repeat indefinitely, otherwise it would only run once.
+        SequentialAnimation on y {
+            loops: Animation.Infinite
+
+            // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function
+            NumberAnimation {
+                from: smiley.minHeight; to: smiley.maxHeight
+                easing.type: Easing.OutExpo; duration: 300
+            }
+
+            // Then move back to minHeight in 1 second, using the OutBounce easing function
+            NumberAnimation {
+                from: smiley.maxHeight; to: smiley.minHeight
+                easing.type: Easing.OutBounce; duration: 1000
+            }
+
+            // Then pause for 500ms
+            PauseAnimation { duration: 500 }
+        }
+    }
+}
diff --git a/examples/declarative/animation/behaviors/SideRect.qml b/examples/declarative/animation/behaviors/SideRect.qml
new file mode 100644
index 0000000000..d32bd7b7a5
--- /dev/null
+++ b/examples/declarative/animation/behaviors/SideRect.qml
@@ -0,0 +1,22 @@
+import Qt 4.7
+
+Rectangle {
+    id: myRect
+
+    property string text
+
+    width: 75; height: 50
+    radius: 6
+    color: "#646464"
+    border.width: 4; border.color: "white"
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: {
+            focusRect.x = myRect.x; 
+            focusRect.y = myRect.y; 
+            focusRect.text = myRect.text;
+        }
+    }
+}
diff --git a/examples/declarative/animation/behaviors/behavior-example.qml b/examples/declarative/animation/behaviors/behavior-example.qml
new file mode 100644
index 0000000000..1f17b81acd
--- /dev/null
+++ b/examples/declarative/animation/behaviors/behavior-example.qml
@@ -0,0 +1,79 @@
+import Qt 4.7
+
+Rectangle {
+    width: 600; height: 400
+    color: "#343434"
+
+    Rectangle {
+        anchors.centerIn: parent
+        width: 200; height: 200
+        radius: 30
+        color: "transparent"
+        border.width: 4; border.color: "white"
+
+
+        SideRect {
+            id: leftRect
+            anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.left }
+            text: "Left"
+        }
+
+        SideRect {
+            id: rightRect
+            anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.right }
+            text: "Right"
+        }
+
+        SideRect {
+            id: topRect
+            anchors { verticalCenter: parent.top; horizontalCenter: parent.horizontalCenter }
+            text: "Top"
+        }
+
+        SideRect {
+            id: bottomRect
+            anchors { verticalCenter: parent.bottom; horizontalCenter: parent.horizontalCenter }
+            text: "Bottom"
+        }
+
+
+        Rectangle {
+            id: focusRect
+
+            property string text
+
+            x: 62.5; y: 75; width: 75; height: 50
+            radius: 6
+            border.width: 4; border.color: "white"
+            color: "firebrick"
+
+            // Setting an 'elastic' behavior on the focusRect's x property.
+            Behavior on x {
+                NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
+            }
+
+            // Setting an 'elastic' behavior on the focusRect's y property.
+            Behavior on y {
+                NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
+            }
+
+            Text {
+                id: focusText
+                text: focusRect.text
+                anchors.centerIn: parent
+                color: "white"
+                font.pixelSize: 16; font.bold: true
+
+                // Setting a behavior on the focusText's x property:
+                // Set the opacity to 0, set the new text value, then set the opacity back to 1.
+                Behavior on text {
+                    SequentialAnimation {
+                        NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 }
+                        PropertyAction { }
+                        NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 150 }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/animation/behaviors/behaviors.qmlproject b/examples/declarative/animation/behaviors/behaviors.qmlproject
new file mode 100644
index 0000000000..d4909f8685
--- /dev/null
+++ b/examples/declarative/animation/behaviors/behaviors.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/declarative/animation/easing/easing.qml b/examples/declarative/animation/easing/easing.qml
new file mode 100644
index 0000000000..939d43bf49
--- /dev/null
+++ b/examples/declarative/animation/easing/easing.qml
@@ -0,0 +1,105 @@
+import Qt 4.7
+
+Rectangle {
+    id: window
+    width: 600; height: 460; color: "#232323"
+
+    ListModel {
+        id: easingTypes
+        ListElement { name: "Easing.Linear"; type: Easing.Linear; ballColor: "DarkRed" }
+        ListElement { name: "Easing.InQuad"; type: Easing.InQuad; ballColor: "IndianRed" }
+        ListElement { name: "Easing.OutQuad"; type: Easing.OutQuad; ballColor: "Salmon" }
+        ListElement { name: "Easing.InOutQuad"; type: Easing.InOutQuad; ballColor: "Tomato" }
+        ListElement { name: "Easing.OutInQuad"; type: Easing.OutInQuad; ballColor: "DarkOrange" }
+        ListElement { name: "Easing.InCubic"; type: Easing.InCubic; ballColor: "Gold" }
+        ListElement { name: "Easing.OutCubic"; type: Easing.OutCubic; ballColor: "Yellow" }
+        ListElement { name: "Easing.InOutCubic"; type: Easing.InOutCubic; ballColor: "PeachPuff" }
+        ListElement { name: "Easing.OutInCubic"; type: Easing.OutInCubic; ballColor: "Thistle" }
+        ListElement { name: "Easing.InQuart"; type: Easing.InQuart; ballColor: "Orchid" }
+        ListElement { name: "Easing.OutQuart"; type: Easing.OutQuart; ballColor: "Purple" }
+        ListElement { name: "Easing.InOutQuart"; type: Easing.InOutQuart; ballColor: "SlateBlue" }
+        ListElement { name: "Easing.OutInQuart"; type: Easing.OutInQuart; ballColor: "Chartreuse" }
+        ListElement { name: "Easing.InQuint"; type: Easing.InQuint; ballColor: "LimeGreen" }
+        ListElement { name: "Easing.OutQuint"; type: Easing.OutQuint; ballColor: "SeaGreen" }
+        ListElement { name: "Easing.InOutQuint"; type: Easing.InOutQuint; ballColor: "DarkGreen" }
+        ListElement { name: "Easing.OutInQuint"; type: Easing.OutInQuint; ballColor: "Olive" }
+        ListElement { name: "Easing.InSine"; type: Easing.InSine; ballColor: "DarkSeaGreen" }
+        ListElement { name: "Easing.OutSine"; type: Easing.OutSine; ballColor: "Teal" }
+        ListElement { name: "Easing.InOutSine"; type: Easing.InOutSine; ballColor: "Turquoise" }
+        ListElement { name: "Easing.OutInSine"; type: Easing.OutInSine; ballColor: "SteelBlue" }
+        ListElement { name: "Easing.InExpo"; type: Easing.InExpo; ballColor: "SkyBlue" }
+        ListElement { name: "Easing.OutExpo"; type: Easing.OutExpo; ballColor: "RoyalBlue" }
+        ListElement { name: "Easing.InOutExpo"; type: Easing.InOutExpo; ballColor: "MediumBlue" }
+        ListElement { name: "Easing.OutInExpo"; type: Easing.OutInExpo; ballColor: "MidnightBlue" }
+        ListElement { name: "Easing.InCirc"; type: Easing.InCirc; ballColor: "CornSilk" }
+        ListElement { name: "Easing.OutCirc"; type: Easing.OutCirc; ballColor: "Bisque" }
+        ListElement { name: "Easing.InOutCirc"; type: Easing.InOutCirc; ballColor: "RosyBrown" }
+        ListElement { name: "Easing.OutInCirc"; type: Easing.OutInCirc; ballColor: "SandyBrown" }
+        ListElement { name: "Easing.InElastic"; type: Easing.InElastic; ballColor: "DarkGoldenRod" }
+        ListElement { name: "Easing.InElastic"; type: Easing.OutElastic; ballColor: "Chocolate" }
+        ListElement { name: "Easing.InOutElastic"; type: Easing.InOutElastic; ballColor: "SaddleBrown" }
+        ListElement { name: "Easing.OutInElastic"; type: Easing.OutInElastic; ballColor: "Brown" }
+        ListElement { name: "Easing.InBack"; type: Easing.InBack; ballColor: "Maroon" }
+        ListElement { name: "Easing.OutBack"; type: Easing.OutBack; ballColor: "LavenderBlush" }
+        ListElement { name: "Easing.InOutBack"; type: Easing.InOutBack; ballColor: "MistyRose" }
+        ListElement { name: "Easing.OutInBack"; type: Easing.OutInBack; ballColor: "Gainsboro" }
+        ListElement { name: "Easing.OutBounce"; type: Easing.OutBounce; ballColor: "Silver" }
+        ListElement { name: "Easing.InBounce"; type: Easing.InBounce; ballColor: "DimGray" }
+        ListElement { name: "Easing.InOutBounce"; type: Easing.InOutBounce; ballColor: "SlateGray" }
+        ListElement { name: "Easing.OutInBounce"; type: Easing.OutInBounce; ballColor: "DarkSlateGray" }
+    }
+
+    Component {
+        id: delegate
+
+        Item {
+            height: 42; width: window.width
+
+            Text { text: name; anchors.centerIn: parent; color: "White" }
+
+            Rectangle {
+                id: slot1; color: "#121212"; x: 30; height: 32; width: 32
+                border.color: "#343434"; border.width: 1; radius: 8
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Rectangle {
+                id: slot2; color: "#121212"; x: window.width - 62; height: 32; width: 32
+                border.color: "#343434"; border.width: 1; radius: 8
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Rectangle {
+                id: rect; x: 30; color: "#454545"
+                border.color: "White"; border.width: 2
+                height: 32; width: 32; radius: 8
+                anchors.verticalCenter: parent.verticalCenter
+
+                MouseArea {
+                    onClicked: if (rect.state == '') rect.state = "right"; else rect.state = ''
+                    anchors.fill: parent
+                }
+
+                states : State {
+                    name: "right"
+                    PropertyChanges { target: rect; x: window.width - 62; color: ballColor }
+                }
+
+                transitions: Transition {
+                    NumberAnimation { properties: "x"; easing.type: type; duration: 1000 }
+                    ColorAnimation { properties: "color"; easing.type: type; duration: 1000 }
+                }
+            }
+        }
+    }
+
+    Flickable {
+        anchors.fill: parent; contentHeight: layout.height
+
+        Column {
+            id: layout
+            anchors.left: parent.left; anchors.right: parent.right
+            Repeater { model: easingTypes; delegate: delegate }
+        }
+    }
+}
diff --git a/examples/declarative/animation/easing/easing.qmlproject b/examples/declarative/animation/easing/easing.qmlproject
new file mode 100644
index 0000000000..d4909f8685
--- /dev/null
+++ b/examples/declarative/animation/easing/easing.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/declarative/animation/states/states.qml b/examples/declarative/animation/states/states.qml
new file mode 100644
index 0000000000..4429e78e68
--- /dev/null
+++ b/examples/declarative/animation/states/states.qml
@@ -0,0 +1,61 @@
+import Qt 4.7
+
+Rectangle {
+    id: page
+    width: 640; height: 480
+    color: "#343434"
+
+    Image { 
+        id: userIcon
+        x: topLeftRect.x; y: topLeftRect.y
+        source: "user.png"
+    }
+
+    Rectangle {
+        id: topLeftRect
+
+        anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to the default state, returning the image to
+        // its initial position
+        MouseArea { anchors.fill: parent; onClicked: page.state = '' }
+    }
+
+    Rectangle {
+        id: middleRightRect
+
+        anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to 'middleRight'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
+    }
+
+    Rectangle {
+        id: bottomLeftRect
+
+        anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to 'bottomLeft'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
+    }
+
+    states: [
+        // In state 'middleRight', move the image to middleRightRect
+        State {
+            name: "middleRight"
+            PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
+        },
+
+        // In state 'bottomLeft', move the image to bottomLeftRect
+        State {
+            name: "bottomLeft"
+            PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y  }
+        }
+    ]
+}
diff --git a/examples/declarative/animation/states/states.qmlproject b/examples/declarative/animation/states/states.qmlproject
new file mode 100644
index 0000000000..d4909f8685
--- /dev/null
+++ b/examples/declarative/animation/states/states.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/declarative/animation/states/transitions.qml b/examples/declarative/animation/states/transitions.qml
new file mode 100644
index 0000000000..ccc7060d8c
--- /dev/null
+++ b/examples/declarative/animation/states/transitions.qml
@@ -0,0 +1,90 @@
+import Qt 4.7
+
+/*
+    This is exactly the same as states.qml, except that we have appended
+    a set of transitions to apply animations when the item changes 
+    between each state.
+*/
+
+Rectangle {
+    id: page
+    width: 640; height: 480
+    color: "#343434"
+
+    Image { 
+        id: userIcon
+        x: topLeftRect.x; y: topLeftRect.y
+        source: "user.png"
+    }
+
+    Rectangle {
+        id: topLeftRect
+
+        anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to the default state, returning the image to
+        // its initial position
+        MouseArea { anchors.fill: parent; onClicked: page.state = '' }
+    }
+
+    Rectangle {
+        id: middleRightRect
+
+        anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to 'middleRight'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
+    }
+
+    Rectangle {
+        id: bottomLeftRect
+
+        anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to 'bottomLeft'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
+    }
+
+    states: [
+        // In state 'middleRight', move the image to middleRightRect
+        State {
+            name: "middleRight"
+            PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
+        },
+
+        // In state 'bottomLeft', move the image to bottomLeftRect
+        State {
+            name: "bottomLeft"
+            PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y  }
+        }
+    ]
+
+    // Transitions define how the properties change when the item moves between each state
+    transitions: [
+
+        // When transitioning to 'middleRight' move x,y over a duration of 1 second,
+        // with OutBounce easing function.
+        Transition {
+            from: "*"; to: "middleRight"
+            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 }
+        },
+
+        // When transitioning to 'bottomLeft' move x,y over a duration of 2 seconds,
+        // with InOutQuad easing function.
+        Transition {
+            from: "*"; to: "bottomLeft"
+            NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 2000 }
+        },
+
+        // For any other state changes move x,y linearly over duration of 200ms.
+        Transition {
+            NumberAnimation { properties: "x,y"; duration: 200 }
+        }
+    ]
+}
diff --git a/examples/declarative/animation/states/user.png b/examples/declarative/animation/states/user.png
new file mode 100644
index 0000000000..dd7d7a2417
--- /dev/null
+++ b/examples/declarative/animation/states/user.png