diff --git a/HIG/source/qml/style/animations/Hide.qml b/HIG/source/qml/style/animations/Hide.qml
new file mode 100644
index 0000000..fed3043
--- /dev/null
+++ b/HIG/source/qml/style/animations/Hide.qml
@@ -0,0 +1,100 @@
+/*
+ *   Copyright 2018 Fabian Riethmayer
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Library General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.2
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.2
+import org.kde.kirigami 2.4 as Kirigami
+import "../../lib/annotate.js" as A
+import "../../addr/" as Addr
+import "../../lib/" as HIG
+
+Rectangle {
+    id: root
+    width: 540
+    height: 260
+    property int duration: 600
+
+    InQuad {
+        id: diagram
+        x: 80;
+        y: 10;
+        duration: root.duration
+    }
+    
+    Label {
+        text: "Y Position"
+        anchors.right: diagram.left
+        anchors.verticalCenter: diagram.verticalCenter;
+        anchors.rightMargin: Kirigami.Units.largeSpacing
+    }
+    
+    Label {
+        text: "Time"
+        anchors.top: diagram.bottom
+        anchors.horizontalCenter: diagram.horizontalCenter;
+        anchors.topMargin: Kirigami.Units.largeSpacing
+    }
+
+    
+    
+    Rectangle {
+        id: dot
+        x: 440;
+        y: 210 - width / 2; 
+        height: Kirigami.Units.iconSizes.small
+        width: height
+        color: "#661D99F3"
+        radius: height / 2
+        border.width: 1
+        border.color: "#1D99F3"
+
+            
+        NumberAnimation on y {
+            running: false
+            id: dotAnimation
+            to: 10 - dot.height / 2
+            duration: root.duration
+            easing.type: Easing.InQuad
+        }
+    }
+    
+    Rectangle {
+        id: screen
+        x: 400
+        y: 10
+        width: 100
+        height: 220
+        border.width: 10
+        border.color: "#ccc"
+        color: "#00000000"
+        radius: 5
+    }
+    
+    HIG.FTimer {
+        running: true;
+        onTick: function(frameCounter) {
+            
+            if (frameCounter == 60) {
+               dotAnimation.running = true;
+               diagram.running = true;
+            }
+        }
+    }
+}
diff --git a/HIG/source/qml/style/animations/InOutQuad.qml b/HIG/source/qml/style/animations/InOutQuad.qml
new file mode 100644
index 0000000..c4d9416
--- /dev/null
+++ b/HIG/source/qml/style/animations/InOutQuad.qml
@@ -0,0 +1,86 @@
+/*
+ *   Copyright 2018 Fabian Riethmayer
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Library General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.2
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.2
+import org.kde.kirigami 2.4 as Kirigami
+import "../../lib/annotate.js" as A
+import "../../addr/" as Addr
+import "../../lib/" as HIG
+
+Rectangle {
+    width: 300
+    height: 200
+    property alias running : anim.running
+
+    Canvas {
+        anchors.fill: parent;
+        antialiasing: true
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.stroke();
+            ctx.lineWidth = 1;
+            ctx.moveTo(0, 0);
+            ctx.lineTo(0, 200);
+            ctx.lineTo(300, 200);
+            ctx.stroke();
+            
+            ctx.beginPath();
+            ctx.strokeStyle = "#F00";
+            ctx.moveTo(0, 200);
+            ctx.bezierCurveTo(150, 192, 150, 8, 300, 0);
+            ctx.stroke();
+        }
+    }
+    
+    Rectangle {
+        id: point
+        x: 0 - height / 2; 
+        y: 200 - width / 2; 
+        height: Kirigami.Units.iconSizes.small
+        width: height
+        color: "#661D99F3"
+        radius: height / 2
+        border.width: 1
+        border.color: "#1D99F3"
+    }
+    
+    
+    ParallelAnimation {
+        running: false
+        id: anim
+        
+        NumberAnimation {
+            to: 300 - point.width / 2
+            target: point
+            property: "x"
+            duration: 2000
+            easing.type: Easing.Linear
+        }
+        
+        NumberAnimation {
+            to: 0 - point.height / 2
+            target: point
+            property: "y"
+            duration: 2000
+            easing.type: Easing.InOutQuad
+        }
+    }
+}
diff --git a/HIG/source/qml/style/animations/InQuad.qml b/HIG/source/qml/style/animations/InQuad.qml
new file mode 100644
index 0000000..3606634
--- /dev/null
+++ b/HIG/source/qml/style/animations/InQuad.qml
@@ -0,0 +1,91 @@
+/*
+ *   Copyright 2018 Fabian Riethmayer
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Library General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.2
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.2
+import org.kde.kirigami 2.4 as Kirigami
+import "../../lib/annotate.js" as A
+import "../../addr/" as Addr
+import "../../lib/" as HIG
+
+Rectangle {
+    id: root
+    
+    width: 300
+    height: 200
+    property alias running : anim.running
+    property int duration: 2000
+    
+
+    Canvas {
+        anchors.fill: parent;
+        antialiasing: true
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.stroke();
+            ctx.lineWidth = 1;
+            ctx.moveTo(0, 0);
+            ctx.lineTo(0, 200);
+            ctx.lineTo(300, 200);
+            ctx.stroke();
+            
+            ctx.beginPath();
+            ctx.strokeStyle = "#F00";
+            ctx.moveTo(0, 200);
+            //ctx.bezierCurveTo(150, 192, 150, 8, 300, 0);
+            ctx.quadraticCurveTo(150, 200, 300, 0);
+            ctx.stroke();
+        }
+    }
+    
+    Rectangle {
+        id: point
+        x: 0 - height / 2; 
+        y: 200 - width / 2; 
+        height: Kirigami.Units.iconSizes.small
+        width: height
+        color: "#661D99F3"
+        radius: height / 2
+        border.width: 1
+        border.color: "#1D99F3"
+    }
+    
+    
+    ParallelAnimation {
+        running: false
+        id: anim
+        
+        NumberAnimation {
+            to: 300 - point.width / 2
+            target: point
+            property: "x"
+            duration: root.duration
+            easing.type: Easing.Linear
+        }
+        
+        NumberAnimation {
+            to: 0 - point.height / 2
+            target: point
+            property: "y"
+            duration: root.duration
+            easing.type: Easing.InQuad
+        }
+    }
+}
diff --git a/HIG/source/qml/style/animations/Move.qml b/HIG/source/qml/style/animations/Move.qml
new file mode 100644
index 0000000..9e043b8
--- /dev/null
+++ b/HIG/source/qml/style/animations/Move.qml
@@ -0,0 +1,83 @@
+/*
+ *   Copyright 2018 Fabian Riethmayer
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Library General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.2
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.2
+import org.kde.kirigami 2.4 as Kirigami
+import "../../lib/annotate.js" as A
+import "../../addr/" as Addr
+import "../../lib/" as HIG
+
+Rectangle {
+    width: 480
+    height: 260
+
+    InOutQuad {
+        id: diagram
+        x: 80;
+        y: 10;
+    }
+    
+    Label {
+        text: "Y Position"
+        anchors.right: diagram.left
+        anchors.verticalCenter: diagram.verticalCenter;
+        anchors.rightMargin: Kirigami.Units.largeSpacing
+    }
+    
+    Label {
+        text: "Time"
+        anchors.top: diagram.bottom
+        anchors.horizontalCenter: diagram.horizontalCenter;
+        anchors.topMargin: Kirigami.Units.largeSpacing
+    }
+
+    Rectangle {
+        id: dot
+        x: 440;
+        y: 210 - width / 2; 
+        height: Kirigami.Units.iconSizes.small
+        width: height
+        color: "#661D99F3"
+        radius: height / 2
+        border.width: 1
+        border.color: "#1D99F3"
+
+            
+        NumberAnimation on y {
+            running: false
+            id: dotAnimation
+            to: 10 - dot.height / 2
+            duration: 2000
+            easing.type: Easing.InOutQuad
+        }
+    }
+    
+    HIG.FTimer {
+        running: true;
+        onTick: function(frameCounter) {
+            
+            if (frameCounter == 60) {
+               dotAnimation.running = true;
+               diagram.running = true;
+            }
+        }
+    }
+}
diff --git a/HIG/source/qml/style/animations/OutQuad.qml b/HIG/source/qml/style/animations/OutQuad.qml
new file mode 100644
index 0000000..fee23aa
--- /dev/null
+++ b/HIG/source/qml/style/animations/OutQuad.qml
@@ -0,0 +1,91 @@
+/*
+ *   Copyright 2018 Fabian Riethmayer
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Library General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.2
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.2
+import org.kde.kirigami 2.4 as Kirigami
+import "../../lib/annotate.js" as A
+import "../../addr/" as Addr
+import "../../lib/" as HIG
+
+Rectangle {
+    id: root
+    
+    width: 300
+    height: 200
+    property alias running : anim.running
+    property int duration: 2000
+    
+
+    Canvas {
+        anchors.fill: parent;
+        antialiasing: true
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.stroke();
+            ctx.lineWidth = 1;
+            ctx.moveTo(0, 0);
+            ctx.lineTo(0, 200);
+            ctx.lineTo(300, 200);
+            ctx.stroke();
+            
+            ctx.beginPath();
+            ctx.strokeStyle = "#F00";
+            ctx.moveTo(0, 200);
+            //ctx.bezierCurveTo(150, 192, 150, 8, 300, 0);
+            ctx.quadraticCurveTo(150, 0, 300, 0);
+            ctx.stroke();
+        }
+    }
+    
+    Rectangle {
+        id: point
+        x: 0 - height / 2; 
+        y: 200 - width / 2; 
+        height: Kirigami.Units.iconSizes.small
+        width: height
+        color: "#661D99F3"
+        radius: height / 2
+        border.width: 1
+        border.color: "#1D99F3"
+    }
+    
+    
+    ParallelAnimation {
+        running: false
+        id: anim
+        
+        NumberAnimation {
+            to: 300 - point.width / 2
+            target: point
+            property: "x"
+            duration: root.duration
+            easing.type: Easing.Linear
+        }
+        
+        NumberAnimation {
+            to: 0 - point.height / 2
+            target: point
+            property: "y"
+            duration: root.duration
+            easing.type: Easing.OutQuad
+        }
+    }
+}
diff --git a/HIG/source/qml/style/animations/Show.qml b/HIG/source/qml/style/animations/Show.qml
new file mode 100644
index 0000000..4b9ee06
--- /dev/null
+++ b/HIG/source/qml/style/animations/Show.qml
@@ -0,0 +1,100 @@
+/*
+ *   Copyright 2018 Fabian Riethmayer
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Library General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.2
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.2
+import org.kde.kirigami 2.4 as Kirigami
+import "../../lib/annotate.js" as A
+import "../../addr/" as Addr
+import "../../lib/" as HIG
+
+Rectangle {
+    id: root
+    width: 540
+    height: 260
+    property int duration: 600
+
+    OutQuad {
+        id: diagram
+        x: 80;
+        y: 30;
+        duration: root.duration
+    }
+    
+    Label {
+        text: "Y Position"
+        anchors.right: diagram.left
+        anchors.verticalCenter: diagram.verticalCenter;
+        anchors.rightMargin: Kirigami.Units.largeSpacing
+    }
+    
+    Label {
+        text: "Time"
+        anchors.top: diagram.bottom
+        anchors.horizontalCenter: diagram.horizontalCenter;
+        anchors.topMargin: Kirigami.Units.largeSpacing
+    }
+
+    
+    
+    Rectangle {
+        id: dot
+        x: 440;
+        y: 230 - width / 2; 
+        height: Kirigami.Units.iconSizes.small
+        width: height
+        color: "#661D99F3"
+        radius: height / 2
+        border.width: 1
+        border.color: "#1D99F3"
+
+            
+        NumberAnimation on y {
+            running: false
+            id: dotAnimation
+            to: 30 - dot.height / 2
+            duration: root.duration
+            easing.type: Easing.OutQuad
+        }
+    }
+    
+    Rectangle {
+        id: screen
+        x: 400
+        y: 10
+        width: 100
+        height: 220
+        border.width: 10
+        border.color: "#ccc"
+        color: "#00000000"
+        radius: 5
+    }
+    
+    HIG.FTimer {
+        running: true;
+        onTick: function(frameCounter) {
+            
+            if (frameCounter == 60) {
+               dotAnimation.running = true;
+               diagram.running = true;
+            }
+        }
+    }
+}
diff --git a/HIG/source/qml/style/animations/config.json b/HIG/source/qml/style/animations/config.json
new file mode 100644
index 0000000..8c23be1
--- /dev/null
+++ b/HIG/source/qml/style/animations/config.json
@@ -0,0 +1,14 @@
+{
+    "Move.qml": {
+        "type": "webm",
+        "duration": 4
+    },
+    "Show.qml": {
+        "type": "webm",
+        "duration": 4
+    },
+    "Hide.qml": {
+        "type": "webm",
+        "duration": 4
+    }
+}