gsap scroll events

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">