swiss layout

src/components/sections/IntroductionSection.vue

@@ -2,9 +2,10 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-import SplitText from "gsap/SplitText";
+// import SplitText from "gsap/SplitText";
+import ScrambleTextPlugin from "gsap/ScrambleTextPlugin";
 
-gsap.registerPlugin(ScrollTrigger, SplitText);
+gsap.registerPlugin(ScrollTrigger, ScrambleTextPlugin);
 
 const section = ref(null);
 
@@ -15,32 +16,43 @@ const date = ref("--:--");
 const time = ref("");
 let interval;
 
+const textHeader = "Welcome to my page. This space is currently under construction."
+const texteSub = "Here you’ll find creative projects and ideas that inspire me at the moment."
+
 function createTween() {
   animation?.kill();
-  split = SplitText.create(".text", {
-    type: "words",
-  });
 
-  animation = gsap.from(split.words, {
-    y: 30,
-    opacity: 0,
-    duration: 0.9,
-    ease: "power2.out",
-    stagger: 0.05,
+  
+  //use the defaults
+// gsap.to(".textblock__header", {duration: 1, scrambleText: "THIS IS NEW TEXT"});
+  animation = gsap.timeline();
+
+  animation.to(".textblock__header", {
+  duration: 1, 
+  scrambleText: {
+    text: textHeader, 
+    chars: "TH", 
+    revealDelay: 0.5, 
+    speed: 0.7, 
+    newClass: "myClass"
+  }
+}).to(".textblock__subheader", {
+  duration :1,
+  scrambleText: {
+    text: texteSub, 
+    chars: "TH", 
+    revealDelay: 0.5, 
+    speed: 0.7, 
+    newClass: "myClass"
+  }
+});
 
-    scrollTrigger: {
-      trigger: section.value,
-      start: "top 10%",
-      toggleActions: "play none none none",
-    },
-  });
 }
 
 onMounted(() => {
   ctx = gsap.context(() => {
     createTween();
-
-    window.addEventListener("resize", handleResize);
+    window.addEventListener(".text", handleResize);
   }, section.value);
 
   requestAnimationFrame(() => {
@@ -65,6 +77,7 @@ onUnmounted(() => {
   window.removeEventListener("resize", handleResize);
   ctx?.revert();
   clearInterval(interval);
+
 });
 
 function getTimeDate() {
@@ -92,21 +105,19 @@ function getTimeDate() {
     <div class="b-three"></div>
     <div class="b-four"></div>
     <div class="b-five"></div>
-
+    <div class="b-six" text>Die Schweizer** <a href='https://en.wikipedia.org/wiki/Swiss_Style_(design)'> https://en.wikipedia.org/wiki/Swiss_Style_(design) </a></div>
     <div class="textblock text">
-      <h4 class="textblock__subheader text">Tom Alexander Herpel</h4>
+      <h4 class="text fontStyle">Tom Alexander Herpel</h4>
 
       <h1 class="textblock__header text">
-        Welcome to my page. <br />
-        This space is currently under construction.
+        
       </h1>
 
-      <h4 class="textblock__subheader text">
-        Here you’ll find creative projects and ideas that inspire me at the
-        moment.
+      <h4 class="textblock__subheader text fontStyle">
+        
       </h4>
 
-      <p class="textblock__caption">Oldenburg, Germany <br /></p>
+      <p class="textblock__caption">Oldenburg, Germany <br /> {{time}} {{date.value}}</p>
     </div>
   </div>
 </template>
@@ -131,7 +142,7 @@ function getTimeDate() {
 .b-three,
 .b-four,
 .b-five {
-  background: var(--black-clr);
+  background: #ffffff;
 }
 
 .b-one {
@@ -156,7 +167,14 @@ function getTimeDate() {
 
 .b-five {
   grid-column: 30 / 34;
-  grid-row: 1 / 11;
+  grid-row: 4 / 11;
+}
+.b-six {
+
+  grid-column: 30 / 34;
+  grid-row: 12/ 13;
+  font-size: 0.85rem;
+
 }
 
 /* Textbereich */
@@ -168,7 +186,7 @@ function getTimeDate() {
   color: var(--black-clr);
 }
 
-.textblock__subheader {
+.fontStyle {
   font-size: 1rem;
   font-weight: 500;
   margin-bottom: 1rem;
@@ -193,4 +211,9 @@ function getTimeDate() {
   font-family: Courier New;
   font-size: clamp(1.5rem, 3vw, 5rem);
 }
+
+a {
+  color: #ffffff;
+  white-space:nowrap;
+}
 </style>