added new animation

Author: AnthonyFinney

src/App.tsx

@@ -1,3 +1,6 @@
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 import AboutMe from "./components/aboutMe";
 import Beams from "./components/blocks/Backgrounds/Beams/Beams";
 import Hero from "./components/hero";
@@ -7,9 +10,42 @@ import Projects from "./components/projects";
 import Contact from "./components/contact";
 import Footer from "./components/footer";
 
+gsap.registerPlugin(ScrollTrigger);
+
 export default function App() {
+    const mainRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const ctx = gsap.context(() => {
+            const sections = gsap.utils.toArray<HTMLElement>(".reveal-section");
+
+            sections.forEach((section) => {
+                gsap.fromTo(
+                    section,
+                    { autoAlpha: 0, y: 20 },
+                    {
+                        autoAlpha: 1,
+                        y: 0,
+                        duration: 0.8,
+                        ease: "power1.out",
+                        scrollTrigger: {
+                            trigger: section,
+                            start: "top 92%",
+                            end: "bottom 8%",
+                            toggleActions: "play reverse play reverse",
+                            // Using scrub: false but keeping it light
+                            invalidateOnRefresh: true,
+                        },
+                    }
+                );
+            });
+        }, mainRef);
+
+        return () => ctx.revert();
+    }, []);
+
     return (
-        <div className="relative w-full min-h-screen overflow-auto dark">
+        <div className="relative w-full min-h-screen overflow-x-hidden dark" ref={mainRef}>
             <div className="fixed inset-0 z-10 pointer-events-none">
                 <Beams
                     beamWidth={2}
@@ -28,12 +64,24 @@ export default function App() {
             </header>
 
             <main className="relative z-10 mt-4 merienda">
-                <Hero imageSrc="/assets/profile_pic_2.png" />
-                <Skills />
-                <AboutMe />
-                <Projects />
-                <Contact />
-                <Footer />
+                <div className="reveal-section">
+                    <Hero imageSrc="/assets/profile_pic_2.png" />
+                </div>
+                <div className="reveal-section">
+                    <Skills />
+                </div>
+                <div className="reveal-section">
+                    <AboutMe />
+                </div>
+                <div className="reveal-section">
+                    <Projects />
+                </div>
+                <div className="reveal-section">
+                    <Contact />
+                </div>
+                <div className="reveal-section">
+                    <Footer />
+                </div>
             </main>
         </div>
     );

src/index.css

@@ -51,7 +51,6 @@
 }
 
 html {
-    scroll-behavior: smooth;
 }
 
 .manufacturing-consent-regular {
@@ -175,3 +174,9 @@ html {
         @apply bg-background text-foreground;
     }
 }
+
+.reveal-section {
+    opacity: 0;
+    visibility: hidden;
+    will-change: transform, opacity;
+}