Merge pull request #8 from loxygenK/feat/more-animation

package.json

@@ -18,10 +18,12 @@
   "homepage": "https://github.com/loxygenK/f4n.dev#readme",
   "dependencies": {
     "@svgr/webpack": "^5.5.0",
+    "@types/react-transition-group": "^4.4.3",
     "@types/webpack-dev-middleware": "^5.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
+    "react-transition-group": "^4.4.2",
     "ress": "^4.0.0",
     "webpack-dev-middleware": "^5.2.1"
   },

src/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-import { AppRouter } from "./pages/Router";
+import { AppRouter } from "./pages/router/Router";
 
 export const App = () => <AppRouter />;

src/comps/shared/LogoImage.module.scss

@@ -8,14 +8,16 @@ $pcpc-range: 10deg;
   width: 100%;
   text-align: center;
 
-  animation: 1.5s ease-out text-appear;
+  animation:
+    1.5s 0.75s ease-out text-appear-scale,
+    0.75s 0.75s ease-out text-appear-opacity;
 
   mask[id="masker"] path {
     stroke: rgb(255, 255, 255);
     stroke-dasharray: 31;
     stroke-dashoffset: 31;
 
-    animation: 4.5s $masking-ease anim forwards;
+    animation: 4.5s 0.75s $masking-ease anim forwards;
   }
 
   g[id="main-text"] {
@@ -28,9 +30,9 @@ $pcpc-range: 10deg;
     transform: scale(1, 0.25);
 
     animation:
-      0.8s 0.35s $catear-appear-ease forwards appear,
-      0.75s 1.10s $catear-pcpc-ease forwards prepare-for-pcpc,
-      1.5s 1.85s $catear-pcpc-ease alternate infinite pcpc;
+      0.8s 1.35s $catear-appear-ease forwards appear,
+      0.75s 2.10s $catear-pcpc-ease forwards prepare-for-pcpc,
+      1.5s 2.85s $catear-pcpc-ease alternate infinite pcpc;
   }
 
   g[id="hover-extend"] {
@@ -62,8 +64,13 @@ $pcpc-range: 10deg;
     to { transform: skewX(-$pcpc-range)}
   }
 
-  @keyframes text-appear {
-    from { transform: scale(1.1); opacity: 0%; }
-    to { transform: scale(1); opacity: 100%; }
+  @keyframes text-appear-scale {
+    from { transform: scale(1.1); }
+    to { transform: scale(1); }
+  }
+
+  @keyframes text-appear-opacity {
+    from { opacity: 0%; }
+    to { opacity: 100%; }
   }
 }

src/comps/shared/SimpleButton.module.scss

@@ -1,13 +1,47 @@
 @use "~/styling/animation.module.scss";
 @use "~/styling/color.module.scss";
 
+$skew_original: -15deg;
+
 .wrapper {
+  position: relative;
+
   padding: 0.5em 1.5em;
+  overflow: hidden;
 
   border: 2px solid color.get-theme-color(text-color-accent-primary);
   line-height: 100%;
-  vertical-align: center;
+  vertical-align: middle;
+
+  transition: 0.2s all;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    z-index: -1;
+    content: "";
+    width: 110%;
+    height: 100%;
+    background: color.get-theme-color(background-alt);
+    transform-origin: right top;
+    transform: skewX($skew_original) scale(0, 1);
+    transition: 0.4s transform;
+  }
+
+  &:hover {
+    transform: scale(1.10);
+
+    &:before {
+      transform-origin: left top;
+      transform: skewX($skew_original) scale(1, 1);
+    }
+  }
+
+  &:active {
+    transform: scale(1.05);
+  }
 
-  @include animation.hover;
   @include animation.click;
 }

src/comps/shared/SimpleButton.tsx

@@ -1,12 +1,13 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import styles from "./SimpleButton.module.scss";
 
 export type SimpleButtonProps = {
   caption: string;
   linkTo: string;
 };
 export const SimpleButton = ({ caption, linkTo }: SimpleButtonProps) => (
-  <a href={linkTo} className={styles.wrapper}>
+  <Link to={linkTo} className={styles.wrapper}>
     <span>{caption}</span>
-  </a>
+  </Link>
 );

src/comps/style/transition/TransitionAnimator.module.scss

@@ -0,0 +1,70 @@
+@use "~/styling/color.module.scss";
+
+%transition-base {
+  position: fixed;
+  z-index: 1;
+
+  &:before {
+    transition: all 750ms;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    content: "";
+    width: 170%;
+    height: 170%;
+    background-color: color.get-theme-color(background-alt);
+  }
+}
+
+.transition-enter {
+  @extend %transition-base;
+
+  &:before {
+    transition-delay: 650ms;
+
+    transform-origin: right top;
+    transform: skewX(-15deg) scale(1, 1);
+  }
+}
+
+.transition-enter-active {
+  @extend %transition-base;
+
+  &:before {
+    transition-delay: 650ms;
+
+    transform-origin: right top;
+    transform: skewX(-15deg) scale(0, 1);
+  }
+}
+
+.transition-exit {
+  @extend %transition-base;
+
+  &:before {
+    transform-origin: left top;
+    transform: skewX(-15deg) scale(0, 1);
+  }
+}
+
+.transition-exit-active {
+  @extend %transition-base;
+
+  &:before {
+    transform-origin: left top;
+    transform: skewX(-15deg) scale(1, 1);
+  }
+}
+
+.transition-exit-done {
+  @extend %transition-base;
+
+  &:before {
+    transform-origin: left top;
+    transform: skewX(-30deg) scale(0, 1);
+  }
+}
+

src/comps/style/transition/TransitionAnimator.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
+import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+
+import styles from "./TransitionAnimator.module.scss";
+
+const transitionClassNames: CSSTransitionClassNames = {
+  enter: styles.transitionEnter,
+  enterActive: styles.transitionEnterActive,
+  exit: styles.transitionExit,
+  exitActive: styles.transitionExitActive,
+  exitDone: styles.transitionExitDone,
+};
+
+export type TransitionAnimatorProps = {
+  children: React.ReactNode;
+};
+
+export const TransitionAnimator = ({ children }: TransitionAnimatorProps) => {
+  const location = useLocation();
+
+  console.log(location.pathname);
+
+  return (
+    <TransitionGroup>
+      <CSSTransition
+        key={location.pathname}
+        timeout={{
+          exit: 750,
+          enter: 1350,
+        }}
+        classNames={transitionClassNames}
+        mountOnEnter
+        unmountOnExit
+      >
+        {children}
+      </CSSTransition>
+    </TransitionGroup>
+  );
+};

src/pages/main/Main.module.scss

@@ -11,13 +11,13 @@
   display: grid;
 
   grid-auto-flow: column;
-  grid-auto-columns: fix-content;
-  grid-gap: 3em;
+  grid-auto-columns: max-content;
+  grid-gap: 2em;
   justify-content: center;
 
   width: 100%;
 
-  animation: 1s 1s both appear;
+  animation: 1s 1.5s both appear;
 }
 
 .logoImage {