From f717a6dc4f3ffbc2624c38071079c64447c398ab Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 25 Feb 2024 01:20:24 +0100
Subject: [PATCH] gsap animations demo

---
 package.json                            |  1 +
 src/components/Logo.tsx                 | 22 ++-----------------
 src/components/styles/Landing.styled.ts |  9 ++++++++
 src/sections/LandingSection.tsx         | 29 ++++++++++++++++++++-----
 4 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 83bb9a5..590ba2b 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.0",
     "i18next": "^23.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index de74e5d..1d21ce6 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -2,17 +2,7 @@ export default function Logo() {
   return (
     <svg width="196" height="196" viewBox="0 0 196 196" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g id="logo">
-        <rect
-          id="Rectangle 6"
-          x="3"
-          y="3"
-          width="189.852"
-          height="189.852"
-          rx="94.2731"
-          fill="white"
-          stroke="black"
-          strokeWidth="6"
-        />
+        <rect id="Rectangle 6" x="3" y="3" width="189.852" height="189.852" rx="94.2731" fill="white" stroke="black" strokeWidth="6" />
         <path
           id="Intersect"
           d="M165.266 168.76C147.661 185.514 123.907 195.852 97.926 195.852C58.4165 195.852 24.0555 171.944 8.63965 137.924C15.0762 132.88 21.0118 128.459 26.1811 124.608C37.8345 115.928 45.593 110.148 46.4152 106.682L47.8642 79.2739L56.7605 84.114L57.6568 79.2739L36.2911 70.1935L27.2107 65.0301C27.2107 65.0301 20.801 61.1131 24.0059 59.5107C27.2107 57.9082 31.6619 57.9082 31.6619 57.9082L62.6421 55.7717L71.5445 36.3645L98.4296 31.0231L112.851 30.3109L120.507 32.2694L126.561 33.6938L136.354 41.884L152.556 55.7717L153.547 79.2739L173.209 98.503L176.236 101.53C176.236 101.53 180.509 105.625 179.085 107.049C177.661 108.474 161.814 105.091 161.814 105.091L146.324 101.53L128.109 122.931L153.547 136.771L145.43 142.546C154.951 146.639 161.333 155.826 165.266 168.76Z"
@@ -27,15 +17,7 @@ export default function Logo() {
           <path id="Vector 17" d="M134.702 104.583L126.859 99.856L139.099 99.5168L134.702 104.583Z" fill="white" />
         </g>
         <mask id="mask1_904_20" maskUnits="userSpaceOnUse" x="91" y="81" width="29" height="24">
-          <rect
-            id="eye-left-mask"
-            x="97.7191"
-            y="81.3097"
-            width="26.6407"
-            height="10"
-            transform="rotate(35.672 97.7191 81.3097)"
-            fill="#D9D9D9"
-          >
+          <rect id="eye-left-mask" x="97.7191" y="81.3097" width="26.6407" height="10" transform="rotate(35.672 97.7191 81.3097)" fill="#D9D9D9">
             <animate id="op2" attributeName="y" dur="0.5s" values="81.3097;92;81.3097" begin="1s;op2.end+5s" />
           </rect>
         </mask>
diff --git a/src/components/styles/Landing.styled.ts b/src/components/styles/Landing.styled.ts
index ed0a01c..8e2ac20 100644
--- a/src/components/styles/Landing.styled.ts
+++ b/src/components/styles/Landing.styled.ts
@@ -27,7 +27,13 @@ export const StyledLandingWrapper = styled.div`
     }
   }
 
+  .logo {
+    opacity: 0;
+  }
+
   .landing_tech {
+    opacity: 0;
+
     h3 {
       position: relative;
       margin: 0;
@@ -93,10 +99,12 @@ export const StyledLandingRight = styled.div`
   .greeting {
     font-family: ${({ theme }) => theme.fonts.monospace};
     display: block;
+    opacity: 0;
   }
 
   .description {
     margin-top: 1em;
+    opacity: 0;
   }
 `;
 
@@ -104,6 +112,7 @@ export const StyledLinkIcons = styled.div`
   display: flex;
   gap: 1em;
   margin-top: 1em;
+  opacity: 0;
 `;
 
 export const StyledLinkIcon = styled.a`
diff --git a/src/sections/LandingSection.tsx b/src/sections/LandingSection.tsx
index 49ed9e2..4e74df8 100644
--- a/src/sections/LandingSection.tsx
+++ b/src/sections/LandingSection.tsx
@@ -9,13 +9,34 @@ import {
   StyledLinkIcons,
   StyledLandingRight,
 } from '../components/styles/Landing.styled';
+import { useEffect, useRef } from 'react';
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap';
 
 export default function LandingSection() {
+  const container = useRef<HTMLElement>(null);
+
+  useGSAP(() => {
+    gsap.to('.logo', { opacity: 1 });
+    gsap.to('.greeting', { opacity: 1, delay: 0.75 });
+    gsap.to('.description', { opacity: 1, delay: 1.25 });
+    gsap.to('.icons', { opacity: 1, delay: 1.25 });
+    gsap.to('.landing_tech', { opacity: 1, delay: 1.75 });
+  });
+
+  useEffect(() => {
+    const splittedDesc = container.current!.querySelector('.description');
+
+    console.log(splittedDesc?.textContent);
+  }, []);
+
   return (
-    <StyledLanding id="landing">
+    <StyledLanding id="landing" ref={container}>
       <StyledLandingWrapper>
         <div className="landing_main">
-          <Logo />
+          <div className="logo">
+            <Logo />
+          </div>
           <StyledLandingRight>
             <b className="greeting">Hello, I'm</b>
 
@@ -25,15 +46,13 @@ export default function LandingSection() {
 
             <div className="description">an amatour and self-taught front-end and back-end developer from Poland!</div>
 
-            <StyledLinkIcons>
+            <StyledLinkIcons className="icons">
               <StyledLinkIcon href="https://github.com/Spythere" target="_blank">
                 <FaGithub />
               </StyledLinkIcon>
               <StyledLinkIcon href="mailto:spythere@proton.me">
                 <FaEnvelope />
               </StyledLinkIcon>
-              <StyledLinkIcon></StyledLinkIcon>
-              <StyledLinkIcon></StyledLinkIcon>
             </StyledLinkIcons>
           </StyledLandingRight>
         </div>