animation css dynamic step

ridhozhr10 · May 14, 2024 · 6048261 · 6048261
1 parent 3cc3fe6
commit 6048261
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/app/_components/layout/Header/index.tsx b/src/app/_components/layout/Header/index.tsx
@@ -17,7 +17,17 @@ const Logo = ({ text }: { text?: string }) => (
     <div>
       <span>&gt;</span>
       <span>$</span>
-      {text ? <span>{text}</span> : <span>echo &quot;Hi&quot;</span>}
+      {text ? (
+        <span
+          style={{ animationTimingFunction: `steps(${text.length + 3}, end)` }}
+        >
+          {text}
+        </span>
+      ) : (
+        <span style={{ animationTimingFunction: `steps(12, end)` }}>
+          echo &quot;Hi&quot;
+        </span>
+      )}
       <span className="animate-cursor"></span>
     </div>
   </Link>

diff --git a/src/app/_components/layout/Header/style.module.scss b/src/app/_components/layout/Header/style.module.scss
@@ -17,7 +17,7 @@
       @apply mr-[5px];
     }
     & span:nth-child(3) {
-      @apply animate-typing overflow-hidden whitespace-nowrap tracking-widest w-0;
+      @apply animate-typing overflow-hidden whitespace-nowrap w-0;
     }
     & span:nth-child(4) {
       @apply inline-block w-2 h-4 bg-red-400 ml-[5px] rounded-[1px];

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -21,7 +21,7 @@ const config: Config = {
       },
       animation: {
         'cursor': 'cursor 1s infinite',
-        'typing': 'typing 15s steps(25, end) infinite'
+        'typing': 'typing 15s infinite'
       },
       keyframes: {
         cursor: {