add mixin

use regular trasnsition fuctions. If need to optomise later, can do so.

site/layouts/index.html

@@ -1,9 +1,8 @@
 {{ define "main" }}
 
-<h1 class="text-3xl">Hugo with Webpack, Sass, and PostCSS</h1>
 
-<h3>Hooray 🎉 - you've built this with <a href="https://github.com/netlify/victor-hugo">Victor-Hugo</a>!</h3>
-
-<a href="{{ "/tech" | relURL }}">Check out the tech</a>
+<section id="js-block-parent" class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around">
+  {{ partial "block.html" . }}
+</section>
 
 {{ end }}

site/layouts/partials/block.html

@@ -0,0 +1,18 @@
+  <div class="js-block c-block c-block--1 bg-gray-300 w-64 h-64 text-red-500">
+    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+  </div>
+
+  <div class="js-block c-block c-block--2 bg-gray-300 w-64 h-64 text-orange-500">
+    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+  </div>
+
+  <div class="js-block c-block c-block--3 bg-gray-300 w-64 h-64 text-yellow-500">
+    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+  </div>
+
+  <div class="js-block c-block c-block--4 bg-gray-300 w-64 text-green-500">
+    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+  </div>
+
+  <div class="js-block c-block c-block--5 bg-gray-300 w-64 h-64 text-blue-500">
+  </div>

src/css/imports/blocks.scss

@@ -0,0 +1,203 @@
+$duration: 1s;
+$delay: 0.3s;
+
+$transition-img-in: opacity $duration $delay ease-in, transform $duration;
+$transition-img-out: opacity $duration $delay ease-out, transform $duration;
+
+@mixin img-in {
+  transition: $transition-img-in;
+  opacity: 0.5;
+  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;
+  &::before {
+    //will-change: transform;
+    z-index: 1;
+    content: "";
+    transition: transform $duration;
+    background-color: currentColor;
+  }
+
+  > .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;
+
+    @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 {
+  &::before {
+    transform-origin: 100% 0;
+
+    @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 {
+  &::before {
+    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--4 {
+  height: 24rem;
+
+  &::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__img {
+    transform-origin: 0 100%;
+
+    @at-root .state-0 & {
+      @include img-out;
+      transform: translate(66.6%, 0) scale(1.3);
+    }
+
+    @at-root .state-1 & {
+      transform: translate(66.6%, 66.6%) scale(2);
+    }
+
+    @at-root .state-2 & {
+      @include img-in;
+    }
+  }
+}
+
+.c-block--5 {
+  &::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);
+    }
+  }
+}
+
+// vim:set filetype=scss:

src/css/imports/mixins.scss

@@ -0,0 +1,7 @@
+@mixin abs-full {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  right: 0;
+}

src/css/main.css

@@ -1,43 +1,14 @@
 @tailwind base;
-
 @tailwind components;
-
 @tailwind utilities;
 
-/*
-  You can use import statements to include partials:
- */
-// @import "imports/reset.css";
+@import "imports/mixins.scss";
+
+@import "imports/blocks.scss";
 
 html,
 body {
   height: 100%;
 }
 
-body {
-  font-size: calc(10px + 1vmin);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  background-color: #282c34;
-  color: white;
-}
-
-a {
-  color: pink;
-  text-decoration: none;
-}
-
-.content {
-  padding: 0 32px;
-}
-
 // vim:set filetype=scss:

src/index.js

@@ -2,5 +2,18 @@
 
 import "./css/main.css";
 
-// Say hello
-console.log("🦊 Hello! Edit me in src/index.js");
+window.addEventListener("DOMContentLoaded", () => {
+  const TRANSITION_DURATION = 1000;
+  const INTERVAl = TRANSITION_DURATION + 600;
+  const blockParent = document.getElementById("js-block-parent");
+
+  if (blockParent) {
+    let state = 0;
+    setInterval(() => {
+      blockParent.classList.remove(`state-${state}`);
+      state = state < 2 ? state + 1 : 0;
+      blockParent.classList.add(`state-${state}`);
+    }, INTERVAl);
+  }
+});
+