From cd878fffb81e750bb77c0772fabb285e5c681155 Mon Sep 17 00:00:00 2001
From: Solomon Laing <solomonlaing@protonmail.com>
Date: Fri, 11 Apr 2025 16:26:02 +0930
Subject: [PATCH] better demo animation

---
 main.js => cards.js |   0
 demo.js             |  72 +++++++++++++++++++++++++++++++
 index.html          | 103 ++------------------------------------------
 style.css           |  14 +++---
 4 files changed, 84 insertions(+), 105 deletions(-)
 rename main.js => cards.js (100%)
 create mode 100644 demo.js

diff --git a/main.js b/cards.js
similarity index 100%
rename from main.js
rename to cards.js
diff --git a/demo.js b/demo.js
new file mode 100644
index 0000000..e5ccf4f
--- /dev/null
+++ b/demo.js
@@ -0,0 +1,72 @@
+const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
+const fragment = document.createDocumentFragment();
+const grid = [17, 6];
+const col = grid[0];
+const row = grid[1];
+const numberOfElements = col * row;
+
+for (let i = 0; i < numberOfElements; i++) {
+    let div = document.createElement('div');
+    div.className = 'part';
+    fragment.appendChild(div);
+}
+
+staggerVisualizerEl.appendChild(fragment);
+
+const staggersAnimation = anime.createTimeline({
+    easing: 'easeInOutSine',
+    delay: anime.stagger(50),
+    loop: true,
+    autoplay: false
+});
+
+staggersAnimation
+    .add('.part', {
+        x: anime.stagger('-.1rem', { grid: grid, from: 'center', axis: 'x' }),
+        y: anime.stagger('-.1rem', { grid: grid, from: 'center', axis: 'y' }),
+        duration: 200,
+        scale: .5,
+        esae: 'outQuad',
+        delay: anime.stagger(200, { grid: grid, from: 'center' })
+    })
+    .add('.part', {
+        x: anime.stagger('.2rem', { grid: grid, from: 'center', axis: 'x' }),
+        y: anime.stagger('.2rem', { grid: grid, from: 'center', axis: 'y' }),
+        duration: 300,
+        ease: anime.createSpring(),
+        delay: anime.stagger(250, { grid: grid, from: 'center' })
+    })
+    .add('.part', {
+        translateX: () => anime.utils.random(-8, 8),
+        translateY: () => anime.utils.random(-1, 1, 2),
+        delay: anime.stagger(50, { from: 'last' })
+    })
+    .add('.part', {
+        translateX: anime.stagger('.25rem', { grid: grid, from: 'center', axis: 'x' }),
+        translateY: anime.stagger('.25rem', { grid: grid, from: 'center', axis: 'y' }),
+        rotate: 0,
+        scaleX: 2.5,
+        scaleY: .25,
+        delay: anime.stagger(100, { from: 'center' })
+    })
+    .add('.part', {
+        rotate: anime.stagger([90, 0], { grid: grid, from: 'center' }),
+        delay: anime.stagger(200, { grid: grid, from: 'center' })
+    })
+    .add('.part', {
+        translateX: 0,
+        translateY: 0,
+        scale: .5,
+        scaleX: 1,
+        rotate: 180,
+        duration: 1000,
+        delay: anime.stagger(500, { grid: grid, from: 'center' })
+    })
+    .add('.part', {
+        scaleX: 1,
+        scaleY: 1,
+        scale: 1,
+        delay: anime.stagger(150, { grid: grid, from: 'center' })
+    });
+
+staggersAnimation.play()
diff --git a/index.html b/index.html
index 99e609b..ce06bba 100644
--- a/index.html
+++ b/index.html
@@ -92,7 +92,7 @@
                         <p class="contact">@inkletblot pretty much everywhere</p>
                     </div>
                 </div>
-                <div class="col">
+                <div class="col center">
                     <div class="stagger-visualizer"></div>
                 </div>
             </div>
