From 55ae212c543ff0e44b9d53d068eddf87ea261629 Mon Sep 17 00:00:00 2001
From: saiminh <saiminh@gmail.com>
Date: Tue, 17 Oct 2023 11:30:41 +0200
Subject: [PATCH] change animation sequence

---
 src/lib/components/HomeIlluShapes.svelte | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/HomeIlluShapes.svelte b/src/lib/components/HomeIlluShapes.svelte
index b479ec1..f2b14cf 100644
--- a/src/lib/components/HomeIlluShapes.svelte
+++ b/src/lib/components/HomeIlluShapes.svelte
@@ -33,17 +33,27 @@
     }
 
     const randomMorph = (shape: HTMLElement, index: number = 0) => {
-      const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
+      // const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
+      let randomShape;
 
-      let rowindex = (index: number) => {
-        return index % 5;
-      };
+      //do a Math.random() to determine which of the 4 shapes to morph to, but give the sphere a lower chance
+      let rand = Math.floor(Math.random() * 10);
+      if (rand === 0) {
+        randomShape = shapes[0];
+      } else {
+        randomShape = shapes[Math.floor(Math.random() * 3) + 1];
+      }
+
+      // let rowindex = (index: number) => {
+      //   return index % 5;
+      // };
       gsap.to(shape, { 
         duration: 1, 
         rotationZ: "+=" + generateAngle(), 
         morphSVG: randomShape, 
         ease: 'power4.out', 
-        delay: rowindex(index) * 0.05,
+        // delay: rowindex(index),
+        delay: Math.random()*5,
         onComplete: () => { setTimeout( () => randomMorph(shape),  2000 ) } 
     });
     }