Merge pull request #68 from LittleFoxCompany/update-animation-module

Add a module for the animateText function

nuxt-web/assets/css/_animations.css

@@ -0,0 +1,13 @@
+.animate-fade-in-up {
+    @apply relative translate-y-full opacity-0;
+    animation: fadeUp 1.5s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
+
+    @keyframes fadeUp {
+    100% {
+        opacity: 1;
+        transform: translateY(0%);
+    }
+  }
+}
+
+

nuxt-web/assets/css/main.css

@@ -1,6 +1,7 @@
 /* Components */
 @import '_scrollbar.css';
 @import '_content.css';
+@import '_animations.css';
 
 /* Utilities */
 @tailwind base;

nuxt-web/components/content/animators/animateText.vue

@@ -0,0 +1,43 @@
+<template>
+  <Example class="flex">
+    <ExampleInputs class="flex flex-col">
+    <div class="flex gap-4">
+        <FormInput v-model="value" label="Title" />
+        <FormSelect v-model="splitBy" label="Select" name="select" placeholder="Select an option">
+            <option value="word">Word</option>
+            <option value="character">Character</option>
+        </FormSelect>
+      </div>
+      <div class="flex gap-4">
+      <FormInput v-model="time" label="Time" type="number" name="time" value="100" placeholder="Time" />
+      <FormSelect v-model="unit" label="Unit" name="unit" placeholder="Select an option">
+        <option value="ms">ms</option>
+        <option value="s">s</option>
+      </FormSelect>
+      </div>
+      <FormInput v-model="className" label="Classes" type="text" name="classes" placeholder="Classes" />
+    </ExampleInputs>
+    <ExampleResult>
+      <h1 :key="animationKey" v-html="animated" class="text-balance text-center font-bold leading-[1.25em] text-4xl text-gray-900 dark:text-white"></h1>
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+const value = ref('Zippy little utils for your JavaScript projects.');
+const splitBy = ref('word');
+const time = ref(100);
+const unit = ref('ms');
+const className = ref('animate-fade-in-up');
+const animationKey = ref(0);
+
+const animated = computed(() => {
+  return animateText(value.value, { splitBy: splitBy.value, time: time.value, unit: unit.value, class: className.value });
+});
+
+watch([value, splitBy, time, unit, className], () => {
+  animationKey.value += 1;
+});
+</script>

nuxt-web/pages/index.vue

@@ -64,16 +64,4 @@
     background: radial-gradient(50% 50% at 50% 50%, #2a2a2a 0%, rgba(24, 24, 27, 0) 100%);
     background: radial-gradient(50% 50% at 50% 50%, color(display-p3 0.165 0.165 0.165) 0%, color(display-p3 0.094 0.094 0.106 / 0) 100%);
   }
-
-  :deep(.animate-fade-in-up) {
-    @apply relative translate-y-full opacity-0;
-    animation: fadeUp 1.5s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
-  }
-
-  @keyframes fadeUp {
-    100% {
-      opacity: 1;
-      transform: translateY(0%);
-    }
-  }
 </style>

src/animations.ts

@@ -1,5 +1,5 @@
 // title: Animators
-// description: Pixar without the budget or talent
+// description: Pixar without the budget or talent. Watch this page, there's more opinionated animations coming soon.
 // lead: Ruthlessly animate everything
 
 /**