update some animations

Hetari · Oct 22, 2024 · 3ee8c4f · 3ee8c4f
1 parent 85b53f7
commit 3ee8c4f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 30 deletions.
diff --git a/src/animations/index.ts b/src/animations/index.ts
@@ -380,14 +380,14 @@ const animateHeroNav = () => {
 // A little bit about me animation
 const animateAboutMeSectionLeave = (id: string) => {
   gsap.to(id, {
-    yPercent: -10,
+    yPercent: -5,
     scale: 0.95,
-    ease: 'power1',
+    // ease: 'power1',
     scrollTrigger: {
       trigger: id,
       start: '75% bottom',
       // end: 'bottom top',
-      scrub: 1,
+      scrub: 0.1,
     },
   });
 };

diff --git a/src/components/sections/People.vue b/src/components/sections/People.vue
@@ -2,7 +2,7 @@
   <!-- common-padding  -->
   <section
     id="testimonials-section"
-    class="common-padding relative mx-auto min-h-svh overflow-y-clip py-0 will-change-auto"
+    class="common-padding relative mx-auto min-h-svh -translate-y-0 overflow-y-clip py-0 will-change-transform"
   >
     <div
       class="grid w-full grid-cols-12 border-b-[1px] border-flax-smoke-300 pb-[clamp(2.25rem,2.1786rem_+_0.3571vi,2.5rem)]"
@@ -32,33 +32,26 @@
 </template>
 
 <script setup lang="ts">
-  import gsap from 'gsap';
-  import { ScrollTrigger } from 'gsap/all';
-  import { onMounted, onUpdated } from 'vue';
+  // import gsap from 'gsap';
+  // import { ScrollTrigger } from 'gsap/all';
+  // import { onMounted } from 'vue';
   import { Slider } from '../design';
 
-  gsap.registerPlugin(ScrollTrigger);
+  // gsap.registerPlugin(ScrollTrigger);
 
-  const animatePeopleSectionLeave = (id: string) => {
-    gsap.set(id, {
-      yPercent: -50,
-    });
-
-    gsap.to(id, {
-      scrollTrigger: {
-        trigger: id,
-        start: 'top 75%',
-        end: 'bottom center',
-        scrub: true,
-      },
-      ease: 'power1',
-      yPercent: 0,
-    });
-  };
-  onMounted(() => {
-    animatePeopleSectionLeave('#testimonials-section');
-  });
-  onUpdated(() => {
-    animatePeopleSectionLeave('#testimonials-section');
-  });
+  // const animatePeopleSectionLeave = (id: string) => {
+  //   gsap.to(id, {
+  //     scrollTrigger: {
+  //       trigger: id,
+  //       markers: true,
+  //       start: 'top 80%',
+  //       end: '100% end',
+  //     },
+  //     duration: 0.7,
+  //     y: '0',
+  //   });
+  // };
+  // onMounted(() => {
+  //   animatePeopleSectionLeave('#testimonials-section');
+  // });
 </script>