launcher fully animated

Launcher.qml

@@ -26,11 +26,14 @@ PanelWindow {
     }
     function open() {
         input.text = ""
-        visible = true
+        root.visible = true
+        exit.stop();
+        entry.start();
     }
     function close() {
         input.text = ""
-        visible = false
+        entry.stop();
+        exit.start();
     }
 
     property var currentItems: {
@@ -57,6 +60,10 @@ PanelWindow {
         }
         color: "#181818"
         height: currentItems.length ? 180 : 60
+        Behavior on height { NumberAnimation {
+            duration: 300
+            easing.type: Easing.OutQuint
+        }}
         width: 700
         radius: 12
 
@@ -115,14 +122,58 @@ PanelWindow {
             highlightFollowsCurrentItem: true
             orientation: ListView.Horizontal
             spacing: 6
-            model: currentItems.slice(0, 5)
+
+            add: Transition { NumberAnimation {
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: 150
+            }}
+            remove: Transition { NumberAnimation {
+                property: "opacity"
+                from: 1
+                to: 0
+                duration: 150
+            }}
+            displaced: Transition {
+                NumberAnimation {
+                    property: "x"
+                    duration: 300
+                    easing.type: Easing.OutQuint
+                    onStarted: console.log("displaced")
+                }
+                NumberAnimation {
+                    property: "opacity"
+                    to: 1
+                    duration: 150
+                }
+            }
+
+            model: ScriptModel {values: currentItems.slice(0, 5)}
             delegate: Rectangle {
+                id: item
                 anchors {
-                    top: parent.top
+                    top: parent?.top
-                    bottom: parent.bottom
+                    bottom: parent?.bottom
                 }
                 width: (700 - 6*6)/5
-                color: ListView.isCurrentItem ? "#222222" : "#181818"
+                color: "#20181818"
+                ListView.onIsCurrentItemChanged: ListView.isCurrentItem ? selectAnim.start() : deselectAnim.start()
+                property var selectAnim: ColorAnimation {
+                    target: item
+                    property: "color"
+                    to: "#10ffffff"
+                    duration: 200
+                    easing.type: Easing.OutQuint
+                }
+                property var deselectAnim: ColorAnimation {
+                    target: item
+                    onStarted: selectAnim.stop()
+                    property: "color"
+                    to: "#00181818"
+                    duration: 200
+                    easing.type: Easing.InQuint
+                }
                 radius: 10
                 function execute() { 
                     modelData.emoji 
@@ -162,5 +213,35 @@ PanelWindow {
                 }
             }
         }
+        transform: Translate {
+            y: -50
+            NumberAnimation on y {
+                id: entry
+                to: 0
+                duration: 300
+                easing.type: Easing.OutQuint
+            }
+            NumberAnimation on y {
+                id: exit
+                to: -50
+                duration: 300
+                easing.type: Easing.InQuint
+                onFinished: root.visible = false
+            }
+        }
+        opacity: 0
+        NumberAnimation on opacity {
+            running: entry.running
+            to: 1
+            duration: entry.duration/2
+        }
+        SequentialAnimation on opacity {
+            running: exit.running
+            PauseAnimation {duration: exit.duration/2}
+            NumberAnimation {
+                to: 0
+                duration: exit.duration/2
+            }
+        }
     }
 }