From c8857f9ecd41f29bf65f2a93e9f950f9ff52ed03 Mon Sep 17 00:00:00 2001 From: Shubham Giri Date: Sun, 15 Dec 2024 21:22:33 +0530 Subject: [PATCH 1/3] started learning gsap --- package-lock.json | 16 ++++++++++++++++ package.json | 2 ++ src/pages/GsapTo.jsx | 8 ++++++++ 3 files changed, 26 insertions(+) diff --git a/package-lock.json b/package-lock.json index 9c65f05..3c178ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "gsap-cc-starter", "version": "0.0.0", "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" @@ -826,6 +828,15 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@gsap/react": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.1.tgz", + "integrity": "sha512-apGPRrmpqxvl1T6Io1KgT8tFU+IuACI6z4zmT7t8+PASserJeLVRFJdSNUFA2Xb/eVkZI1noE8LIrY/w/oJECw==", + "dependencies": { + "gsap": "^3.12.5", + "react": ">=16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -2737,6 +2748,11 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/gsap": { + "version": "3.12.5", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz", + "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==" + }, "node_modules/has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", diff --git a/package.json b/package.json index 95d725f..cff307e 100644 --- a/package.json +++ b/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" diff --git a/src/pages/GsapTo.jsx b/src/pages/GsapTo.jsx index d9ad616..297962a 100644 --- a/src/pages/GsapTo.jsx +++ b/src/pages/GsapTo.jsx @@ -1,5 +1,13 @@ +import { useGSAP } from "@gsap/react"; +import gsap from "gsap"; + const GsapTo = () => { // TODO: Implement the gsap.to() method + useGSAP(() => { + gsap.to("#blue-box", { + x: 350, + }); + }, []); return (
From 531bccba51c329a86bced8cfa18792af496620e0 Mon Sep 17 00:00:00 2001 From: Shubham Giri Date: Mon, 16 Dec 2024 21:34:44 +0530 Subject: [PATCH 2/3] added some animation --- src/pages/GsapFrom.jsx | 13 +++++++++++ src/pages/GsapFromTo.jsx | 22 ++++++++++++++++++ src/pages/GsapTimeline.jsx | 47 +++++++++++++++++++++++++++++++++++++- src/pages/GsapTo.jsx | 5 ++++ 4 files changed, 86 insertions(+), 1 deletion(-) diff --git a/src/pages/GsapFrom.jsx b/src/pages/GsapFrom.jsx index 124aea6..266a540 100644 --- a/src/pages/GsapFrom.jsx +++ b/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 (
diff --git a/src/pages/GsapFromTo.jsx b/src/pages/GsapFromTo.jsx index 3526c98..301b83f 100644 --- a/src/pages/GsapFromTo.jsx +++ b/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 (
diff --git a/src/pages/GsapTimeline.jsx b/src/pages/GsapTimeline.jsx index ed192fc..9f94004 100644 --- a/src/pages/GsapTimeline.jsx +++ b/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 (
@@ -35,7 +70,17 @@ const GsapTimeline = () => {

- +
diff --git a/src/pages/GsapTo.jsx b/src/pages/GsapTo.jsx index 297962a..d83ac65 100644 --- a/src/pages/GsapTo.jsx +++ b/src/pages/GsapTo.jsx @@ -6,6 +6,11 @@ const GsapTo = () => { useGSAP(() => { gsap.to("#blue-box", { x: 350, + repeat: -1, + yoyo: true, + rotation: 180, + duration: 2, + ease: "elastic", }); }, []); From 310d88ec908098964de250fa27652316fa4e8b42 Mon Sep 17 00:00:00 2001 From: Shubham Giri Date: Mon, 16 Dec 2024 21:49:21 +0530 Subject: [PATCH 3/3] done --- src/pages/GsapStagger.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/GsapStagger.jsx b/src/pages/GsapStagger.jsx index bdb8cc3..88f788f 100644 --- a/src/pages/GsapStagger.jsx +++ b/src/pages/GsapStagger.jsx @@ -7,7 +7,7 @@ const GsapStagger = () => {

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.