feat(logo animation): second iteration of logo animation

astro.config.mjs

@@ -4,4 +4,5 @@ import { defineConfig } from 'astro/config';
 export default defineConfig({
   site: 'https://harry-whorlow.github.io',
   base: '/portfolio',
+  server: { port: 1234, host: true },
 });

src/components/Logo/Logo.astro

@@ -375,6 +375,7 @@
   #cell-15-1 {
     width: 65px;
     left: 10px;
+    background-color: var(--accent-pink);
   }
 
   #cell-15-2 {
@@ -417,25 +418,23 @@
 
 <script>
   import gsap from 'gsap';
-  let timeLine = gsap.timeline();
-
-  const screenWidthHalved = (window.screen.width - 100) / 2;
 
-  const getRandomStartPosInt = () => {
-    let position = screenWidthHalved * Math.random();
+  import { getRandomAnimationTime } from './utils/getRandomAnimationTime';
+  import { getRandomStartPosInt } from './utils/getRandomStartPosition';
+  import type { LocationMap } from './utils/getRandomStartPosition';
 
-    if (Math.random() >= 0.5) {
-      position = position * -1;
-    }
+  let timeLine = gsap.timeline();
 
-    return position;
-  };
+  const locationMap: LocationMap = {};
 
-  const getRandomStartTimeInt = () => {
-    return Math.random() * (3 - 1 + 1) + 1;
-  };
+  Array.from(document.querySelectorAll<HTMLElement>('.logo-cell')).map((element) => {
+    timeLine.fromTo(`#${element.id}`, { opacity: 0 }, { opacity: 1, duration: getRandomAnimationTime(3, 1) }, 1);
 
-  Array.from(document.querySelectorAll('.logo-cell')).map((element) => {
-    timeLine.fromTo(`#${element.id}`, { x: getRandomStartPosInt() }, { x: 0, duration: getRandomStartTimeInt() }, 1);
+    timeLine.fromTo(
+      `#${element.id}`,
+      { x: getRandomStartPosInt(element, locationMap) },
+      { x: 0, duration: getRandomAnimationTime(3, 1), ease: 'back' },
+      2
+    );
   });
 </script>

src/components/Logo/utils/getRandomAnimationTime.ts

@@ -0,0 +1,3 @@
+export const getRandomAnimationTime = (max: number, min: number) => {
+  return Math.random() * (max - min + 1) + min;
+};

src/components/Logo/utils/getRandomStartPosition.ts

@@ -0,0 +1,56 @@
+type PositionType = [number, number];
+
+export interface LocationMap {
+  [key: string]: PositionType[];
+}
+
+const isBetween = ({ largerEl, smallerEl }: { largerEl: [number, number]; smallerEl: [number, number] }) => {
+  const leftBound = smallerEl[0] >= largerEl[0] && smallerEl[0] <= largerEl[1];
+  const rightBound = smallerEl[1] >= largerEl[0] && smallerEl[1] <= largerEl[1];
+
+  return leftBound || rightBound;
+};
+
+const checkCellBounds = (newElement: [number, number], existingElement: [number, number]) => {
+  if (newElement[1] - newElement[0] > existingElement[1] - existingElement[0]) {
+    // if new element if smaller than old element
+
+    return isBetween({ largerEl: newElement, smallerEl: existingElement });
+  } else {
+    // re-ordered so that were comparing the smaller span to larger to save on more maths
+
+    return isBetween({ largerEl: existingElement, smallerEl: newElement });
+  }
+};
+
+export const getRandomStartPosInt = (element: HTMLElement, locationMap: LocationMap): number => {
+  const [, row] = element.id.split('-');
+
+  const { left: elementLeftPoint, width: elementWidth } = element.getBoundingClientRect();
+
+  let randomPoint = (window.screen.width - elementWidth - 20) * Math.random();
+  let startVector: number;
+
+  if (randomPoint > elementLeftPoint) {
+    startVector = randomPoint - elementLeftPoint;
+  } else {
+    startVector = (elementLeftPoint - randomPoint) * -1;
+  }
+
+  const newRandomPosition: PositionType = [randomPoint - 5, randomPoint + elementWidth];
+
+  switch (true) {
+    case locationMap[row] == undefined:
+      locationMap[row] = [newRandomPosition];
+      break;
+
+    case locationMap[row].some((existingPosition) => checkCellBounds(newRandomPosition, existingPosition)):
+      startVector = getRandomStartPosInt(element, locationMap);
+      break;
+
+    default:
+      locationMap[row] = [...locationMap[row], ...[newRandomPosition]];
+  }
+
+  return startVector;
+};

src/layouts/Layout.astro

@@ -12,7 +12,7 @@ const { title } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="./public/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>

src/pages/index.astro

@@ -18,8 +18,6 @@ import CustomCursor from '../components/CustomCursor/CustomCursor.astro';
       height: 1000px;
       width: 100%;
 
-      overflow: hidden;
-
       display: flex;
       flex-direction: column;
       align-items: center;