feat: Add GSAP for animations (#199)

* feat: Add GSAP for animtations

* feat: Rotate profile card img on scroll

* fix: Fix jest error

* style: Animate text on page load

app/page.tsx

@@ -21,7 +21,7 @@ export const revalidate = 3600; // revalidate at most every hour
 export default function HomePage() {
   return (
     <>
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div className="rotate-container grid grid-cols-1 gap-4 sm:grid-cols-2">
         <ProfileCard />
         <div className="grid grid-cols-2 gap-4">
           <GithubCard {...schema.githubSchema} />

components/cards/profile-card/profile-card.tsx

@@ -1,6 +1,34 @@
+'use client';
+
 import Image from 'next/image';
+import gsap from 'gsap/dist/gsap'; // import from /dist to avoid ESM compiler issues
+import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; // import from /dist to avoid ESM compiler issues
+import { TextPlugin } from 'gsap/dist/TextPlugin'; // import from /dist to avoid ESM compiler issues
+import { useGSAP } from '@gsap/react';
+
+gsap.registerPlugin(ScrollTrigger);
+gsap.registerPlugin(TextPlugin);
 
 export function ProfileCard() {
+  useGSAP(() => {
+    gsap.to('.rotate-img', {
+      scrollTrigger: {
+        trigger: '.rotate-container', // start and end animation when element with this classname enters and leaves viewport
+        start: '-40px top', // start at -40px above the rotate-container top of viewport
+        end: 'bottom top', // end at bottom of rotate-container reaches top of scroller end
+        scrub: true,
+      },
+      rotation: 360,
+    });
+
+    gsap.to('.figcaption-container', {
+      duration: 3,
+      text: {
+        value: 'Welcome to the garden.',
+      },
+    });
+  });
+
   return (
     <div className="bottom-0 aspect-auto self-start rounded-xl border border-stone-400 bg-white/50 p-4 dark:bg-indigo-100/5 sm:sticky sm:top-10 sm:aspect-square">
       <div className="flex h-full flex-col items-center justify-center">
@@ -10,9 +38,9 @@ export function ProfileCard() {
           alt="A profile picture"
           width="128"
           height="128"
-          className="aspect-auto h-32 w-32 rounded-full duration-200 dark:grayscale dark:hover:grayscale-0"
+          className="rotate-img aspect-auto h-32 w-32 rounded-full"
         />
-        <figcaption className="mt-2 text-center text-sm">Welcome to the garden.</figcaption>
+        <figcaption className="figcaption-container text-b mt-2 text-center text-sm"></figcaption>
       </div>
     </div>
   );

package.json

@@ -15,6 +15,7 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.1",
     "@octokit/rest": "^21.0.0",
     "@octokit/types": "^13.5.0",
     "@types/node": "20.14.2",