restructure anim-blocks

site/layouts/partials/components/block.html

@@ -1,8 +1,8 @@
 <!-- TODO convert to proper template -->
-<div class="js-block c-block c-block--4 c-block-br block-styles">
+<div class="js-block anim-block anim-block--4 anim-block-br block-styles">
   <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
 </div>
 
-<div class="js-block c-block c-block--5 block-sans-image-styles">
+<div class="js-block anim-block anim-block--5>
 </div>
 

site/layouts/partials/hero.html

@@ -6,8 +6,8 @@
           <p class="h4 hero-sub-title">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
       </div>
       <div id="js-block-parent" class="hero__aside block-grid">
-        <div class="js-block c-block c-block--1 hero-block-1">
+        <div class="js-block anim-block anim-block--1 hero-block-1">
-          <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+          <div class="anim-block__img" style="background-image: url(/img/img.jpg)"></div>
         </div>
 
         <div class="js-block c-block c-block--2 hero-block-2">

src/css/imports/components/block.scss

@@ -1,327 +1,57 @@
-$duration: 1s;
+// units are the number of units that make up 100% of the container
-$delay: 0.3s;
+// e.g., if there are 4 units then sizes, lengths, can be from 0 to 4
+// corresponding to lengths of 0, 25%, 50%, 75% and 100%.
+$units: 4;
+$unit-size: 100% / $units;
 
-$transition-img-in: opacity $duration $delay ease-in, transform $duration;
+%ab-layout {
-$transition-img-out: opacity $duration $delay ease-out, transform $duration;
-
-@mixin img-in {
-  transition: $transition-img-in;
-  opacity: 1;
-  transform: none;
-}
-
-@mixin img-out {
-  transition: $transition-img-out;
-}
-
-.c-block::before,
-.c-block__img {
-  @include abs-full;
-}
-
-.c-block {
-  z-index: 1;
   position: relative;
-  overflow: hidden;
-
-  width: 100%;
-  height: 100%;
 
   &::before {
-    //will-change: transform;
-    z-index: 1;
     content: "";
-    transition: transform $duration;
+    display: block;
-    background-color: currentColor;
+    position: absolute;
-  }
+    width: $unit-size;
-
+    height: $unit-size;
-  > .c-block__img {
-    z-index: 2;
-    //will-change: opacity, transform;
-    background-size: cover;
-    background-position: center;
-    opacity: 0;
-  }
-}
-
-.c-block--1 {
-  &::before {
-    transform-origin: 100% 100%;
-
-    @at-root .state-0 & {
-      transform: scale(1, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.5, 1);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.5, 0.5);
-    }
-  }
-
-  > .c-block__img {
     transform-origin: 0 0;
-
+    transition: transform 0.3s linear;
-    @at-root .state-0 & {
-      @include img-in;
-    }
-
-    @at-root .state-1 & {
-      @include img-out;
-      transform: translate(50%, 0) scale(1.3);
-    }
-
-    @at-root .state-2 & {
-      transform: translate(50%, 50%) scale(2);
-    }
   }
 }
 
-.c-block--2 {
+// all blocks start out at 1 unit size in length and width.
+// $x, $y are the starting coordinates
+@mixin ab-set-layout($x, $y) {
+  @extend %ab-layout;
+
   &::before {
-    transform-origin: 100% 0;
+    left: $x * $unit-size;
-
+    top: $y * $unit-size;
-    @at-root .state-0 & {
-      transform: scale(0.5, 0.5);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(1, 1);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.5, 1);
-    }
-  }
-
-  > .c-block__img {
-    transform-origin: 0 100%;
-
-    @at-root .state-0 & {
-      transform: translate(50%, 50%) scale(2);
-    }
-
-    @at-root .state-1 & {
-      @include img-in;
-    }
-
-    @at-root .state-2 & {
-      transform: translate(50%, 0) scale(1.3);
-      @include img-out;
-    }
   }
 }
 
-.c-block--3 {
+@mixin ab-set-state($state-class, $width, $height) {
-  &::before {
+  @at-root .state-#{$state-class} &::before {
-    transform-origin: 100% 100%;
+    transform: scale($width, $height);
-
-    @at-root .state-0 & {
-      transform: scale(1, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.5, 1);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.5, 0.5);
-    }
-  }
-
-  // > .c-block__img {
-  //   transform-origin: 0 100%;
-  //
-  //   @at-root .state-0 & {
-  //     @include img-in;
-  //   }
-  //
-  //   @at-root .state-1 & {
-  //     @include img-out;
-  //     transform: translate(66.6%, 0) scale(1.3);
-  //   }
-  //
-  //   @at-root .state-2 & {
-  //     transform: translate(66.6%, 66.6%) scale(2);
-  //   }
-  // }
-}
-
-.c-block--4 {
-  &::before {
-    transform-origin: 100% 0;
-
-    @at-root .state-0 & {
-      transform: scale(0.33, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.33, 0.25);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(1, 1);
-    }
   }
 }
 
