2 files changed, 64 insertions, 29 deletions

diff --git a/examples/quick/animation/behaviors/tvtennis.qml b/examples/quick/animation/behaviors/tvtennis.qml
index 0b8ba15ad7..4a55448ad7 100644
--- a/examples/quick/animation/behaviors/tvtennis.qml
+++ b/examples/quick/animation/behaviors/tvtennis.qml
@@ -8,30 +8,67 @@ Rectangle {
     width: 320; height: 480;
     color: "#1e1b18"
 
+    state: "right"
+    states: [
+        State {
+            name: "left"
+            PropertyChanges {
+                leftBat {
+                    y: (ball.y + ball.height / 2) - leftBat.height / 2
+                }
+                rightBat {
+                    y: page.height / 2 - rightBat.height / 2
+                }
+            }
+        },
+        State {
+            name: "right"
+            PropertyChanges {
+                rightBat {
+                    y: (ball.y + ball.height / 2) - rightBat.height / 2
+                }
+                leftBat {
+                    y: page.height / 2 - leftBat.height / 2
+                }
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "left"; to: "right"
+            NumberAnimation { property: "y"; easing.type: Easing.InOutQuad; duration: 200}
+        },
+        Transition {
+            from: "right"; to: "left"
+            NumberAnimation { property: "y"; easing.type: Easing.InOutQuad; duration: 200}
+        }
+    ]
+
     // Make a ball to bounce
     Rectangle {
         id: ball
 
-        // Add a property for the target y coordinate
-        property variant direction : "right"
-
-        x: 20; width: 20; height: 20; z: 1
+        width: 20
+        height: 20
+        z: 1
         color: "#80c342"
 
         // Move the ball to the right and back to the left repeatedly
         SequentialAnimation on x {
             loops: Animation.Infinite
             NumberAnimation { to: page.width - 40; duration: 2000 }
-            PropertyAction { target: ball; property: "direction"; value: "left" }
+            PropertyAction { target: page; property: "state"; value: "left" }
             NumberAnimation { to: 20; duration: 2000 }
-            PropertyAction { target: ball; property: "direction"; value: "right" }
+            PropertyAction { target: page; property: "state"; value: "right" }
         }
 
         // Make y move with a velocity of 200
-        Behavior on y { SpringAnimation{ velocity: 200; }
+        Behavior on y {
+            SpringAnimation { velocity: 200; }
         }
 
-        Component.onCompleted: y = page.height-10; // start the ball motion
+        Component.onCompleted: y = page.height - 10; // start the ball motion
 
         // Detect the ball hitting the top or bottom of the view and bounce it
         onYChanged: {
@@ -48,31 +85,27 @@ Rectangle {
     Rectangle {
         id: leftBat
         color: "#328930"
-        x: 2; width: 20; height: 90
-        // ![0]
-        y: ball.direction == 'left' ? ball.y - 45 : page.height/2 -45;
-        Behavior on y { SpringAnimation{ velocity: 300 } }
-        // ![0]
+        width: 20; height: 90
+        x: 2;
     }
     Rectangle {
         id: rightBat
         color: "#328930"
-        x: page.width - 22; width: 20; height: 90
-        y: ball.direction == 'right' ? ball.y - 45 : page.height/2 -45;
-        Behavior on y { SpringAnimation{ velocity: 300 } }
+        width: 20; height: 90
+        x: page.width - width - 2
     }
 
     // The rest, to make it look realistic, if neither ever scores...
-    Rectangle { color: "#328930"; x: page.width/2-80; y: 0; width: 40; height: 60 }
-    Rectangle { color: "#1e1b18"; x: page.width/2-70; y: 10; width: 20; height: 40 }
-    Rectangle { color: "#328930"; x: page.width/2+40; y: 0; width: 40; height: 60 }
-    Rectangle { color: "#1e1b18"; x: page.width/2+50; y: 10; width: 20; height: 40 }
+    Rectangle { color: "#328930"; x: page.width / 2 - 80; y: 0; width: 40; height: 60 }
+    Rectangle { color: "#1e1b18"; x: page.width / 2 - 70; y: 10; width: 20; height: 40 }
+    Rectangle { color: "#328930"; x: page.width / 2 + 40; y: 0; width: 40; height: 60 }
+    Rectangle { color: "#1e1b18"; x: page.width / 2 + 50; y: 10; width: 20; height: 40 }
     Repeater {
         model: page.height / 20
-        Rectangle {
+        delegate: Rectangle {
             required property int index
             color: "#328930"
-            x: page.width / 2 - 5
+            x: parent.width / 2 - 5
             y: index * 20
             width: 10
             height: 10
diff --git a/examples/quick/animation/behaviors/wigglytext.qml b/examples/quick/animation/behaviors/wigglytext.qml
index 712078866d..1b987f6391 100644
--- a/examples/quick/animation/behaviors/wigglytext.qml
+++ b/examples/quick/animation/behaviors/wigglytext.qml
@@ -4,26 +4,28 @@
 import QtQml
 import QtQuick
 
+pragma ComponentBehavior: Bound
+
 Rectangle {
     id: container
 
-    property string text: "Drag me!"
+    property string text: qsTr("Drag me!")
     property bool animated: true
 
     width: 320; height: 480; color: "#474747"; focus: true
 
     Keys.onPressed: (event) => {
-        if (event.key == Qt.Key_Delete || event.key == Qt.Key_Backspace)
+        if (event.key === Qt.Key_Delete || event.key === Qt.Key_Backspace)
             container.remove()
-        else if (event.text != "") {
+        else if (event.text !== "") {
             container.append(event.text)
         }
     }
 
     function append(text) {
         container.animated = false
-        var lastLetter = container.children[container.children.length - 1]
-        var newLetter = letterComponent.createObject(container)
+        const lastLetter = container.children[container.children.length - 1]
+        let newLetter = letterComponent.createObject(container)
         newLetter.text = text
         newLetter.follow = lastLetter
         container.animated = true
@@ -36,8 +38,8 @@ Rectangle {
 
     function doLayout() {
         var follow = null
-        for (var i = 0; i < container.text.length; ++i) {
-            var newLetter = letterComponent.createObject(container)
+        for (let i = 0; i < container.text.length; ++i) {
+            let newLetter = letterComponent.createObject(container)
             newLetter.text = container.text[i]
             newLetter.follow = follow
             follow = newLetter