update some animations

src/animations/index.ts

@@ -50,7 +50,7 @@ const animateSplitText = (
     scrollTrigger: {
       trigger: id,
       toggleActions: 'play none none reverse',
-      start: 'top 95%',
+      start: 'top bottom',
     },
     delay: delay,
     duration: duration,

src/components/sections/Contact.vue

@@ -19,10 +19,10 @@
           (Need an unfair advantage?)
         </p>
         <h1
+          id="make-it-happen"
           class="heading-1 max-w-[10ch] text-center leading-none text-flax-smoke-200"
-        >
-          Let's Make it happen
-        </h1>
+          v-html="makeItHappen"
+        ></h1>
         <div
           class="mt-[5%] flex scale-150 items-center lg:scale-[1.5] xl:scale-[2] 2xl:scale-[2.5] 3xl:scale-[3]"
         >
@@ -56,9 +56,7 @@
         </div>
 
         <div class="heading-6 w-fit text-flax-smoke-500">
-          <p class="w-full !font-title font-bold uppercase">
-            For further inquiries
-          </p>
+          <p class="w-full font-bold uppercase">For further inquiries</p>
           <Link
             class="h-6 text-right font-medium lowercase tracking-wider text-flax-smoke-300"
             label="hetari4all@gmail"
@@ -77,6 +75,23 @@
   import { Vue3Lottie } from 'vue3-lottie';
   import Link from '../Link.vue';
   import { contact } from '@/assets/videos';
+  import { onBeforeMount, onMounted, ref } from 'vue';
+  import { textSplitterIntoChar } from '@/functions';
+  import { animateSplitText } from '@/animations';
+
+  const makeItHappen = ref("Let's Make it happen");
+  onBeforeMount(() => {
+    makeItHappen.value = textSplitterIntoChar(makeItHappen.value);
+  });
+  onMounted(() => {
+    animateSplitText(
+      '#make-it-happen .letters',
+      '#make-it-happen',
+      1.5,
+      0.01,
+      0,
+    );
+  });
 </script>
 
 <style>

src/components/sections/Services.vue

@@ -17,7 +17,7 @@
           ( SERVICES )
         </p>
         <p
-          class="heading-4 col-span-8 w-full text-balance font-fancy sm:font-semibold md:col-span-5"
+          class="heading-4 font-fancy col-span-8 w-full text-balance sm:font-semibold md:col-span-5"
         >
           My obsession is to craft memorable digital experiences that represent
           your brand, serve a meaningful purpose, and drive tangible business

src/components/sections/Works.vue

@@ -5,7 +5,7 @@
       <h1
         id="selectedWorks"
         v-html="selectedWorks"
-        class="heading-1 text-start uppercase leading-none"
+        class="heading-1 text-start font-bold uppercase leading-none"
       ></h1>
       <p
         class="heading-1 hidden w-4/5 text-end font-extrabold text-flax-smoke-400 text-opacity-50 sm:block"

src/components/sections/aboutMe.vue

@@ -98,7 +98,7 @@
     animateSplitText(
       '#little-bit-about-me .letters',
       '#little-bit-about-me',
-      0.7,
+      1,
       0.01,
       0,
       () => {

src/functions/index.ts

@@ -18,7 +18,7 @@ const textSplitterIntoChar = (
 
     word.forEach((char) => {
       let classes =
-        'letters translate-y-full inline-block will-change-auto will-change-transform ';
+        'letters translate-y-[120%] inline-block will-change-auto will-change-transform ';
       if (isFancyFont) {
         classes += ' font-fancy ';
       }