minor css refactor, timeline animation refactor

ayush013 · Apr 9, 2022 · b8025a8 · b8025a8
1 parent 64d2f28
commit b8025a8
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 38 deletions.
diff --git a/components/home/projects.tsx b/components/home/projects.tsx
@@ -100,12 +100,8 @@ const ProjectsSection = ({ isDesktop }: IDesktop) => {
       className="flex flex-col inner-container transform-gpu"
       ref={sectionTitleElementRef}
     >
-      <p className="uppercase tracking-widest text-gray-200 text-sm seq">
-        PROJECTS
-      </p>
-      <h1 className="md:text-5xl text-4xl font-bold text-gradient seq w-fit mt-2">
-        My Works
-      </h1>
+      <p className="section-title-sm seq">PROJECTS</p>
+      <h1 className="section-heading seq mt-2">My Works</h1>
       <h2 className="text-2xl md:max-w-3xl w-full seq max-w-sm mt-2">
         I have contributed in over 20+ projects ranging from Frontend
         development, UI/UX design, Open Source, and Motion Graphics

diff --git a/components/home/skills.tsx b/components/home/skills.tsx
@@ -7,7 +7,7 @@ import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
 const SKILL_STYLES = {
   SECTION:
     "w-full relative select-none mb-24 section-container py-12 flex flex-col justify-center",
-  SKILL_TITLE: "uppercase tracking-widest text-gray-200 text-sm mb-4 seq",
+  SKILL_TITLE: "section-title-sm mb-4 seq",
 };
 
 const SkillsSection = () => {
@@ -40,12 +40,8 @@ const SkillsSection = () => {
 
   const renderSectionTitle = (): React.ReactNode => (
     <div className="flex flex-col">
-      <p className="uppercase tracking-widest text-gray-200 text-sm seq">
-        SKILLS
-      </p>
-      <h1 className="md:text-5xl text-4xl font-bold text-gradient seq w-fit mt-2">
-        My Skills
-      </h1>
+      <p className="section-title-sm seq">SKILLS</p>
+      <h1 className="section-heading seq mt-2">My Skills</h1>
       <h2 className="text-2xl md:max-w-2xl w-full seq mt-2">
         I like to take responsibility to craft aesthetic user experience using
         modern frontend architecture.{" "}

diff --git a/components/home/timeline.tsx b/components/home/timeline.tsx
@@ -381,45 +381,64 @@ const TimelineSection = ({ isDesktop }: IDesktop) => {
     });
   };
 
-  useEffect(() => {
-    // Generate and set the timeline svg
-    setTimelineSvg(svgContainer, timelineSvg);
-
+  const initScrollTrigger = (): {
+    timeline: GSAPTimeline;
+    duration: number;
+  } => {
     const timeline = gsap
       .timeline({ defaults: { ease: Linear.easeNone, duration: 0.44 } })
       .addLabel("start");
+
     let duration: number;
+    let trigger: HTMLDivElement;
+    let start: string;
+    let end: string;
+    let additionalConfig = {};
 
+    // Slide as a trigger for Desktop
     if (isDesktop && !isSmallScreen()) {
       // Animation for right side slides
       setSlidesAnimation(timeline);
 
       const platformHeight =
         screenContainer.current.getBoundingClientRect().height;
 
-      ScrollTrigger.create({
-        trigger: screenContainer.current,
-        start: `top ${(window.innerHeight - platformHeight) / 2}`,
-        end: `+=${svgLength - platformHeight}`,
+      trigger = screenContainer.current;
+      start = `top ${(window.innerHeight - platformHeight) / 2}`;
+      end = `+=${svgLength - platformHeight}`;
+      additionalConfig = {
         pin: true,
         pinSpacing: true,
-        scrub: 0,
-        animation: timeline,
-      });
+      };
       duration = timeline.totalDuration() / 15;
     } else {
       // Clearing out the right side on mobile devices
       screenContainer.current.innerHTML = "";
-      ScrollTrigger.create({
-        trigger: svgContainer.current,
-        start: "top center",
-        end: `+=${svgLength}`,
-        scrub: 0,
-        animation: timeline,
-      });
+
+      trigger = svgContainer.current;
+      start = "top center";
+      end = `+=${svgLength}`;
       duration = 3;
     }
 
+    ScrollTrigger.create({
+      ...additionalConfig,
+      trigger,
+      start,
+      end,
+      scrub: 0,
+      animation: timeline,
+    });
+    return { timeline, duration };
+  };
+
+  useEffect(() => {
+    // Generate and set the timeline svg
+    setTimelineSvg(svgContainer, timelineSvg);
+
+    const { timeline, duration }: { timeline: GSAPTimeline; duration: number } =
+      initScrollTrigger();
+
     // Animation for Timeline SVG
     animateTimeline(timeline, duration);
   }, [
@@ -474,12 +493,8 @@ const TimelineSection = ({ isDesktop }: IDesktop) => {
 
   const renderSectionTitle = (): React.ReactNode => (
     <div className="flex flex-col">
-      <p className="uppercase tracking-widest text-gray-200 text-sm seq">
-        MILESTONES
-      </p>
-      <h1 className="md:text-5xl text-4xl font-bold text-gradient seq w-fit mt-2">
-        Timeline
-      </h1>
+      <p className="section-title-sm seq">MILESTONES</p>
+      <h1 className="section-heading seq mt-2">Timeline</h1>
       <h2 className="text-2xl md:max-w-2xl w-full seq mt-2">
         A quick recap of proud moments
       </h2>

diff --git a/styles/globals.scss b/styles/globals.scss
@@ -246,7 +246,7 @@ input[type="checkbox"] {
 }
 
 footer {
-  background: url(/footer-bg.svg),
+  background: url("/footer-bg.svg"),
     linear-gradient(
       153.86deg,
       #02494c 0%,
@@ -255,3 +255,11 @@ footer {
       #004865 95.52%
     );
 }
+
+.section-heading {
+  @apply md:text-5xl text-4xl font-bold text-gradient w-fit;
+}
+
+.section-title-sm {
+  @apply uppercase tracking-widest text-gray-200 text-sm;
+}