gsap scroll events

src/components/styles/About.styled.ts

@@ -5,7 +5,6 @@ export const StyledAbout = styled.section`
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 3em;
-    margin-top: 100px;
 
     img {
       border-radius: 1em;

src/components/styles/Global.styled.ts

@@ -16,9 +16,7 @@ export const GlobalStyles = createGlobalStyle`
       scroll-behavior: smooth;
    }
 
-   * {
+
-      box-sizing: border-box;
-   }
 
    body {
       margin: 0;
@@ -62,44 +60,14 @@ export const GlobalStyles = createGlobalStyle`
    }
 
    a {
-      color: white;
-      text-decoration: none;
-
-      transition: all 0.25s;
-
       &:hover {
-         color: ${({ theme }) => theme.colors.accent};
+      color: ${({ theme }) => theme.colors.accent};
       }
    }
 
-   img, svg {
-      vertical-align: middle;
-   }
-
-
    button {
       font-family: ${({ theme }) => theme.fonts.primary};
       border: none;
    }
 
-   ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-   }
-
-   p {
-      padding: 0;
-      margin: 0;
-   }
-
-   @keyframes typing {
-      to { left: 100% }
-   }
-
-   @keyframes blinking {
-      0% { opacity: 0 }
-      50% { opacity: 1 }
-      100% { opacity: 0 }
-   }
 `;

src/index.scss

@@ -0,0 +1,43 @@
+* {
+  box-sizing: border-box;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+p {
+  padding: 0;
+  margin: 0;
+}
+
+@keyframes typing {
+  to {
+    left: 100%;
+  }
+}
+
+@keyframes blinking {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+  transition: all 0.25s;
+}

src/main.tsx

@@ -3,9 +3,13 @@ import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.scss';
 
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-

src/sections/AboutSection.tsx

@@ -4,7 +4,29 @@ import { StyledCursor } from '../components/styles/Cursor.styled';
 import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
 import { SiNestjs } from 'react-icons/si';
 
+import { useGSAP } from '@gsap/react';
+import { gsap } from 'gsap';
+
 function AboutSection() {
+  useGSAP(() => {
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: '.about-grid',
+      },
+    });
+
+    tl.from('.about-gif', { opacity: 0 });
+    tl.from('.about-content', { opacity: 0 });
+    tl.from('.stat-item', {
+      duration: 0.5,
+      ease: 'power1.in',
+      opacity: 0,
+      stagger: {
+        each: 0.5,
+      },
+    });
+  });
+
   return (
     <StyledAbout id="about">
       <div className="about-grid">