GSAP Subsection Scroll Triggers

AjelmarMedina · Apr 21, 2024 · fbf749d · fbf749d
1 parent 7ca6725
commit fbf749d
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,12 +14,14 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.0",
     "@prisma/client": "^5.12.1",
     "@radix-ui/react-slot": "^1.0.2",
     "@vercel/analytics": "^1.2.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.27",
+    "gsap": "^3.12.5",
     "lucide-react": "^0.364.0",
     "next": "14.1.4",
     "react": "^18",

diff --git a/src/components/(about-me)/Certifications.tsx b/src/components/(about-me)/Certifications.tsx
@@ -1,22 +1,47 @@
 'use client';
 import { certificationsFb, fetcher } from '@/lib/data';
 import { cn } from "@/lib/utils";
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 import { Button, ButtonSet } from '../ui/button';
 import { Skeleton } from '../ui/skeleton';
 
+gsap.registerPlugin(useGSAP, ScrollTrigger);
 
 export function Certifications() {
   const [selected, setSelected] = useState(0);
   const [certifications, setCertifications] = useState(certificationsFb);
   const { data, isLoading } = useSWR("/data/certifications", fetcher);
+  const content = useRef(null);
+  const grid = useRef(null);
 
   useEffect(() => {
     if (!isLoading) setCertifications(data.certifications);
   }, [data, isLoading]);
 
+  useGSAP(() => {
+    gsap.from(content.current, {
+      scrollTrigger: {
+        trigger: content.current,
+      },
+      opacity: 0,
+      x: -128,
+      duration: 1.5,
+    })
+    gsap.from(grid.current, {
+      scrollTrigger: {
+        trigger: grid.current,
+      },
+      opacity: 0,
+      x: 128,
+      duration: 1.5,
+    })
+  })
+
   function Grid() {
     return (
       <div
@@ -87,6 +112,7 @@ export function Certifications() {
     >
       <div
         className="flex flex-col items-center space-y-10 w-fit lg:items-start"
+        ref={content}
       >
         <div className="w-full">
           <h1 className="min-w-full font-bold prose-display-md text-center md:prose-display-lg lg:text-start">
@@ -108,7 +134,9 @@ export function Certifications() {
         )}
         <ButtonSet />
       </div>
-      <Grid />
+      <div className='w-full' ref={grid}>
+        <Grid />
+      </div>
     </div>
   );
 }

diff --git a/src/components/(about-me)/Experiences.tsx b/src/components/(about-me)/Experiences.tsx
@@ -1,28 +1,52 @@
 'use client';
 import { experiencesFb, fetcher } from '@/lib/data';
 import { cn } from "@/lib/utils";
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 import { Button, ButtonSet } from '../ui/button';
 import { Skeleton } from '../ui/skeleton';
 
+gsap.registerPlugin(useGSAP, ScrollTrigger)
 
 export function Experiences() {
   const [selected, setSelected] = useState(0);
   const [experiences, setExperiences] = useState(experiencesFb);
   const { data, isLoading } = useSWR("/data/experiences", fetcher);
+  const content = useRef(null);
+  const grid = useRef(null);
 
   useEffect(() => {
     if (!isLoading) setExperiences(data.experiences);
   }, [data, isLoading]);
 
+  useGSAP(() => {
+    gsap.from(content.current, {
+      scrollTrigger: {
+        trigger: content.current,
+      },
+      opacity: 0,
+      x: 128,
+      duration: 1.5,
+    })
+    gsap.from(grid.current, {
+      scrollTrigger: {
+        trigger: grid.current,
+      },
+      opacity: 0,
+      x: -128,
+      duration: 1.5,
+    })
+  })
+
   function Grid() {
     return (
       <div
-        className="hidden w-full min-h-[600px] lg:grid md:grid-cols-2 md:grid-rows-3 md:gap-0.5"
+        className="_grid hidden w-full min-h-[600px] lg:grid md:grid-cols-2 md:grid-rows-3 md:gap-0.5"
       >
-
         {experiences.map((experience, index) => (
           <div
             key={index}
@@ -86,9 +110,12 @@ export function Experiences() {
     <div
       className="flex flex-col justify-between items-center w-full h-fit px-4 py-14 bg-primary-100 text-neutral-black lg:grid lg:grid-cols-2 md:gap-[72px] md:space-x-reverse md:px-28 md:py-24"
     >
-      <Grid />
+      <div className='w-full' ref={grid}>
+        <Grid />
+      </div>
       <div
         className="flex flex-col items-center space-y-10 w-fit lg:items-start"
+        ref={content}
       >
         <div className="w-full">
           <h1 className="min-w-full font-bold prose-display-md text-center md:prose-display-lg lg:text-start">

diff --git a/src/components/(about-me)/Skillsets.tsx b/src/components/(about-me)/Skillsets.tsx
@@ -1,21 +1,47 @@
 'use client';
 import { fetcher, skillsFb } from '@/lib/data';
 import { cn } from "@/lib/utils";
+import { useGSAP } from '@gsap/react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 import { Button, ButtonSet } from '../ui/button';
 import { Skeleton } from '../ui/skeleton';
 
+gsap.registerPlugin(ScrollTrigger, useGSAP);
+
 export function Skillsets() {
   const [selected, setSelected] = useState(0);
   const [skills, setSkills] = useState(skillsFb);
   const { data, isLoading } = useSWR("/data/skills", fetcher);
+  const content = useRef(null);
+  const grid = useRef(null);
 
   useEffect(() => {
     if (!isLoading) setSkills(data.skills);
   }, [data, isLoading]);
 
+  useGSAP(() => {
+    gsap.from(content.current, {
+      scrollTrigger: {
+        trigger: content.current,
+      },
+      opacity: 0,
+      x: -128,
+      duration: 1.5,
+    })
+    gsap.from(grid.current, {
+      scrollTrigger: {
+        trigger: grid.current,
+      },
+      opacity: 0,
+      x: 128,
+      duration: 1.5,
+    })
+  })
+
   function Grid() {
     return (
       <div
@@ -86,6 +112,7 @@ export function Skillsets() {
     >
       <div
         className="flex flex-col justify-center items-center space-y-10 w-fit lg:min-h-[520px] lg:items-start"
+        ref={content}
       >
         <div className="w-full">
           <h1 className="min-w-full font-bold prose-display-md text-center text-[80%] md:prose-display-lg lg:text-start">
@@ -107,7 +134,9 @@ export function Skillsets() {
         )}
         <ButtonSet />
       </div>
-      <Grid />
+      <div className='w-full' ref={grid}>
+        <Grid />
+      </div>
     </div>
   );
 }
diff --git a/src/components/about-me.tsx b/src/components/about-me.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { Certifications } from "./(about-me)/Certifications";
 import { Experiences } from "./(about-me)/Experiences";
 import { Skillsets } from "./(about-me)/Skillsets";
@@ -6,7 +7,10 @@ import { Header } from "./ui/header-section";
 export function AboutMe() {
   return (
     <div
-      className="flex flex-col items-center w-full h-fit bg-neutral-50 max-h-0 overflow-clip animate-show-sections"
+      className={cn(
+        "flex flex-col items-center w-full h-fit bg-neutral-50 overflow-clip",
+        (false && "max-h-0 animate-show-sections") // toggle hero intro for development
+      )}
     >
       <Header
         header="About Me"