Update TransitionView example

* Use timeline to control progress
* Add TransitionList to define list semantics
* Implement SwipeInteraction

The SwipeInteraction allows swiping pages.

Change-Id: I9ea0e78f91ad93764b6a40df5ea1240929094d57
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

22 files changed, 1192 insertions, 233 deletions

diff --git a/examples/TransitionItem/PagePushLeftEffect.qml b/examples/TransitionItem/PagePushLeftEffect.qml
deleted file mode 100644
index df5a57a..0000000
--- a/examples/TransitionItem/PagePushLeftEffect.qml
+++ /dev/null
@@ -1,66 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2018 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Quick Designer Components.
-**
-** $QT_BEGIN_LICENSE:GPL$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 or (at your option) any later version
-** approved by the KDE Free Qt Foundation. The licenses are as published by
-** the Free Software Foundation and appearing in the file LICENSE.GPL3
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.10
-import TransitionItem 1.0
-
-PageEffect {
-    id: effect
-
-    duration: 250
-    onStarted: {
-        anim01.target = transitionView.__fromContentItem
-        anim02.target = transitionView.__toContentItem
-        anim.start()
-    }
-
-    property ParallelAnimation __FadeAnim: ParallelAnimation {
-        id: anim
-
-        loops: 1
-
-        PropertyAnimation {
-            id: anim01
-            duration: effect.duration
-            property: "x"
-            from: 0
-            to: effect.transitionView.width
-            easing: effect.easing
-        }
-
-        PropertyAnimation {
-            id: anim02
-            duration: effect.duration
-            property: "x"
-            from: -effect.transitionView.width
-            to: 0
-            easing: effect.easing
-        }
-    }
-}
diff --git a/examples/TransitionItem/PagePushRightEffect.qml b/examples/TransitionItem/PagePushRightEffect.qml
deleted file mode 100644
index 0eefa9b..0000000
--- a/examples/TransitionItem/PagePushRightEffect.qml
+++ /dev/null
@@ -1,66 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2018 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Quick Designer Components.
-**
-** $QT_BEGIN_LICENSE:GPL$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 or (at your option) any later version
-** approved by the KDE Free Qt Foundation. The licenses are as published by
-** the Free Software Foundation and appearing in the file LICENSE.GPL3
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.10
-import TransitionItem 1.0
-
-PageEffect {
-    id: effect
-
-    duration: 250
-    onStarted: {
-        anim01.target = transitionView.__fromContentItem
-        anim02.target = transitionView.__toContentItem
-        anim.start()
-    }
-
-    property ParallelAnimation __FadeAnim: ParallelAnimation {
-        id: anim
-
-        loops: 1
-
-        PropertyAnimation {
-            id: anim01
-            duration: effect.duration
-            property: "x"
-            from: 0
-            to: -effect.transitionView.width
-            easing: effect.easing
-        }
-
-        PropertyAnimation {
-            id: anim02
-            duration: effect.duration
-            property: "x"
-            from: effect.transitionView.width
-            to: 0
-            easing: effect.easing
-        }
-    }
-}
diff --git a/examples/TransitionItem/Screen01.ui.qml b/examples/TransitionItem/Screen01.ui.qml
index fe41254..8bc134c 100644
--- a/examples/TransitionItem/Screen01.ui.qml
+++ b/examples/TransitionItem/Screen01.ui.qml
@@ -31,6 +31,7 @@ import QtQuick 2.10
 import TransitionItem 1.0
 import QtQuick.Controls 2.3
 import QtQuick.Timeline 1.0
+import TransitionView 1.0
 
 Rectangle {
     id: rectangle
@@ -186,18 +187,19 @@ Rectangle {
         value: 0
     }
 
+    /*
     Connections {
         target: button
         onClicked: {
             transitionToStart.trigger()
             slider.value = 0
 
-            /* TODO bindings should be preserved when calling trigger */
+
             view.currentIndex = Qt.binding(function () {
                 return slider.value
             })
         }
