diff --git a/examples/fancy-switches/DarkModeSwitch.slint b/examples/fancy-switches/DarkModeSwitch.slint
index 6816d0f9b..809eef454 100644
--- a/examples/fancy-switches/DarkModeSwitch.slint
+++ b/examples/fancy-switches/DarkModeSwitch.slint
@@ -3,7 +3,6 @@
 
 component RayThick {
     in-out property colorize <=> i.colorize;
-    in-out property rotation <=> i.rotation-angle;
     width: 0px;
     height: 0px;
 
@@ -18,7 +17,6 @@ component RayThick {
 
 component RayThin {
     in-out property colorize <=> i.colorize;
-    in-out property rotation <=> i.rotation-angle;
     width: 0px;
     height: 0px;
 
@@ -37,14 +35,13 @@ component SunIcon {
     property <length> sun-size: 28px;
     property <length> gap: 8px;
     in property <brush> color: black;
-    in property <float> scale: 1;
     width: 80px;
     height: self.width;
     Rectangle {
         width: 0px;
         height: 0px;
         Rectangle {
-            width: sun-size * scale;
+            width: sun-size;
             height: self.width;
             border-radius: self.width / 2;
             background: transparent;
@@ -52,19 +49,16 @@ component SunIcon {
             border-width: 5px;
         }
         for i in rays: RayThick {
-            property <angle> angle: i * 360deg / rays;
+            x: (sun-size / 2 + gap) * self.rotation-angle.cos();
+            y: (sun-size / 2 + gap) * self.rotation-angle.sin();
             colorize: root.color;
-            x: (sun-size / 2 + gap) * scale * angle.cos();
-            y: (sun-size / 2 + gap) * scale * angle.sin();
-
-            rotation: angle;
+            rotation-angle: i * 360deg / rays;
         }
         for i in rays: RayThin {
-            property <angle> angle: i * (360deg / rays) + 45deg;
+            x: (sun-size / 2 + gap) * self.rotation-angle.cos();
+            y: (sun-size / 2 + gap) * self.rotation-angle.sin();
             colorize: root.color;
-            x: (sun-size / 2 + gap) * angle.cos();
-            y: (sun-size / 2 + gap) * angle.sin();
-            rotation: angle;
+            rotation-angle: i * (360deg / rays) + 45deg;
         }
     }
 }
@@ -129,13 +123,14 @@ export component DarkModeSwitch {
             frameBacker.background: #2A2A2A;
             moon.rotation-angle: -20deg;
             sun.color: #fc7a10;
-            sun.scale: 0.8;
+            sun.scale-x: 0.8;
+            sun.scale-y: 0.8;
             in {
                 animate thumb.x, thumb.background, frameBacker.background, sun.color {
                     duration: 200ms;
                     easing: ease-out-sine;
                 }
-                animate moon.rotation-angle, sun.scale {
+                animate moon.rotation-angle, sun.scale-x, sun.scale-y {
                     duration: 1200ms;
                     easing: ease-out-elastic;
                 }
@@ -148,13 +143,14 @@ export component DarkModeSwitch {
             frameBacker.background: transparent;
             moon.rotation-angle: 20deg;
             sun.color: #2A2A2A;
-            sun.scale: 1;
+            sun.scale-x: 1;
+            sun.scale-y: 1;
             in {
                 animate thumb.x, thumb.background, frameBacker.background, moon.rotation-angle {
                     duration: 200ms;
                     easing: ease-out-sine;
                 }
-                animate sun.scale {
+                animate sun.scale-x, sun.scale-y {
                     duration: 1200ms;
                     easing: ease-out-elastic;
                 }
diff --git a/examples/fancy-switches/SunMoonSwitch.slint b/examples/fancy-switches/SunMoonSwitch.slint
index 2627bc3e5..6379cdd1a 100644
--- a/examples/fancy-switches/SunMoonSwitch.slint
+++ b/examples/fancy-switches/SunMoonSwitch.slint
@@ -7,13 +7,12 @@ global Utils {
     }
 }
 component SunMoonThumb {
-    in property <float> scale: 1;
-    in property <length> thumb-position: 50px * scale;
+    in property <length> thumb-position: 50px;
 
 
     Rectangle {
-        width: 200px * scale;
-        height: 100px * scale;
+        width: 200px;
+        height: 100px;
         border-radius: self.height / 2;
         clip: true;
         Rectangle {
@@ -21,21 +20,21 @@ component SunMoonThumb {
             height: 0px;
             x: root.thumb-position;
             Rectangle {
-                width: 260px * scale;
+                width: 260px;
                 height: self.width;
                 background: white;
                 border-radius: self.width / 2;
                 opacity: 0.05;
             }
             Rectangle {
-                width: 200px * scale;
+                width: 200px;
                 height: self.width;
                 background: white;
                 border-radius: self.width / 2;
                 opacity: 0.05;
             }
             Rectangle {
-                width: 140px * scale;
+                width: 140px;
                 height: self.width;
                 background: white;
                 border-radius: self.width / 2;
@@ -43,21 +42,21 @@ component SunMoonThumb {
             }
 
             clipper :=Rectangle {
-                width: 85px * scale;
+                width: 85px;
                 height: self.width;
                 border-radius: self.width / 2;
                 clip: true;
 
                 sun := Rectangle {
-                    width: 85px * scale;
+                    width: 85px;
                     height: self.width;
                     background: @radial-gradient(circle,#ffce08 0%, #fdd224 80%, #fce37f 100%);
                     border-radius: self.width / 2;
                 }
 
                 moon := Rectangle {
-                    x: Utils.MapRange(root.thumb-position, 50px * scale, 100px * scale, 85px * scale, 0px);
-                    width: 85px * scale;
+                    x: Utils.MapRange(root.thumb-position, 50px, 100px, 85px, 0px);
+                    width: 85px;
                     height: self.width;
                     background: @radial-gradient(circle,#bcbcbc 0%, #e7e7e7 80%, #ffffff 100%);
                     border-radius: self.width / 2;
@@ -72,9 +71,8 @@ component SunMoonThumb {
 enum Theme { day, night }
 export component SunMoonSwitch {
     property <Theme> theme: Theme.night;
-    in property <float> scale: 1;
-    width: 200px * scale;
-    height: 100px * scale;
+    width: 200px;
+    height: 100px;
 
     frameBacker := Rectangle {
         width: parent.width;
@@ -91,22 +89,22 @@ export component SunMoonSwitch {
         border-radius: self.height / 2;
 
         clouds-background :=Image {
-            x: 14px * scale;
-            y: -6px * scale;
-            width: 202px * scale;
+            x: 14px;
+            y: -6px;
+            width: 202px;
             source: @image-url("images/clouds-background.png");
         }
         clouds-foreground := Image {
-            x: 30px * scale;
-            y: 5px * scale;
-            width: 202px * scale;
+            x: 30px;
+            y: 5px;
+            width: 202px;
             source: @image-url("images/clouds-front.png");
         }
 
         stars := Image {
-            x: 15px * scale;
-            y: 15px * scale;
-            width: 80px * scale;
+            x: 15px;
+            y: 15px;
+            width: 80px;
             source: @image-url("images/stars.png");
         }
     }
@@ -114,13 +112,12 @@ export component SunMoonSwitch {
 
 
     Image {
-        x: -1px * scale;
-        width: 202px * scale;
+        x: -1px;
+        width: 202px;
         source: @image-url("images/shadow-frame.png");
     }
 
     thumb := SunMoonThumb {
-        scale: root.scale;
      }
 
     TouchArea {
@@ -135,7 +132,7 @@ export component SunMoonSwitch {
 
     states [
         nightMode when root.theme == Theme.night: {
-            thumb.thumb-position: root.width - thumb.width - 50px * scale;
+            thumb.thumb-position: root.width - thumb.width - 50px;
             frameBacker.background: #1e2232;
             clouds-background.y: 120px;
             clouds-foreground.y: 120px;
@@ -155,9 +152,9 @@ export component SunMoonSwitch {
             }
         }
         dayMode when root.theme == Theme.day: {
-            thumb.thumb-position:  50px * scale;
+            thumb.thumb-position:  50px;
             frameBacker.background: #3d85ba;
-            stars.y: - 60px * scale;
+            stars.y: - 60px;
             stars.opacity: 0.4;
             in {
                 animate frameBacker.background, stars.y, stars.opacity {
diff --git a/examples/fancy-switches/demo.slint b/examples/fancy-switches/demo.slint
index 001700260..d2f45c62c 100644
--- a/examples/fancy-switches/demo.slint
+++ b/examples/fancy-switches/demo.slint
@@ -17,6 +17,5 @@ export component AppWindow inherits Window {
     SunMoonSwitch {
         x: 200px;
         y: 250px;
-        scale: 1;
     }
 }