Skip to content

gsap basic functions #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nknaleena101 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

gsap basic functions #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
600626c
gsap basics 1
nknaleena101 Dec 24, 2025
999c33b
gsap from
nknaleena101 Dec 24, 2025
6974dac
gsap fromTo
nknaleena101 Dec 24, 2025
660cc7f
gsap timeline
nknaleena101 Dec 24, 2025
2eea240
gsap stagger
nknaleena101 Dec 24, 2025
e55def2
gsap scrollTrigger
nknaleena101 Dec 24, 2025
5bc3e3b
text animation
nknaleena101 Dec 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
985 changes: 565 additions & 420 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
"preview": "vite preview"
},
"dependencies": {
"@gsap/react": "^2.1.2",
"gsap": "^3.14.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3"
Expand Down
12 changes: 12 additions & 0 deletions src/pages/GsapFrom.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

const GsapFrom = () => {
// TODO: Implement the gsap.from() method
useGSAP(() => {
gsap.from('#green-box', {
x: 250,
duration: 2,
repeat: -1,
yoyo: true,
ease: "power1.inOut"
})
},[]);

return (
<main>
Expand Down
18 changes: 17 additions & 1 deletion src/pages/GsapFromTo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

const GsapFromTo = () => {
// TODO: Implement the gsap.fromTo() method

useGSAP(() => {
gsap.fromTo('#red-box', {
x: 10,
borderRadius: 100,
},
{
x: 200,
duration: 2,
repeat: -1,
borderRadius: 0,
ease: "power1.out",
yoyo: true,
})
}, [])
return (
<main>
<h1>GsapFromTo</h1>
Expand Down
31 changes: 29 additions & 2 deletions src/pages/GsapScrollTrigger.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,32 @@
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/all";
import { useRef } from "react";

gsap.registerPlugin(ScrollTrigger);

const GsapScrollTrigger = () => {
const scrollRef = useRef();
// TODO: Implement the gsap scroll trigger
useGSAP(() => {
const boxes = gsap.utils.toArray(scrollRef.current.children);

boxes.forEach((box) => {
gsap.to(box, {
x: 250,
rotate: 360,
borderRadius: "100%",
scrollTrigger: {
trigger: box,
start: 'bottom bottom',
end: 'top 20%',
scrub: true,
},
ease: 'power1.inOut',
opacity: 100
Copy link

@coderabbitai coderabbitai bot Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix incorrect opacity value.

The opacity property should be between 0 and 1, not 100. While this will be clamped to 1, it indicates incorrect usage and should be fixed.

🔎 Proposed fix 
-        opacity: 100
+        opacity: 1
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
opacity: 100
opacity: 1
🤖 Prompt for AI Agents 
In src/pages/GsapScrollTrigger.jsx around line 26, the style uses opacity: 100
which is invalid (opacity must be 0–1); change the value to the intended
fractional value (e.g., 1 for fully opaque or 0.0–0.99 for transparency) so the
property is correct and not relying on clamping.

})
})
}, { scope: scrollRef })

return (
<main>
Expand Down Expand Up @@ -50,8 +77,8 @@ const GsapScrollTrigger = () => {
<path d="M5 12l7 7 7-7" />
</svg>
</div>

<div className="mt-20 w-full h-screen">
<div className="mt-20 w-full h-screen" ref={scrollRef}>
<div
id="scroll-pink"
className="scroll-box w-20 h-20 rounded-lg bg-pink-500"
Expand Down
31 changes: 24 additions & 7 deletions src/pages/GsapStagger.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

const GsapStagger = () => {
// TODO: Implement the gsap.stagger() method
Copy link

@coderabbitai coderabbitai bot Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove the obsolete TODO comment.

The stagger animation is now fully implemented, so the TODO comment should be removed.

🔎 Proposed fix 
-  // TODO: Implement the gsap.stagger() method
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// TODO: Implement the gsap.stagger() method
🤖 Prompt for AI Agents 
In src/pages/GsapStagger.jsx around line 5 the file contains an obsolete TODO
comment "// TODO: Implement the gsap.stagger() method"; remove that comment line
so the codebase no longer references an already-implemented task and keep the
file clean of outdated TODOs.

useGSAP(() => {
gsap.to(".stagger-box", {
y: 200,
repeat: -1,
yoyo: true,
ease: "power1.inOut",
rotate: 180,
duration: 1,
stagger: {
amount: 0.4,
ease: "power1.inOut",
}
})
}, [])

return (
<main>
Expand Down Expand Up @@ -32,13 +49,13 @@ const GsapStagger = () => {

<div className="mt-20">
<div className="flex gap-5">
<div className="w-20 h-20 bg-indigo-200 rounded-lg stagger-box" />
<div className="w-20 h-20 bg-indigo-300 rounded-lg stagger-box" />
<div className="w-20 h-20 bg-indigo-400 rounded-lg stagger-box" />
<div className="w-20 h-20 bg-indigo-500 rounded-lg stagger-box" />
<div className="w-20 h-20 bg-indigo-600 rounded-lg stagger-box" />
<div className="w-20 h-20 bg-indigo-700 rounded-lg stagger-box" />
<div className="w-20 h-20 bg-indigo-800 rounded-lg stagger-box" />
<div className="w-20 h-20 bg-indigo-200 rounded-lg stagger-box border-t-4 border-t-red-500" />
<div className="w-20 h-20 bg-indigo-300 rounded-lg stagger-box border-t-4 border-t-red-500" />
<div className="w-20 h-20 bg-indigo-400 rounded-lg stagger-box border-t-4 border-t-red-500" />
<div className="w-20 h-20 bg-indigo-500 rounded-lg stagger-box border-t-4 border-t-red-500" />
<div className="w-20 h-20 bg-indigo-600 rounded-lg stagger-box border-t-4 border-t-red-500" />
<div className="w-20 h-20 bg-indigo-700 rounded-lg stagger-box border-t-4 border-t-red-500" />
<div className="w-20 h-20 bg-indigo-800 rounded-lg stagger-box border-t-4 border-t-red-500" />
</div>
</div>
</main>
Expand Down
18 changes: 18 additions & 0 deletions src/pages/GsapText.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,24 @@
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

const GsapText = () => {
// TODO: Implement gsap text animation
Copy link

@coderabbitai coderabbitai bot Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove outdated TODO comment.

The GSAP text animation has been implemented, so this TODO comment is no longer relevant and should be removed.

🔎 Proposed fix 
-  // TODO: Implement gsap text animation
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// TODO: Implement gsap text animation
🤖 Prompt for AI Agents 
In src/pages/GsapText.jsx around line 5, remove the outdated "// TODO: Implement
gsap text animation" comment because the animation has been implemented; simply
delete that line (and any leftover empty line if necessary) to keep the file
clean and up-to-date.

useGSAP(() => {
gsap.to("#text", {
opacity: 1,
y: 0,
})
gsap.fromTo(".para", {
opacity:0,
y: 60,
}, {
opacity: 1,
y: 0,
delay: 0.5,
stagger: 0.4,
})

}, [])
return (
<main>
<h1 id="text" className="opacity-0 translate-y-10">
Expand Down
36 changes: 34 additions & 2 deletions src/pages/GsapTimeline.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,31 @@
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

const GsapTimeline = () => {
// TODO: Implement the gsap timeline
const timeLine = gsap.timeline({
repeat: -1, repeatDelay: 1, yoyo: true,
});
Comment on lines +6 to +8
Copy link

@coderabbitai coderabbitai bot Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: Timeline recreated on every render causing memory leaks.

The timeline is created at the component's top level, which means it's recreated on every render. This causes:

  • Memory leaks from unreleased timeline instances
  • Unpredictable animation behavior
  • Play/Pause button referencing different timeline instances
🔎 Recommended fix using useRef

Import useRef and move the timeline creation inside useGSAP:

-import { useGSAP } from "@gsap/react";
+import { useGSAP } from "@gsap/react";
+import { useRef } from "react";
 import gsap from "gsap";
 
 const GsapTimeline = () => {
   // TODO: Implement the gsap timeline
-  const timeLine = gsap.timeline({
-    repeat: -1, repeatDelay: 1, yoyo: true,
-  });
+  const timelineRef = useRef();
+
   useGSAP(() => {
+    timelineRef.current = gsap.timeline({
+      repeat: -1, repeatDelay: 1, yoyo: true,
+    });
-    timeLine.to("#yellow-box", {
+    timelineRef.current.to("#yellow-box", {
       x: 200,
       rotation: 360,
       borderRadius: "100%",
       ease: 'power1.inOut',
       backgroundColor: "green"
     })
-    timeLine.to("#yellow-box", {
+    timelineRef.current.to("#yellow-box", {
       x: 0,
       y: 100,
       backgroundColor: "red",
       ease: "power1.inOut"
     })
-    timeLine.to('#yellow-box', {
+    timelineRef.current.to('#yellow-box', {
       x:200,
       ease: "power1.inOut",
       backgroundColor: "blue"
     })
   }, []);

And update the button to use the ref:

       <button onClick={() => {
-        if(timeLine.paused()) {
-          timeLine.play();
+        if(timelineRef.current.paused()) {
+          timelineRef.current.play();
         } else {
-          timeLine.pause();
+          timelineRef.current.pause();
         }
       }}>Play/Pause</button>
🤖 Prompt for AI Agents 
In src/pages/GsapTimeline.jsx around lines 6 to 8: the gsap.timeline is created
at the component top level and thus recreated on every render; move timeline
creation into a stable ref inside your useGSAP hook (import useRef), e.g. create
a timelineRef = useRef(null) and initialize timelineRef.current only once (if
null) with gsap.timeline({ repeat: -1, repeatDelay: 1, yoyo: true }) inside an
effect or the hook initialization; update Play/Pause button handlers to call
timelineRef.current.play()/pause() (or toggle) instead of referencing the
transient variable; remove the top-level timeline declaration and add cleanup on
unmount (timelineRef.current.kill() or clear()) to prevent leaks.

useGSAP(() => {
timeLine.to("#yellow-box", {
x: 200,
rotation: 360,
borderRadius: "100%",
ease: 'power1.inOut',
backgroundColor: "green"
})
timeLine.to("#yellow-box", {
x: 0,
y: 100,
backgroundColor: "red",
ease: "power1.inOut"
})
timeLine.to('#yellow-box', {
x:200,
ease: "power1.inOut",
backgroundColor: "blue"
})
}, []);

return (
<main>
Expand Down Expand Up @@ -35,9 +61,15 @@ 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 id="yellow-box" className="w-10 h-10 bg-yellow-500 rounded-lg" />
</div>
</main>
);
Expand Down
12 changes: 12 additions & 0 deletions src/pages/GsapTo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

const GsapTo = () => {
// TODO: Implement the gsap.to() method
useGSAP(() => {
gsap.to('#blue-box', {
x: 250,
repeat: -1,
yoyo: true,
rotate: 360,
duration: 2,
})
}, []);

return (
<main>
Expand Down