-    }
+    }*/
 
     Label {
         id: label
diff --git a/examples/TransitionItem/Screen02.ui.qml b/examples/TransitionItem/Screen02.ui.qml
index c3188b9..048fe47 100644
--- a/examples/TransitionItem/Screen02.ui.qml
+++ b/examples/TransitionItem/Screen02.ui.qml
@@ -30,6 +30,7 @@
 import QtQuick 2.10
 import TransitionItem 1.0
 import QtQuick.Controls 2.3
+import TransitionView 1.0
 
 Rectangle {
     id: rectangle
diff --git a/examples/TransitionItem/Screen03.ui.qml b/examples/TransitionItem/Screen03.ui.qml
new file mode 100644
index 0000000..6007c5d
--- /dev/null
+++ b/examples/TransitionItem/Screen03.ui.qml
@@ -0,0 +1,314 @@
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.12
+import TransitionItem 1.0
+import QtQuick.Controls 2.3
+import QtQuick.Timeline 1.0
+import TransitionView 1.0
+
+Rectangle {
+    id: rectangle
+    width: Constants.width
+    height: Constants.height
+
+    color: Constants.backgroundColor
+
+    TransitionList {
+        id: pageList
+        intialItem: page01
+        items: [page01, page02, page03, page04, page05]
+    }
+    TransitionView {
+
+        interaction: SwipeInteraction {
+            transitionView: view
+            list: pageList
+        }
+        id: view
+        x: 3
+        y: -4
+        width: 1277
+        height: 727
+
+        activatedItem: pageList.currentItem
+
+        Image {
+            id: page01
+            source: "images/shuttle1.jpg"
+            objectName: "page01"
+
+            Text {
+                x: 1225
+                y: 17
+                color: "#ffffff"
+                text: qsTr("1")
+                font.pixelSize: 24
+            }
+        }
+
+        Image {
+            id: page02
+            source: "images/shuttle2.jpg"
+            objectName: "page02"
+
+            Text {
+                x: 1225
+                y: 17
+                color: "#ffffff"
+                text: qsTr("2")
+                font.pixelSize: 24
+            }
+        }
+
+        Image {
+            id: page03
+            source: "images/shuttle3.jpg"
+            objectName: "page03"
+
+            Text {
+                x: 1225
+                y: 17
+                color: "#ffffff"
+                text: qsTr("3")
+                font.pixelSize: 24
+            }
+        }
+
+        Image {
+            id: page04
+            source: "images/shuttle4.jpg"
+            objectName: "page04"
+
+            Text {
+                x: 1225
+                y: 17
+                color: "#ffffff"
+                text: qsTr("4")
+                font.pixelSize: 24
+            }
+        }
+
+        Image {
+            id: page05
+            source: "images/shuttle5.jpg"
+            objectName: "page05"
+
+            Text {
+                x: 1225
+                y: 17
+                color: "#ffffff"
+                text: qsTr("5")
+                font.pixelSize: 24
+            }
+        }
+
+        Image {
+            id: page06
+            source: "images/shuttle6.jpg"
+
+            Button {
+                id: button
+                text: qsTr("Back")
+            }
+
+            Text {
+                x: 1225
+                y: 17
+                color: "#ffffff"
+                text: qsTr("6")
+                font.pixelSize: 24
+            }
+        }
+
+        defaultTransition: PageTransition {
+        }
+
+        transitions: [
+            PageTransition {
+                from: page01
+                to: page02
+
+                effect: PageSlideRightEffect {
+                }
+            },
+
+            PageTransition {
+                from: page02
+                to: page03
+
+                effect: PageSlideRightEffect {
+                    duration: 500
+                }
+            },
+            PageTransition {
+                from: page03
+                to: page04
+
+                effect: PagePushRightEffect {
+                }
+            },
+            PageTransition {
+                from: page04
+                to: page05
+
+                effect: PagePushRightEffect {
+                    duration: 500
+                }
+            },
+
+            PageTransition {
+                from: page05
+                to: page06
+
+                effect: PageSlideUpEffect {
+                    easing.bezierCurve: [0.236, 0.75, 0.592, 0.862, 0.768, 0.982, 0.861, 0.936, 0.812, 0.929, 0.886, 0.96, 0.93, 0.984, 0.957, 0.986, 1, 1]
+                }
+            },
+
+            PageTransition {
+                from: page06
+                to: page05
+
+                effect: PageSlideDownEffect {
+                    easing.bezierCurve: [0.236, 0.75, 0.592, 0.862, 0.768, 0.982, 0.861, 0.936, 0.812, 0.929, 0.886, 0.96, 0.93, 0.984, 0.957, 0.986, 1, 1]
+                }
+            },
+            PageTransition {
+                from: page04
+                to: page03
+
+                effect: PagePushLeftEffect {
+                }
+            },
+            PageTransition {
+                from: page05
+                to: page04
+
+                effect: PagePushLeftEffect {
+                    duration: 500
+                }
+            },
+
+            PageTransition {
+                from: page02
+                to: page01
+
+                effect: PageSlideLeftEffect {
+                }
+            },
+
+            PageTransition {
+                from: page03
+                to: page02
+
+                effect: PageSlideLeftEffect {
+                    duration: 500
+                }
+            },
+
+            PageTransition {
+                id: transitionToStart
+                from: page06
+                to: page01
+                effect: PageFadeEffect {
+                }
+            }
+        ]
+    }
+
+    SimpleTabBar {
+        list: pageList
+    }
+
+    Connections {
+        target: button
+        onClicked: {
+            transitionToStart.trigger()
+        }
+    }
+
+    Label {
+        id: label
+        x: 331
+        y: 24
+        color: "#ffffff"
+        text: view.currentIndex
+        font.pointSize: 24
+    }
+
+    Label {
+        id: label1
+        x: 599
+        y: 24
+        color: "#ffffff"
+        text: Math.round(view.progress)
+        font.pointSize: 24
+    }
+
+    Connections {
+        target: next
+        onClicked: pageList.next()
+    }
+
+    Connections {
+        target: prev
+        onClicked: pageList.prev()
+    }
+
+    Connections {
+        target: back
+        onClicked: pageList.currentItem = view.lastItem
+    }
+
+    Button {
+        id: prev
+        x: 8
+        y: 631
+        text: qsTr("Prev ") + (pageList.prevItem ? pageList.prevItem.objectName : "")
+        enabled: pageList.prevItem !== null
+    }
+
+    Button {
+        id: next
+        x: 939
+        y: 631
+        text: qsTr("Next ") + (pageList.nextItem ? pageList.nextItem.objectName : "")
+        enabled: pageList.nextItem !== null
+    }
+
+    Button {
+        id: back
+        x: 11
+        y: 80
+        text: qsTr("Back ") + (view.lastItem ? view.lastItem.objectName : "")
+        enabled: view.lastItem !== null
+    }
+}
diff --git a/examples/TransitionItem/SimpleTabBar.qml b/examples/TransitionItem/SimpleTabBar.qml
new file mode 100644
index 0000000..7daff30
--- /dev/null
+++ b/examples/TransitionItem/SimpleTabBar.qml
@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.12
+import TransitionItem 1.0
+import QtQuick.Controls 2.3
+import QtQuick.Timeline 1.0
+
+Row {
+    spacing: 40
+    property var list
+    Repeater {
+        model: list.length
+
+        Text {
+            color: list.currentItem === list.items[modelData] ? "white" : "#bfbfbf"
+            text: list.items[modelData].objectName
+            font.pointSize: 24
+            MouseArea {
+                anchors.fill: parent
+                onClicked: list.currentItem = list.items[modelData]
+            }
+        }
+    }
+}
diff --git a/examples/TransitionItem/TransitionItem.qml b/examples/TransitionItem/TransitionItem.qml
index a65637d..ce7b967 100644
--- a/examples/TransitionItem/TransitionItem.qml
+++ b/examples/TransitionItem/TransitionItem.qml
@@ -34,6 +34,6 @@ Item {
     width: Constants.width
     height: Constants.height
 
-    Screen01 {
+    Screen03 {
     }
 }
diff --git a/examples/TransitionItem/DefaultPageEffect.qml b/examples/TransitionItem/imports/TransitionView/DefaultPageEffect.qml
index f9dd5ed..f9dd5ed 100644
--- a/examples/TransitionItem/DefaultPageEffect.qml
+++ b/examples/TransitionItem/imports/TransitionView/DefaultPageEffect.qml
diff --git a/examples/TransitionItem/PageEffect.qml b/examples/TransitionItem/imports/TransitionView/PageEffect.qml
index dd67301..0f11346 100644
--- a/examples/TransitionItem/PageEffect.qml
+++ b/examples/TransitionItem/imports/TransitionView/PageEffect.qml
@@ -28,57 +28,117 @@
 ****************************************************************************/
 import QtQuick 2.10
 import TransitionItem 1.0
+import QtQuick.Timeline 1.0
 
 QtObject {
     id: root
     signal finished
     signal started
-    function start() {
+    signal reseted
+    function reset() {
+        /*
         if (root.duration === 0) {
             root.transitionView.__setupCurrentItem()
             return
-        }
+        }*/
 
         /* We set the parents to the content items to apply effects */
+
+        resetProperties()
+
+         for (var i = 0; i <  transitionView.__fromContentItem.children.length; ++i) {
+             print("letf over 1")
+         }
+
         from.parent = transitionView.__fromContentItem
         to.parent = transitionView.__toContentItem
+        root.progress = root.backwards ? 100 : 0
+
+        enable()
+        root.progress = -1
+        root.progress = 0
+    }
 
+    function enable() {
+        timeline.enabled = true
         root.started()
-        anim.start()
     }
 
-     function stop() {
-         anim.complete()
-     }
+    function start() {
+        anim.from = root.progress
+        anim.to = root.backwards ? 0 : 100
+        anim.duration = root.duration * Math.abs(anim.from - anim.to) / 100
+
+        anim.restart()
+    }
+
+    function abort() {
+
+        anim.from = root.progress
+        anim.to = root.backwards ? 100 : 0
+
+        anim.duration = root.duration * Math.abs(anim.from - anim.to) / 100
+
+        root.transitionView.nextItem = root.transitionView.currentItem
+        anim.restart()
+
+    }
+
+    function stop() {
+        anim.stop()
+    }
 
     property Item from
     property Item to
 
     property Item transitionView
 
-    property alias duration: anim.duration
+    property real duration: 250
     property alias easing: anim.easing
 
+    property Timeline timeline: Timeline {
+
+    }
+
+    property real progress: 0
+
+    property bool backwards: false
+
+    property Binding timelineBinding: Binding {
+        target: timeline
+        property: "currentFrame"
+        value: root.progress * 10
+    }
+
+    function resetProperties() {
+        transitionView.__fromContentItem.opacity = 1
+        transitionView.__fromContentItem.x = 0
+        transitionView.__fromContentItem.y = 0
+        transitionView.__fromContentItem.z = 0
+        transitionView.__fromContentItem.scale = 1
+
+        transitionView.__toContentItem.opacity = 1
+        transitionView.__toContentItem.x = 0
+        transitionView.__toContentItem.y = 0
+        transitionView.__toContentItem.z = 0
+        transitionView.__toContentItem.scale = 1
+    }
+
     property PropertyAnimation __anim: PropertyAnimation {
         id: anim
         duration: 250
         loops: 1
+        target: root
+        property: "progress"
         onStopped: {
+            timeline.enabled = false
             /* reset all typical properties */
-            transitionView.__fromContentItem.opacity = 1
-            transitionView.__fromContentItem.x = 0
-            transitionView.__fromContentItem.y = 0
-            transitionView.__fromContentItem.z = 0
-            transitionView.__fromContentItem.scale = 1
-
-            transitionView.__toContentItem.opacity = 1
-            transitionView.__toContentItem.x = 0
-            transitionView.__toContentItem.y = 0
-            transitionView.__toContentItem.z = 0
-            transitionView.__toContentItem.scale = 1
+
+            resetProperties()
 
             root.finished()
             root.transitionView.__setupCurrentItem()
+            root.progress = 0
         }
     }
 
diff --git a/examples/TransitionItem/PageFadeEffect.qml b/examples/TransitionItem/imports/TransitionView/PageFadeEffect.qml
index 55ad981..8eb4707 100644
--- a/examples/TransitionItem/PageFadeEffect.qml
+++ b/examples/TransitionItem/imports/TransitionView/PageFadeEffect.qml
@@ -29,41 +29,53 @@
 
 import QtQuick 2.10
 import TransitionItem 1.0
+import QtQuick.Timeline 1.0
 
 PageEffect {
     id: effect
     //Fade Effect
     duration: 250
     onStarted: {
-        anim01.target = transitionView.__fromContentItem
-        anim02.target = transitionView.__toContentItem
-        anim.start()
+        group01.target = transitionView.__fromContentItem
+        group02.target = transitionView.__toContentItem
     }
 
-    property ParallelAnimation __FadeAnim: ParallelAnimation {
-        id: anim
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
 
-        loops: 1
-        PropertyAnimation {
-            id: anim01
-            duration: effect.duration
             property: "opacity"
-            from: 1
-            to: 0
-            easing: effect.easing
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
         }
 
-        PropertyAnimation {
-            id: anim02
-            duration: effect.duration
+        KeyframeGroup {
+            id: group02
+
             property: "opacity"
-            from: 0
-            to: 1
-            easing: effect.easing
-        }
-    }
 
-    onFinished: {
+            Keyframe {
+                frame: 0
+                value: 0
+            }
 
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
     }
 }
diff --git a/examples/TransitionItem/imports/TransitionView/PagePushLeftEffect.qml b/examples/TransitionItem/imports/TransitionView/PagePushLeftEffect.qml
new file mode 100644
index 0000000..e2fd55d
--- /dev/null
+++ b/examples/TransitionItem/imports/TransitionView/PagePushLeftEffect.qml
@@ -0,0 +1,156 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import TransitionItem 1.0
+import QtQuick.Timeline 1.0
+
+PageEffect {
+    id: effect
+
+    property real scale: 1
+    property real opacity: 1
+
+    duration: 250
+    onStarted: {
+        group01.target = transitionView.__fromContentItem
+        group02.target = transitionView.__toContentItem
+        group03.target = transitionView.__fromContentItem
+        group04.target = transitionView.__toContentItem
+        group05.target = transitionView.__fromContentItem
+        group06.target = transitionView.__toContentItem
+    }
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.transitionView.width
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group02
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: -effect.transitionView.width
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group03
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.scale
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group04
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: effect.scale
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group05
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.opacity
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group06
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: effect.opacity
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+    }
+}
diff --git a/examples/TransitionItem/imports/TransitionView/PagePushRightEffect.qml b/examples/TransitionItem/imports/TransitionView/PagePushRightEffect.qml
new file mode 100644
index 0000000..45e0b14
--- /dev/null
+++ b/examples/TransitionItem/imports/TransitionView/PagePushRightEffect.qml
@@ -0,0 +1,156 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import TransitionItem 1.0
+import QtQuick.Timeline 1.0
+
+PageEffect {
+    id: effect
+
+    property real scale: 1
+    property real opacity: 1
+
+    duration: 250
+    onStarted: {
+        group01.target = transitionView.__fromContentItem
+        group02.target = transitionView.__toContentItem
+        group03.target = transitionView.__fromContentItem
+        group04.target = transitionView.__toContentItem
+        group05.target = transitionView.__fromContentItem
+        group06.target = transitionView.__toContentItem
+    }
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: -effect.transitionView.width
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group02
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: effect.transitionView.width
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group03
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.scale
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group04
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: effect.scale
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group05
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.opacity
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group06
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: effect.opacity
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+    }
+}
diff --git a/examples/TransitionItem/PageSlideDownEffect.qml b/examples/TransitionItem/imports/TransitionView/PageSlideDownEffect.qml
index 058fc41..df31a26 100644
--- a/examples/TransitionItem/PageSlideDownEffect.qml
+++ b/examples/TransitionItem/imports/TransitionView/PageSlideDownEffect.qml
@@ -29,29 +29,36 @@
 
 import QtQuick 2.10
 import TransitionItem 1.0
+import QtQuick.Timeline 1.0
 
 PageEffect {
     id: effect
 
     duration: 250
     onStarted: {
-        anim02.target = transitionView.__fromContentItem
-        anim02.target.z = 1
-        anim.start()
+        group01.target = transitionView.__fromContentItem
+        group01 .target.z = 1
     }
 
-    property ParallelAnimation __FadeAnim: ParallelAnimation {
-        id: anim
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
 
-        loops: 1
+        KeyframeGroup {
+            id: group01
 
-        PropertyAnimation {
-            id: anim02
-            duration: effect.duration
             property: "y"
-            from: 0
-            to: transitionView.height
-            easing: effect.easing
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: transitionView.height
+                easing: effect.easing
+            }
         }
     }
 }
diff --git a/examples/TransitionItem/PageSlideLeftEffect.qml b/examples/TransitionItem/imports/TransitionView/PageSlideLeftEffect.qml
index c9d9165..182cd35 100644
--- a/examples/TransitionItem/PageSlideLeftEffect.qml
+++ b/examples/TransitionItem/imports/TransitionView/PageSlideLeftEffect.qml
@@ -29,28 +29,33 @@
 
 import QtQuick 2.10
 import TransitionItem 1.0
+import QtQuick.Timeline 1.0
 
 PageEffect {
     id: effect
 
     duration: 250
-    onStarted: {
-        anim02.target = transitionView.__toContentItem
-        anim.start()
-    }
+    onStarted: group01.target = transitionView.__toContentItem
 
-    property ParallelAnimation __FadeAnim: ParallelAnimation {
-        id: anim
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
 
-        loops: 1
+        KeyframeGroup {
+            id: group01
 
-        PropertyAnimation {
-            id: anim02
-            duration: effect.duration
             property: "x"
-            from: -transitionView.width
-            to: 0
-            easing: effect.easing
+
+            Keyframe {
+                frame: 0
+                value: -transitionView.width
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
         }
     }
 }
diff --git a/examples/TransitionItem/PageSlideRightEffect.qml b/examples/TransitionItem/imports/TransitionView/PageSlideRightEffect.qml
index d0782f6..4bdf4ef 100644
--- a/examples/TransitionItem/PageSlideRightEffect.qml
+++ b/examples/TransitionItem/imports/TransitionView/PageSlideRightEffect.qml
@@ -29,28 +29,33 @@
 
 import QtQuick 2.10
 import TransitionItem 1.0
+import QtQuick.Timeline 1.0
 
 PageEffect {
     id: effect
 
     duration: 250
-    onStarted: {
-        anim02.target = transitionView.__toContentItem
-        anim.start()
-    }
+    onStarted: group01.target = transitionView.__toContentItem
 
-    property ParallelAnimation __FadeAnim: ParallelAnimation {
-        id: anim
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
 
-        loops: 1
+        KeyframeGroup {
+            id: group01
 
-        PropertyAnimation {
-            id: anim02
-            duration: effect.duration
             property: "x"
-            from: transitionView.width
-            to: 0
-            easing: effect.easing
+
+            Keyframe {
+                frame: 0
+                value:transitionView.width
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
         }
     }
 }
diff --git a/examples/TransitionItem/PageSlideUpEffect.qml b/examples/TransitionItem/imports/TransitionView/PageSlideUpEffect.qml
index f83a773..3561562 100644
--- a/examples/TransitionItem/PageSlideUpEffect.qml
+++ b/examples/TransitionItem/imports/TransitionView/PageSlideUpEffect.qml
@@ -29,28 +29,33 @@
 
 import QtQuick 2.10
 import TransitionItem 1.0
+import QtQuick.Timeline 1.0
 
 PageEffect {
     id: effect
 
     duration: 250
-    onStarted: {
-        anim02.target = transitionView.__toContentItem
-        anim.start()
-    }
+    onStarted: group01.target = transitionView.__toContentItem
 
-    property ParallelAnimation __FadeAnim: ParallelAnimation {
-        id: anim
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
 
-        loops: 1
+        KeyframeGroup {
+            id: group01
 
-        PropertyAnimation {
-            id: anim02
-            duration: effect.duration
             property: "y"
-            from: transitionView.height
-            to: 0
-            easing: effect.easing
+
+            Keyframe {
+                frame: 0
+                value: transitionView.height
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
         }
     }
 }
diff --git a/examples/TransitionItem/PageTransition.qml b/examples/TransitionItem/imports/TransitionView/PageTransition.qml
index fa32169..f4ec7b5 100644
--- a/examples/TransitionItem/PageTransition.qml
+++ b/examples/TransitionItem/imports/TransitionView/PageTransition.qml
@@ -42,12 +42,22 @@ QtObject {
 
     property var transitionView: Item {}
 
-    function __start(current, next) {
+    property real progress: effect.progress
+
+    function __start() {
+        root.effect.start()
+    }
+
+    function __enable() {
+        effect.enable()
+    }
+
+    function __reset(current, next) {
         root.effect.from = current
         root.effect.to = next
         root.effect.transitionView = root.transitionView
 
-        root.effect.start()
+        root.effect.reset()
     }
 
     function __stop(current, next) {
diff --git a/examples/TransitionItem/imports/TransitionView/SwipeInteraction.qml b/examples/TransitionItem/imports/TransitionView/SwipeInteraction.qml
new file mode 100644
index 0000000..df2fa58
--- /dev/null
+++ b/examples/TransitionItem/imports/TransitionView/SwipeInteraction.qml
@@ -0,0 +1,119 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+
+import QtQuick 2.12
+import TransitionItem 1.0
+import QtQuick.Controls 2.3
+import QtQuick.Timeline 1.0
+
+Item {
+    id: root
+    property var transitionView
+    property var list
+    parent: transitionView
+    anchors.fill: parent
+    z: -1
+
+    property real threshold: 35
+
+    property bool horizontal: true
+
+    property Item __activeItem
+
+    property bool __reactToTransition: false
+
+
+    Timer {
+        id: blocker
+        running: false
+        interval: 200
+        repeat: false
+        onTriggered: handler.enabled = true
+
+    }
+
+    Connections {
+        target: transitionView
+        onTransitionFinished: {
+            if (!root.__reactToTransition)
+                return
+            /* This is a tricky one. We have to also update the list.
+               The connection could be also done the other way around */
+            list.currentItem = root.__activeItem
+            root.__reactToTransition = false
+        }
+    }
+
+    DragHandler {
+        id: handler
+        xAxis.enabled: root.horizontal
+        yAxis.enabled: !root.horizontal
+        target: null
+        enabled: true
+
+        function distance() {
+            if (root.horizontal)
+                return (centroid.position.x - centroid.pressPosition.x) / transitionView.width
+            return -(centroid.position.y - centroid.pressPosition.y) / transitionView.height
+        }
+
+        onActiveChanged: {
+
+            if (handler.active) {
+                if (distance() < 0)
+                    transitionView.nextItem = list.nextItem
+                else
+                    transitionView.nextItem = list.prevItem
+
+                transitionView.scheduleTransition()
+                transitionView.currentTransition.effect.enable()
+            } else {
+                var p = Math.abs(distance()) * 100
+                if (transitionView.currentTransition.effect.progress > root.threshold) {
+                    root.__activeItem = transitionView.nextItem
+                    root.__reactToTransition = true
+                    transitionView.currentTransition.__start()
+                } else {
+                    transitionView.currentTransition.effect.abort()
+                }
+                /* Block for 100ms */
+                handler.enabled = false
+                blocker.start()
+            }
+        }
+
+        onCentroidChanged: {
+            var p = Math.abs(distance()) * 100
+
+            if (view.currentTransition)
+                view.currentTransition.effect.progress = p * 2
+        }
+    }
+}
diff --git a/examples/TransitionItem/imports/TransitionView/TransitionList.qml b/examples/TransitionItem/imports/TransitionView/TransitionList.qml
new file mode 100644
index 0000000..4e617c7
--- /dev/null
+++ b/examples/TransitionItem/imports/TransitionView/TransitionList.qml
@@ -0,0 +1,101 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.12
+
+QtObject {
+    id: list
+    property Item intialItem
+    //has next prev and most likely currentIndex, count
+    property var items
+
+    property Item nextItem
+    property Item prevItem
+
+    property Item currentItem
+
+    onCurrentItemChanged:  {
+
+        var currentIndex = list.__indexForCurrentItem()
+
+        if (currentIndex < (list.items.length - 1))
+            list.nextItem = list.items[currentIndex + 1]
+        if (currentIndex > 0)
+            list.prevItem = list.items[currentIndex - 1]
+
+    }
+
+    function __indexForCurrentItem() {
+        var currentIndex = -1
+        for (var i = 0; i < list.items.length; ++i) {
+            var item = list.items[i]
+            if (item === list.currentItem)
+                currentIndex = i
+        }
+        return currentIndex
+    }
+
+    property int length: items.length
+
+    function next() {
+        var currentIndex = list.__indexForCurrentItem()
+
+        list.nextItem = null
+
+        if (currentIndex > -1 && (currentIndex < list.items.length - 1)) {
+            list.prevItem = list.items[currentIndex]
+            list.currentItem = list.items[currentIndex + 1]
+            if (currentIndex + 2 < list.items.length)
+                list.nextItem = list.items[currentIndex + 2]
+        }
+    }
+
+    function prev() {
+        var currentIndex = list.__indexForCurrentItem()
+
+        list.prevItem = null
+
+        if (currentIndex > 0 && currentIndex < (list.items.length)) {
+            if (currentIndex - 2 >= 0)
+                list.prevItem = list.items[currentIndex - 2]
+            list.currentItem = list.items[currentIndex - 1]
+
+            list.nextItem = list.items[currentIndex]
+        }
+    }
+
+    Component.onCompleted: {
+        list.currentItem = list.intialItem
+        var currentIndex = list.__indexForCurrentItem()
+        if (currentIndex < (list.items.length - 1))
+            list.nextItem = list.items[currentIndex + 1]
+        if (currentIndex > 0)
+            list.prevItem = list.items[currentIndex - 1]
+    }
+}
diff --git a/examples/TransitionItem/TransitionView.qml b/examples/TransitionItem/imports/TransitionView/TransitionView.qml
index bdef215..a00747c 100644
--- a/examples/TransitionItem/TransitionView.qml
+++ b/examples/TransitionItem/imports/TransitionView/TransitionView.qml
@@ -38,10 +38,14 @@ Item {
     property PageTransition defaultTransition
 
     property PageTransition currentTransition
+
     property PageTransition __forceTransition
 
     property list<PageTransition> transitions
 
+    property Item interaction: Item {
+    }
+
     enum EffectEnum {
         Instant,
         Dissolve,
@@ -51,16 +55,54 @@ Item {
 
     default property alias item: stack.children
 
+    property Item nextItem
+
     property Item currentItem
+    property Item activatedItem
+    property Item lastItem
     property int currentIndex: 0
 
     property int maxIndex: 0
 
+    signal transitionFinished
+
     Item {
         id: stack
         visible: false
     }
 
+    property bool __isCompleted: false
+
+    property real progress: 0
+
+    property bool __blockSchedule: false
+
+    onActivatedItemChanged: {
+        if (!__isCompleted)
+            return
+
+        if (root.activatedItem === root.currentItem)
+            return;
+
+        root.nextItem = root.activatedItem
+
+        for (var i = 0; i <  root.allChildren.length; ++i) {
+            if (root.allChildren[i] === root.activatedItem)
+                root.currentIndex = i
+        }
+    }
+
+    function resetCurrentIndex() {
+        root.__blockSchedule = true
+        root.lastItem = root.currentItem
+        //root.currentItem = root.nextItem
+        for (var i = 0; i <  root.allChildren.length; ++i) {
+            if (root.allChildren[i] === root.currentItem)
+                root.currentIndex = i
+        }
+        root.__blockSchedule = false
+    }
+
     Component.onCompleted: {
         root.maxIndex = stack.children.length - 1
 
@@ -81,17 +123,19 @@ Item {
         }
 
         __setupCurrentItem()
+        __isCompleted = true
     }
 
-    onCurrentIndexChanged: {
-        var nextItem = root.allChildren[root.currentIndex]
+    function scheduleTransition()
+    {
+        root.progress = 0
 
         var pageTransition = null
 
         /* find correct transition */
         for (var i = 0; i < root.transitions.length; ++i) {
             var t = root.transitions[i]
-            if ((t.from === root.currentItem) && (t.to === nextItem)) {
+            if ((t.from === root.currentItem) && (t.to === root.nextItem)) {
                 pageTransition = t
             }
         }
@@ -110,17 +154,46 @@ Item {
             pageTransition = __forceTransition
         __forceTransition = null
 
-        pageTransition.__start(root.currentItem, nextItem)
+        root.currentTransition = pageTransition
+        root.currentTransition.__reset(root.currentItem, root.nextItem)
+
+        root.progress = Qt.binding(function () {
+            if (root.currentTransition)
+                return root.currentTransition.progress
+            return 0
+        })
+    }
+
+    onCurrentIndexChanged: {
+        root.nextItem = root.allChildren[root.currentIndex]
+
+       if (root.nextItem === root.currentItem)
+            return
+
+        if (root.__blockSchedule)
+            return
+
+
+        scheduleTransition()
+
+        root.lastItem = root.currentItem
+
+        root.currentTransition.__start()
     }
 
     function __setupCurrentItem() {
         if (root.currentItem)
             root.currentItem.parent = stack
 
-        root.currentItem = root.allChildren[root.currentIndex]
+        if (root.nextItem)
+            root.currentItem = root.nextItem
+        else
+            root.currentItem = root.allChildren[root.currentIndex]
+
 
         root.currentItem.parent = root
         root.currentTransition = null
+        transitionFinished()
     }
 
     function gotoPage(transition) {
diff --git a/examples/TransitionItem/imports/TransitionView/qmldir b/examples/TransitionItem/imports/TransitionView/qmldir
new file mode 100644
index 0000000..8217ba0
--- /dev/null
+++ b/examples/TransitionItem/imports/TransitionView/qmldir
@@ -0,0 +1,14 @@
+DefaultPageEffect 1.0 DefaultPageEffect.qml
+SwipeInteraction 1.0 SwipeInteraction.qml
+PageEffect 1.0 PageEffect.qml
+PageFadeEffect 1.0 PageFadeEffect.qml
+PagePushLeftEffect 1.0 PagePushLeftEffect.qml
+PagePushRightEffect 1.0 PagePushRightEffect.qml
+PageSlideDownEffect 1.0 PageSlideDownEffect.qml
+PageSlideLeftEffect 1.0 PageSlideLeftEffect.qml
+PageSlideRightEffect 1.0 PageSlideRightEffect.qml
+PageSlideUpEffect 1.0 PageSlideUpEffect.qml
+PageTransition 1.0 PageTransition.qml
+TransitionList 1.0 TransitionList.qml
+TransitionView 1.0 TransitionView.qml
+
diff --git a/examples/TransitionItem/qtquickcontrols2.conf b/examples/TransitionItem/qtquickcontrols2.conf
index 8c6dd80..b6c7c87 100644
--- a/examples/TransitionItem/qtquickcontrols2.conf
+++ b/examples/TransitionItem/qtquickcontrols2.conf
@@ -1,2 +1,2 @@
 [Controls]
-Style=Universal
+Style=Material