@onepercentio/one-ui 0.28.7 → 0.28.9

package/src/components/Transition/MasksFactory/SquareToBalls.tsx

@@ -0,0 +1,66 @@
+import { renderToString } from "react-dom/server";
+import React from "react";
+import buildGrid, { getTime } from "./utils";
+
+/**
+ * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
+ * @param amountOfVerticalSquares The amount of squares vertically to be shown
+ */
+export default function (amountOfVerticalSquares: number = 10) {
+  return function (el: HTMLDivElement) {
+    const height = el.clientHeight;
+    const width = el.clientWidth;
+    const _ballsize = height / amountOfVerticalSquares;
+    const maximumBalls = width / _ballsize;
+    const amountOfBalls = Math.floor(maximumBalls);
+
+    const time = getTime(el);
+
+    const resultSvg = renderToString(
+      <svg xmlns="http://www.w3.org/2000/svg" id={Date.now().toString()}>
+        {buildGrid(amountOfVerticalSquares, amountOfBalls, _ballsize).map(
+          ({ ballSize, x, y }) => {
+            return (
+              <rect fill="white">
+                <animate
+                  attributeName="rx"
+                  attributeType="XML"
+                  values={`${0}px;${ballSize / 2}px;${ballSize / 2}px`}
+                  dur={`${time}ms`}
+                />
+                <animate
+                  attributeName="x"
+                  attributeType="XML"
+                  values={`${x}px;${x}px;${x + ballSize / 2}px`}
+                  dur={`${time}ms`}
+                />
+                <animate
+                  attributeName="y"
+                  attributeType="XML"
+                  values={`${y}px;${y}px;${y + ballSize / 2}px`}
+                  dur={`${time}ms`}
+                />
+                <animate
+                  attributeName="width"
+                  attributeType="XML"
+                  values={`${ballSize}px;${ballSize}px;${0}px`}
+                  dur={`${time}ms`}
+                />
+                <animate
+                  attributeName="height"
+                  attributeType="XML"
+                  values={`${ballSize}px;${ballSize}px;${0}px`}
+                  dur={`${time}ms`}
+                />
+              </rect>
+            );
+          }
+        )}
+      </svg>
+    );
+
+    return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(
+      resultSvg
+    )}')`;
+  };
+}

package/src/components/Transition/MasksFactory/utils.ts

@@ -0,0 +1,35 @@
+export default function buildGrid(
+  amountOfVerticalSquares: number,
+  howManyHorizontalSquare: number,
+  ballSize: number
+) {
+  return new Array(howManyHorizontalSquare * amountOfVerticalSquares)
+    .fill(undefined)
+    .map((_, i) => {
+      const modX = Math.floor(i / howManyHorizontalSquare);
+      const modY = i - modX * howManyHorizontalSquare;
+      const ballsize = ballSize * 1.1;
+      const padding = (ballsize - ballSize) / 2;
+      const x = modY * ballSize - padding;
+      const y = modX * ballSize - padding;
+
+      return {
+        x,
+        y,
+        ballSize,
+        column: modY,
+        row: modX,
+      };
+    });
+}
+
+export function getTime(el: HTMLDivElement) {
+  const _time =
+    getComputedStyle(el.firstElementChild!).getPropertyValue(
+      "--animation-speed-transition"
+    ) || "250ms";
+  const __time = _time.endsWith("ms")
+    ? Number(_time.replace("ms", ""))
+    : Number(_time.replace("s", "")) * 1000;
+  return __time + 50;
+}

package/src/components/Transition/Transition.module.scss

@@ -0,0 +1,211 @@
+@import "../../assets/styles/index.scss";
+
+.section {
+  * {
+    box-sizing: border-box;
+  }
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  > div {
+    display: flex;
+    flex-direction: column;
+    min-height: inherit;
+    min-width: 100%;
+    animation-duration: var(--animation-speed-transition, $fast);
+    animation-timing-function: var(--animation-timing-transition, initial);
+    animation-fill-mode: forwards;
+    transform-origin: inherit;
+  }
+}
+
+div.stub {
+  animation-name: stub;
+  position: absolute;
+  pointer-events: none;
+}
+
+div.stubEntering {
+  animation-name: stub;
+  z-index: -1;
+}
+@keyframes stub {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+div.entranceLeft {
+  animation-name: entranceLeft;
+}
+div.exitLeft {
+  animation-name: exitLeft;
+}
+
+@keyframes entranceLeft {
+  0% {
+    margin-left: -100%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+@keyframes exitLeft {
+  0% {
+    margin-left: 0%;
+  }
+  100% {
+    margin-left: -100%;
+  }
+}
+
+div.fadeOut {
+  animation-name: fadeOut;
+  position: absolute;
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+div.scaleIn {
+  animation-fill-mode: forwards;
+  animation-name: scaleIn;
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+div.scaleOut {
+  animation-fill-mode: initial;
+  animation-name: scaleOut;
+}
+
+@keyframes scaleOut {
+  0% {
+    position: absolute;
+    transform: scale(1);
+  }
+  100% {
+    position: absolute;
+    transform: scale(0);
+  }
+}
+
+div.fadeIn {
+  animation-name: fadeIn;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInDelayed {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOutDelayed {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeInDelayed {
+  animation-name: fadeInDelayed;
+}
+
+.fadeOutAbsolute {
+  position: absolute;
+  animation-name: fadeOutDelayed;
+}
+
+@keyframes flip {
+  0% {
+    transform: rotateX(0deg);
+  }
+
+  25% {
+    transform: rotateX(36deg);
+  }
+
+  50% {
+    transform: rotateX(90deg);
+  }
+
+  75% {
+    transform: rotateX(90deg);
+  }
+
+  100% {
+    transform: rotateX(90deg);
+  }
+}
+@keyframes flipIn {
+  0% {
+    transform: rotateX(0deg);
+    opacity: 0;
+  }
+
+  25% {
+    transform: rotateX(0deg);
+  }
+
+  50% {
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+  51% {
+    opacity: 1;
+  }
+
+  75% {
+    transform: rotateX(36deg);
+  }
+
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+.flipBottomUpOut {
+  transform-origin: 50% 50% !important;
+  position: absolute !important;
+  animation-name: flip;
+  animation-timing-function: linear !important;
+}
+.flipBottomUpIn {
+  transform-origin: 50% 50% !important;
+  animation-name: flipIn;
+  animation-timing-function: linear !important;
+}