fix: reduce the end of scroll trigger

Signed-off-by: sahadat-sk <[email protected]>
keploy · Mar 21, 2024 · 4234154 · 4234154
1 parent f597257
commit 4234154
Showing 1 changed file with 44 additions and 47 deletions.
diff --git a/components/testimonials.tsx b/components/testimonials.tsx
@@ -1,31 +1,31 @@
-'use client';
-import Image from 'next/image';
-import MarutiLogo from '@/public/images/users/Logo_for_Maruti_Suzuki.svg';
-import NutanixLogo from '@/public/images/users/Nutanix_Logo.svg';
-import { Carousel } from 'react-responsive-carousel';
-import 'react-responsive-carousel/lib/styles/carousel.min.css';
-import { useRef, useState } from 'react';
-import gsap from 'gsap';
-import { useGSAP } from '@gsap/react';
-import { ScrollTrigger } from 'gsap/all';
-import _ScrollTrigger from 'gsap/ScrollTrigger';
+"use client";
+import Image from "next/image";
+import MarutiLogo from "@/public/images/users/Logo_for_Maruti_Suzuki.svg";
+import NutanixLogo from "@/public/images/users/Nutanix_Logo.svg";
+import { Carousel } from "react-responsive-carousel";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { useRef, useState } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { ScrollTrigger } from "gsap/all";
+import _ScrollTrigger from "gsap/ScrollTrigger";
 gsap.registerPlugin(useGSAP);
 gsap.registerPlugin(ScrollTrigger);
 
 const testimonialData = [
   {
     image1: MarutiLogo,
     content1:
-      'Our recent collaboration with Keploy was truly remarkable. Keploy team provided exceptional support and remained highly proactive throughout the entire experience. Keploy platform has added business value to Maruti Suzuki.',
-    author1: 'Executive Member',
-    company1: '@Maruti Suzuki',
+      "Our recent collaboration with Keploy was truly remarkable. Keploy team provided exceptional support and remained highly proactive throughout the entire experience. Keploy platform has added business value to Maruti Suzuki.",
+    author1: "Executive Member",
+    company1: "@Maruti Suzuki",
   },
   {
     image1: NutanixLogo,
     content1:
-      'Makes it easy to unit test my complex systems with realistic test data.',
-    author1: 'Staff Engineer',
-    company1: '@Nutanix',
+      "Makes it easy to unit test my complex systems with realistic test data.",
+    author1: "Staff Engineer",
+    company1: "@Nutanix",
   },
   // Add more testimonials as needed
 ];
@@ -36,16 +36,16 @@ const testimonialDataMobile = [
   {
     image: MarutiLogo,
     content:
-      'Our recent collaboration with Keploy was truly remarkable. Keploy team provided exceptional support and remained highly proactive throughout the entire experience. Keploy platform has added business value to Maruti Suzuki.',
-    author: 'Executive Member',
-    company: '@Maruti Suzuki',
+      "Our recent collaboration with Keploy was truly remarkable. Keploy team provided exceptional support and remained highly proactive throughout the entire experience. Keploy platform has added business value to Maruti Suzuki.",
+    author: "Executive Member",
+    company: "@Maruti Suzuki",
   },
   {
     image: NutanixLogo,
     content:
-      'Makes it easy to unit test my complex systems with realistic test data.',
-    author: 'Staff Engineer',
-    company: '@Nutanix',
+      "Makes it easy to unit test my complex systems with realistic test data.",
+    author: "Staff Engineer",
+    company: "@Nutanix",
   },
   // Add more testimonials as needed
 ];
@@ -61,11 +61,29 @@ const Testimonial = ({
   company: string;
   image: any;
 }) => {
+  const container = useRef(null);
+  useGSAP(
+    () => {
+      gsap.to(".quote-character", {
+        scrollTrigger: {
+          trigger: ".quote-container",
+          toggleActions: "restart pause restart none",
+        },
+        opacity: 1,
+        stagger: {
+          amount: 1.5,
+          ease: "power3.in",
+        },
+      });
+    },
+    { scope: container }
+  );
+
   return (
-    <div className="px-4">
+    <div ref={container} className="px-4">
       <p className="text-lg text-white md:text-2xl quote-container">
         <span className="quote-character opacity-[0.2]">"</span>
-        {content.split('').map((character, index) => {
+        {content.split("").map((character, index) => {
           if (character) {
             return (
               <span key={index} className="quote-character opacity-[0.2]">
@@ -88,30 +106,9 @@ const Testimonial = ({
 };
 export default function Testimonials() {
   const [index, setIndex] = useState(0);
-  const container = useRef(null);
-
-  useGSAP(
-    () => {
-      gsap.to('.quote-character', {
-        scrollTrigger: {
-          trigger: '.quote-container',
-          start: 'top bottom',
-          end: 'bottom+=500 bottom',
-          scrub: 3,
-        },
-        opacity: 1,
-        duration: 1,
-        stagger: 1,
-      });
-    },
-    { scope: container }
-  );
 
   return (
-    <section
-      ref={container}
-      className="relative py-24 bg-gradient-to-tr from-secondary-400 to-secondary-100"
-    >
+    <section className="relative py-24 bg-gradient-to-tr from-secondary-400 to-secondary-100">
       <div className="flex flex-col max-w-6xl gap-16 mx-auto">
         {testimonialDataMobile.map((testimonial, index) => (
           <Testimonial