fix stop-scrolling functionally

Hetari · Jul 20, 2024 · 3bcf381 · 3bcf381
1 parent a2b9a65
commit 3bcf381
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
   <head>
     <!-- Basic Meta Tags -->
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0," />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <meta name="description"
       content="Ebraheem Alhetari - A freelance who is experienced in full-Stack Developer helping startups all around the world gain their unfair advantage">
     <meta name="keywords"

diff --git a/src/App.vue b/src/App.vue
@@ -66,6 +66,9 @@
   };
 
   onMounted(async () => {
+    document.body.classList.add('stop-scrolling');
+    window.scrollTo(0, 0);
+
     setTimeout(() => {
       requestAnimationFrame(raf);
     }, 2000);
@@ -78,3 +81,10 @@
     }
   });
 </script>
+
+<style>
+  .stop-scrolling #app {
+    max-height: 100dvh !important;
+    overflow: hidden;
+  }
+</style>
diff --git a/src/animations/index.ts b/src/animations/index.ts
@@ -8,7 +8,7 @@ gsap.registerPlugin(MotionPathHelper);
 
 const animateSplitText = (
   id: string,
-  textId: string = '',
+  textId: string,
   duration: number = 0.8,
   stagger: number = 0.005,
   delay: number = 0,
@@ -217,9 +217,10 @@ const animateLoadingPath = (path: Ref<SVGPathElement>, targetPath: string) => {
         gsap.set('#loading-screen', { display: 'none' });
       },
       onStart: () => {
-        window.scrollTo(0, 0);
         setTimeout(() => {
           animateHeroNav();
+          document.body.classList.remove('stop-scrolling');
+          window.scrollTo(0, 0);
         }, 250);
       },
     },
@@ -288,7 +289,7 @@ const animateHeroNav = () => {
     ease: 'power4.inOut',
   });
 
-  animateSplitText('#whoAmI .letters');
+  animateSplitText('#whoAmI .letters', '#whoAmI .letters');
 
   gsap.to(['#location', '#art'], {
     opacity: 1,