-q

gustavoquinalha · Jan 4, 2024 · 762bc6d · 762bc6d
1 parent 98237e2
commit 762bc6d
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 77 deletions.
diff --git a/src/components/Speakers.astro b/src/components/Speakers.astro
@@ -2,19 +2,19 @@
 
 ---
 
-<div class="w-full mx-auto max-w-7xl py-20">
-  <div
-    class="flex flex-col text-hero text-2xl md:text-4xl lg:text-6xl font-black text-white text-center lg:text-left"
-  >
-    <span class="md:whitespace-nowrap">A DevParaná Conf é organizada</span>
-    <span class="text-green-600 md:whitespace-nowrap"
-      >por pessoas da comunidade</span
+<section id="horizontal-scoll">
+  <div class="w-full mx-auto max-w-7xl py-20">
+    <div
+      class="flex flex-col text-speakers text-2xl md:text-4xl lg:text-6xl font-black text-white text-center lg:text-left"
     >
-    <span class="md:whitespace-nowrap">para comunidade.</span>
+      <span class="md:whitespace-nowrap">A DevParaná Conf é organizada</span>
+      <span class="text-green-600 md:whitespace-nowrap"
+        >por pessoas da comunidade</span
+      >
+      <span class="md:whitespace-nowrap">para comunidade.</span>
+    </div>
   </div>
-</div>
 
-<section id="horizontal-scoll">
   <div class="horizontal-scoll-wrapper">
     <div class="horizontal">
       <div>

diff --git a/src/components/Test.astro b/src/components/Test.astro
@@ -1,29 +1,19 @@
 <div class="asd">
-  <section class="panel orange bg-orange-300">
-    <p>This element will spin.</p>
+  <section class="panel text-test orange2 overflow-hidden">
+    <div class="w-full mx-auto max-w-7xl py-20">
+      <div
+        class="flex flex-col text-2xl md:text-4xl lg:text-6xl font-black text-white text-center lg:text-left"
+      >
+        <span class="md:whitespace-nowrap">A DevParaná Conf é organizada</span>
+        <span class="text-green-600 md:whitespace-nowrap"
+          >por pessoas da comunidade</span
+        >
+        <span class="md:whitespace-nowrap">para comunidade.</span>
+      </div>
+    </div>
   </section>
 
-  <section class="panel red bg-red-300">
+  <!-- <section class="panel red min-h-screen overflow-hidden">
     <p>This background color will change</p>
-  </section>
+  </section> -->
 </div>
-
-<style>
-  .asd {
-    scroll-snap-type: y mandatory;
-  }
-
-  .panel {
-    scroll-snap-align: start;
-    height: 100vh;
-  }
-
-  .red {
-    background-color: #cf3535;
-    background-image: none;
-  }
-
-  .panel p {
-    font-size: 32px;
-  }
-</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -43,7 +43,6 @@ const { title } = Astro.props;
   gsap.registerPlugin(ScrollTrigger, SplitType);
 
   ScrollTrigger.defaults({
-    // toggleActions: "restart pause reverse pause",
     toggleActions: "restart",
     scroller: "body",
   });
@@ -110,23 +109,41 @@ const { title } = Astro.props;
   };
 
   const textHero = () => {
-    const ourText = new SplitType(".text-hero", { types: "words" });
-    const words = ourText.words;
-
-    gsap.fromTo(
-      words,
-      {
-        y: 50,
-        opacity: 0,
-      },
-      {
-        y: 0,
-        opacity: 1,
-        stagger: 0.1,
-        duration: 0.5,
-        ease: "power1.out",
-      },
-    );
+    gsap.from(".text-hero span", {
+      scrollTrigger: ".text-hero",
+      stagger: 0.1,
+      duration: 0.5,
+      y: 200,
+      ease: "power1.out",
+      scrub: true,
+    });
+  };
+
+  const textSpeakers = () => {
+    gsap.from(".text-speakers span", {
+      scrollTrigger: {
+      trigger: ".text-speakers",
+      start: 'center 90%',
+      end: 'center 40%',
+      scrub: true,
+    },
+      stagger: 0.1,
+      duration: 0.5,
+      y: 200,
+      ease: "power1.out",
+      scrub: true
+    });
+  };
+
+  const textTest = () => {
+    gsap.from(".text-test span", {
+      scrollTrigger: ".text-test",
+      stagger: 0.1,
+      duration: 0.5,
+      y: 200,
+      ease: "power1.out",
+      scrub: true
+    });
   };
 
   const speakers = () => {
@@ -151,31 +168,21 @@ const { title } = Astro.props;
   };
 
   const testtt = () => {
-    gsap.registerPlugin(ScrollTrigger);
-
-    ScrollTrigger.defaults({
-      toggleActions: "restart",
-      scroller: "body",
-    });
-
-    gsap.from(".orange p", {
-      scrollTrigger: ".orange",
-      stagger: 0.1,
-      duration: 0.5,
-      y: 200,
-      ease: "power1.out",
-    });
-
-    gsap.to(".red", {
-      scrollTrigger: {
-        trigger: ".red",
-        toggleActions: "restart",
-      },
-      stagger: 0.1,
-      duration: 0.5,
-      backgroundColor: "#FFA500",
-      ease: "power1.out",
-    });
+    // gsap.from(".panel span", {
+    //   scrollTrigger: ".panel",
+    //   stagger: 0.1,
+    //   duration: 0.5,
+    //   y: 200,
+    //   ease: "power1.out",
+    // });
+
+    // gsap.to(".red", {
+    //   scrollTrigger: ".red",
+    //   duration: 0.5,
+    //   backgroundColor: "#FFA500",
+    //   ease: "power1.out",
+    //   delay: 1,
+    // });
   };
 
   (imagesLoaded(images) as any)
@@ -184,6 +191,8 @@ const { title } = Astro.props;
     .on("always", showDemo)
     .on("always", fades)
     .on("always", speakers)
+    .on("always", textSpeakers)
+    .on("always", textTest)
     .on("always", testtt);
 </script>
 
@@ -233,4 +242,12 @@ const { title } = Astro.props;
     color: white;
     z-index: 10000;
   }
+
+  /* .asd {
+    scroll-snap-type: y mandatory;
+  }
+
+  .panel {
+    scroll-snap-align: start;
+  } */
 </style>