-.c-block--5 {
+.block-grid {
-  &::before {
+  padding-top: 3rem;
-    transform-origin: 100% 0;
-
-    @at-root .state-0 & {
-      transform: scale(0.5, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.5, 0.5);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(1, 1);
-    }
-  }
-
-  > .c-block__img {
-    transform-origin: 0 100%;
-
-    @at-root .state-0 & {
-      @include img-out;
-      transform: translate(50%, 0) scale(1.3);
-    }
-
-    @at-root .state-1 & {
-      transform: translate(50%, 50%) scale(2);
-    }
-
-    @at-root .state-2 & {
-      @include img-in;
-    }
-  }
 }
 
-.c-block--6 {
+.anim-block {
-  &::before {
+  background-color: rgba(blue, 0.06);
-    transform-origin: 100% 0;
-
-    @at-root .state-0 & {
-      transform: scale(1.333, 0.666);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.5, 0.666);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.5, 0.5);
-    }
-  }
-
-  // > .c-block__img {
-  //   transform-origin: 0 100%;
-  //
-  //   @at-root .state-0 & {
-  //     @include img-in;
-  //   }
-  //
-  //   @at-root .state-1 & {
-  //     @include img-out;
-  //     transform: translate(66.6%, 0) scale(1.3);
-  //   }
-  //
-  //   @at-root .state-2 & {
-  //     transform: translate(66.6%, 66.6%) scale(2);
-  //   }
-  // }
 }
 
-.c-block--7 {
+.anim-block--1 {
-  &::before {
+  @include ab-set-layout(2, 1);
-    transform-origin: 100% 100%;
 
-    @at-root .state-0 & {
+  @include ab-set-state(0, 1, 1);
-      transform: scale(1, 1);
+  @include ab-set-state(1, 2, 2);
-    }
+  @include ab-set-state(2, 2, 3);
 
-    @at-root .state-1 & {
+  @at-root &::before {
-      transform: scale(0.5, 1);
+    background-color: rgba(blue, 0.8);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.5, 0.5);
-    }
-  }
-
-  > .c-block__img {
-    transform-origin: 0 100%;
-
-    @at-root .state-0 & {
-      @include img-in;
-    }
-
-    @at-root .state-1 & {
-      @include img-out;
-      transform: translate(66.6%, 0) scale(1.3);
-    }
-
-    @at-root .state-2 & {
-      transform: translate(66.6%, 66.6%) scale(2);
-    }
-  }
-}
-
-.c-block--8 {
-  &::before {
-    transform-origin: 100% 100%;
-
-    @at-root .state-0 & {
-      transform: scale(1, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.5, 1);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.5, 0.5);
-    }
-  }
-}
-
-.c-block--9 {
-  &::before {
-    transform-origin: 100% 100%;
-
-    @at-root .state-0 & {
-      transform: scale(1, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.375, 1);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.375, 0.375);
-    }
-  }
-
-  > .c-block__img {
-    transform-origin: 0 100%;
-
-    @at-root .state-0 & {
-      @include img-in;
-    }
-
-    @at-root .state-1 & {
-      @include img-out;
-      transform: translate(66.6%, 0) scale(1.3);
-    }
-
-    @at-root .state-2 & {
-      transform: translate(66.6%, 66.6%) scale(2);
-    }
   }
 }
 

src/css/imports/hero.scss

@@ -81,18 +81,18 @@
   display: grid;
 
   @media (max-width: $bp-hero) {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(16, 1fr);
-    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: repeat(16, 1fr);
 
     @media (max-width: $bp-hero) and (orientation: landscape) {
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-      grid-template-rows: 1fr 1fr;
+      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     }
   }
 
   @media (min-width: $bp-hero) {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(16, 1fr);
-    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: repeat(16, 1fr);
   }
 }
 
@@ -171,13 +171,13 @@
   // row 1
   ////////
   .hero-block-1 {
-    grid-column: 1/4;
+    grid-column: 5/9;
-    grid-row: 1/4;
+    grid-row: 5/9;
   }
 
   .hero-block-2 {
-    grid-column: 4/7;
+    grid-column: 5/8;
-    grid-row: 1/4;
+    grid-row: 1/5;
   }
 
   .hero-block-3 {

src/css/main.css

@@ -224,7 +224,7 @@ html.is-animating .transition-fade {
 // hero
 
 .hero-bg {
-  background-color: var(--primary-500);
+  // background-color: var(--primary-500);
 }
 
 // about

src/index.js

@@ -17,11 +17,21 @@ function initBlocks() {
 
   if (blockParent) {
     let state = 0;
-    setInterval(() => {
+    blockParent.classList.add(`state-${state}`);
+
+    document.querySelector("header").addEventListener("click", () => {
+      const from = state;
       blockParent.classList.remove(`state-${state}`);
       state = state < 2 ? state + 1 : 0;
       blockParent.classList.add(`state-${state}`);
-    }, INTERVAl);
+      console.log(`state: ${from} -> ${state}`);
+    });
+
+    // setInterval(() => {
+    //   blockParent.classList.remove(`state-${state}`);
+    //   state = state < 2 ? state + 1 : 0;
+    //   blockParent.classList.add(`state-${state}`);
+    // }, INTERVAl);
   }
 }