animations / add GSAP package

components/home-page/AboutUs.vue

@@ -19,6 +19,7 @@
       >
         <g clip-path="url(#clip0_836_14934)">
           <path
+          id="motion"
             d="M1556 177.906L1458.57 214.144C1346.1 255.98 1222.32 255.968 1109.86 214.108L772.5 88.5484L643.155 59.2008C567.222 41.9719 488.315 42.7151 412.72 61.3711L236.5 104.86L6.56556 168.432L-22.8608 174.781L-53.8923 177.905L-109 177.905"
             stroke="url(#paint0_linear_836_14934)"
             stroke-width="2"
@@ -130,9 +131,22 @@
   </div>
 </template>
 <script setup>
-  import { Swiper, SwiperSlide } from 'swiper/vue';
 
-// Import Swiper styles
-import 'swiper/css';
+import { onMounted, onUnmounted, ref } from "vue";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 
+import { MotionPathPlugin } from "gsap/MotionPathPlugin";
+gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
+
+const main = ref();
+let ctx;
+
+onMounted(() => {
+  ctx = gsap.context((self) => {
+    gsap.to(".line #motion", 
+    {strokeDashoffset: -300, repeat: -1, ease: "none", duration: 5});
+
+ 
+  })})
 </script>