made some changes

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.1",
+    "gsap": "^3.12.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3"

src/pages/GsapFrom.jsx

@@ -1,5 +1,18 @@
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+
 const GsapFrom = () => {
   // TODO: Implement the gsap.from() method
+  useGSAP(() => {
+    gsap.from("#green-box", {
+      x: 350,
+      repeat: -1,
+      yoyo: true,
+      rotation: 180,
+      duration: 2,
+      ease: "power1.inOut",
+    });
+  }, []);
 
   return (
     <main>

src/pages/GsapFromTo.jsx

@@ -1,5 +1,27 @@
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+
 const GsapFromTo = () => {
   // TODO: Implement the gsap.fromTo() method
+  useGSAP(() => {
+    gsap.fromTo(
+      "#red-box",
+      {
+        x: 0,
+        rotation: 0,
+        borderRadius: "0%",
+      },
+      {
+        x: 350,
+        repeat: -1,
+        yoyo: true,
+        borderRadius: "100%",
+        rotation: 180,
+        duration: 2,
+        ease: "bounce.out",
+      }
+    );
+  }, []);
 
   return (
     <main>

src/pages/GsapStagger.jsx

@@ -7,7 +7,7 @@ const GsapStagger = () => {
 
       <p className="mt-5 text-gray-500">
         GSAP stagger is a feature that allows you to apply animations with a
-        staggered delay to a group of elements.
+        staggered delay to a group of elements. 
       </p>
 
       <p className="mt-5 text-gray-500">

src/pages/GsapTimeline.jsx

@@ -1,5 +1,40 @@
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+
 const GsapTimeline = () => {
   // TODO: Implement the gsap timeline
+  const timeline = gsap.timeline({
+    repeat: -1,
+    repeatDelay: 1,
+    yoyo: true,
+  });
+
+  useGSAP(() => {
+    timeline.to("#yellow-box", {
+      x: 250,
+      rotation: 360,
+      borderRadius: "100%",
+      duration: 2,
+      ease: "back.inOut",
+    });
+
+    timeline.to("#yellow-box", {
+      y: 250,
+      scale: 2,
+      rotation: 360,
+      borderRadius: "100%",
+      duration: 2,
+      ease: "back.inOut",
+    });
+
+    timeline.to("#yellow-box", {
+      x: 500,
+      scale: 1,
+      rotation: 360,
+      borderRadius: "8px",
+      ease: "back.inOut",
+    });
+  }, []);
 
   return (
     <main>
@@ -35,7 +70,17 @@ const GsapTimeline = () => {
       </p>
 
       <div className="mt-20 space-y-10">
-        <button onClick={() => {}}>Play/Pause</button>
+        <button
+          onClick={() => {
+            if (timeline.paused()) {
+              timeline.play();
+            } else {
+              timeline.pause();
+            }
+          }}
+        >
+          Play/Pause
+        </button>
 
         <div id="yellow-box" className="w-20 h-20 bg-yellow-500 rounded-lg" />
       </div>

src/pages/GsapTo.jsx

@@ -1,5 +1,18 @@
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+
 const GsapTo = () => {
   // TODO: Implement the gsap.to() method
+  useGSAP(() => {
+    gsap.to("#blue-box", {
+      x: 350,
+      repeat: -1,
+      yoyo: true,
+      rotation: 180,
+      duration: 2,
+      ease: "elastic",
+    });
+  }, []);
 
   return (
     <main>