move animations to css

sijad · Apr 23, 2023 · 0929b07 · 0929b07
1 parent f57c6c0
commit 0929b07
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 58 deletions.
diff --git a/index.html b/index.html
@@ -1,3 +1,13 @@
+<!--
+<%
+  function split(txt) {
+    return txt
+      .split(" ")
+      .map((w) => `<span><span>${w}</span></span>`)
+      .join(" ");
+  }
+%>
+?-->
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -39,20 +49,11 @@
       href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Londrina+Sketch&family=Londrina+Solid&display=swap"
       rel="stylesheet"
     />
-
-    <noscript>
-      <style>
-        h1,
-        p {
-          opacity: 1;
-        }
-      </style>
-    </noscript>
   </head>
   <body>
     <div>
-      <h1>Sajjad Hashemian</h1>
-      <p>Fullstack web and web3 developer</p>
+      <h1><%- split("Sajjad Hashemian"); %></h1>
+      <p><%- split("Fullstack web and web3 developer"); %></p>
       <ul>
         <li>
           <a href="https://github.com/sijad/" target="_blank">

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "prettier": "^2.8.7",
     "sass": "^1.62.0",
     "typescript": "^5.0.2",
-    "vite": "^4.3.0"
+    "vite": "^4.3.0",
+    "vite-plugin-ejs": "^1.6.4"
   }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -53,45 +53,3 @@ const toggleButton = document.querySelector("button");
 toggleButton?.addEventListener("click", (e) => {
   handleToggleTheme(e.currentTarget as HTMLElement);
 });
-
-function revealWords() {
-  const h1 = document.querySelector("h1");
-  const p = document.querySelector("p");
-
-  if (!h1 || !p) {
-    return;
-  }
-
-  split(h1);
-  split(p);
-
-  const spans = document.querySelectorAll("h1 > span, p > span");
-
-  spans.forEach((span, i) => {
-    const inner = span.firstElementChild;
-
-    inner?.animate(
-      {
-        transform: ["translateY(150%)", "translateY(0%)"],
-      },
-      {
-        delay: i * 80,
-        duration: 400,
-        fill: "forwards",
-        easing: "cubic-bezier(0.65, 0, 0.35, 1)",
-      }
-    );
-  });
-
-  function split(el: HTMLElement) {
-    const orig = el.innerText;
-    el.innerHTML = orig
-      .split(" ")
-      .map((w) => `<span><span>${w}</span></span>`)
-      .join(" ");
-    el.style.opacity = "1";
-    return orig;
-  }
-}
-
-revealWords();
diff --git a/src/style.scss b/src/style.scss
@@ -95,7 +95,6 @@ h1 {
   text-transform: uppercase;
   margin-bottom: 0.2em;
   line-height: 1;
-  opacity: 0;
 
   @media (width < 768px) {
     font-size: 5.5rem;
@@ -113,18 +112,36 @@ h1 {
 p {
   font-size: 1.875rem;
   margin: 0;
-  opacity: 0;
 }
 
 h1,
 p {
+  @keyframes slideIn {
+    from {
+      transform: translateY(150%);
+    }
+
+    to {
+      transform: translateY(0%);
+    }
+  }
+
   > span {
     clip-path: inset(0);
     display: inline-block;
 
+    @for $i from 1 through 12 {
+      &:nth-child(#{$i}) {
+        > span {
+          animation-delay: $i * 0.08s;
+        }
+      }
+    }
+
     > span {
       display: inline-block;
       transform: translateY(150%);
+      animation: slideIn 0.4s forwards cubic-bezier(0.65, 0, 0.35, 1);
     }
   }
 }

diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "vite";
+import {ViteEjsPlugin} from "vite-plugin-ejs";
+
+export default defineConfig({
+  plugins: [
+    ViteEjsPlugin(),
+  ],
+});
diff --git a/yarn.lock b/yarn.lock
@@ -381,6 +381,11 @@ ast-types-flow@^0.0.7:
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
   integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
 
+async@^3.2.3:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
+  integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
+
 autoprefixer@^10.4.14:
   version "10.4.14"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
@@ -433,6 +438,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -478,7 +490,7 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz#f58a717afe92f9e69d0e35ff64df596bfad93912"
   integrity sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==
 
-chalk@^4.0.0:
+chalk@^4.0.0, chalk@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -726,6 +738,13 @@ domutils@^3.0.1:
     domelementtype "^2.3.0"
     domhandler "^5.0.1"
 
+ejs@^3.1.8:
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
+  integrity sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==
+  dependencies:
+    jake "^10.8.5"
+
 electron-to-chromium@^1.4.284:
   version "1.4.369"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.369.tgz#a98d838cdd79be4471cd04e9b4dffe891d037874"
@@ -1043,6 +1062,13 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+filelist@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
+  integrity sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==
+  dependencies:
+    minimatch "^5.0.1"
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -1445,6 +1471,16 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+jake@^10.8.5:
+  version "10.8.5"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
+  integrity sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==
+  dependencies:
+    async "^3.2.3"
+    chalk "^4.0.2"
+    filelist "^1.0.1"
+    minimatch "^3.0.4"
+
 js-sdsl@^4.1.4:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
@@ -1552,13 +1588,20 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -2228,6 +2271,13 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+vite-plugin-ejs@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/vite-plugin-ejs/-/vite-plugin-ejs-1.6.4.tgz#aa30820d8235774e717d902754a552480cf7758b"
+  integrity sha512-23p1RS4PiA0veXY5/gHZ60pl3pPvd8NEqdBsDgxNK8nM1rjFFDcVb0paNmuipzCgNP/Y0f/Id22M7Il4kvZ2jA==
+  dependencies:
+    ejs "^3.1.8"
+
 vite@^4.3.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.1.tgz#9badb1377f995632cdcf05f32103414db6fbb95a"