gsap animations demo

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>

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`

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>