better demo animation

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()

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 src="cards.js"></script>
-    <script>
+    <script src="demo.js"></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>
 </body>
 
 </html>

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 {
+.part {
-    /*position: absolute;*/
     width: 1rem;
     height: 1rem;
-    border: 1px solid #FFF;
+    border: 1px solid #d7d6d4;
-    background-color: #FFF;
+    background-color: #d7d6d4;
 }