@@ -104,106 +104,9 @@
         </div>
     </footer>
 
-    <!-- <h2> -->
-    <!--     <span>H</span> -->
-    <!--     <span>E</span> -->
-    <!--     <span>L</span> -->
-    <!--     <span>L</span> -->
-    <!--     <span>O</span> -->
-    <!--     <span>&nbsp;</span> -->
-    <!--     <span>W</span> -->
-    <!--     <span>O</span> -->
-    <!--     <span>R</span> -->
-    <!--     <span>L</span> -->
-    <!--     <span>D</span> -->
-    <!-- </h2> -->
-
     <script src="https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js"></script>
-
-    <script>
-        const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
-        const fragment = document.createDocumentFragment();
-        const grid = [17, 17];
-        const col = grid[0];
-        const row = grid[1];
-        const numberOfElements = col * row;
-
-        for (let i = 0; i < numberOfElements; i++) {
-            let div = document.createElement('div');
-            div.className = 'part';
-            fragment.appendChild(div);
-        }
-
-        staggerVisualizerEl.appendChild(fragment);
-
-        const staggersAnimation = anime.createTimeline({
-            targets: '.stagger-visualizer .part',
-            easing: 'easeInOutSine',
-            delay: anime.stagger(50),
-            loop: true,
-            autoplay: false
-        });
-
-        staggersAnimation
-            .add({
-                translateX: [
-                    {value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'x'})},
-                    {value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'x'})}
-                ],
-                translateY: [
-                    {value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'y'})},
-                    {value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'y'})}
-                ],
-                duration: 1000,
-                scale: .5,
-                delay: anime.stagger(100, {grid: grid, from: 'center'})
-            });
-
-        staggersAnimation
-            .add({
-                translateX: () => anime.random(-10, 10),
-                translateY: () => anime.random(-10, 10),
-                delay: anime.stagger(8, {from: 'last'})
-            });
-
-        staggersAnimation
-            .add({
-                translateX: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'x'}),
-                translateY: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'y'}),
-                rotate: 0,
-                scaleX: 2.5,
-                scaleY: .25,
-                delay: anime.stagger(4, {from: 'center'})
-            });
-
-        staggersAnimation
-            .add({
-                rotate: anime.stagger([90, 0], {grid: grid, from: 'center'}),
-                delay: anime.stagger(50, {grid: grid, from: 'center'})
-            });
-
-        staggersAnimation
-            .add({
-                translateX: 0,
-                translateY: 0,
-                scale: .5,
-                scaleX: 1,
-                rotate: 180,
-                duration: 1000,
-                delay: anime.stagger(100, {grid: grid, from: 'center'})
-            });
-
-        staggersAnimation
-            .add({
-                scaleY: 1,
-                scale: 1,
-                delay: anime.stagger(20, {grid: grid, from: 'center'})
-            });
-
-        staggersAnimation.play()
-    </script>
-
-    <script src="main.js"></script>
+    <script src="cards.js"></script>
+    <script src="demo.js"></script>
 </body>
 
 </html>
diff --git a/style.css b/style.css
index 3a056d6..7fbd2de 100644
--- a/style.css
+++ b/style.css
@@ -63,6 +63,11 @@ img {
     padding-top: .5rem;
 }
 
+.center {
+    display: flex;
+    justify-content: center;
+}
+
 .cards {
     display: flex;
     gap: 1rem;
@@ -120,13 +125,12 @@ a:visited {
     justify-content: center;
     align-items: center;
     width: 17rem;
-    height: 17rem;
+    height: 6rem;
 }
 
-.stagger-visualizer div {
-    /*position: absolute;*/
+.part {
     width: 1rem;
     height: 1rem;
-    border: 1px solid #FFF;
-    background-color: #FFF;
+    border: 1px solid #d7d6d4;
+    background-color: #d7d6d4;
 }