gsap animations demo

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>