--- a/svghmi/svghmi.js	Mon Jun 13 11:57:37 2022 +0200
+++ b/svghmi/svghmi.js	Mon Jun 13 12:03:58 2022 +0200
@@ -202,6 +202,17 @@
     });
 }
 
+
+function fading_page_switch(...args){
+    svg_root.classList.add("fade-out-page");
+
+    setTimeout(function(){
+        switch_page(...args);
+        svg_root.classList.remove("fade-out-page");
+    },10);
+}
+document.body.style.backgroundColor = "black";
+
 // subscribe to per instance current page hmi variable
 // PLC must prefix page name with "!" for page switch to happen
 subscribers(current_page_var_index).add({
@@ -209,7 +220,7 @@
     indexes: [current_page_var_index],
     new_hmi_value: function(index, value, oldval) {
         if(value.startsWith("!"))
-            switch_page(value.slice(1));
+            fading_page_switch(value.slice(1));
     }
 });