Merge pull request #83 from guyromellemagayano/refactor/aos-adjustments

Optimize AOS setup with client-side checks and improve animation timing

Author: jofftiquez

src/boot/aos.js

@@ -1,7 +1,9 @@
 import { boot } from 'quasar/wrappers';
 import AOS from 'aos';
 import 'aos/dist/aos.css'; // You can also use <link> for styles
-// ..
-export default boot(({ app }) => {
-  AOS.init();
+
+export default boot(() => {
+  AOS.init({
+    once: true, // Don't trigger animations on scroll back up
+  });
 });

src/boot/vue-smooth-scroll.js

@@ -1,4 +1,6 @@
+import { boot } from 'quasar/wrappers';
 import VueSmoothScroll from 'vue3-smooth-scroll';
-export default ({ app }) => {
+
+export default boot(({ app }) => {
   app.use(VueSmoothScroll);
-};
+});

src/layouts/MainLayout.vue

@@ -178,10 +178,16 @@ export default {
     }
 
     function onScrollToTop () {
-      smoothScroll({
-        scrollTo: document.getElementById('top'),
-        updateHistory: false,
-      });
+      if (smoothScroll) {
+        // Use smoothScroll to scroll to top (position 0)
+        smoothScroll({
+          scrollTo: 0,
+          updateHistory: false,
+        });
+      } else {
+        // Fallback to native smooth scroll
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }
     }
 
     function onGoToPanel (card) {