th-website/src/components/sections/IntroductionSection.vue

<script setup lang="js">
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
// import SplitText from "gsap/SplitText";
import ScrambleTextPlugin from "gsap/ScrambleTextPlugin";

gsap.registerPlugin(ScrollTrigger, ScrambleTextPlugin);

const section = ref(null);

let ctx;
let split;
let animation;
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();
  //use the defaults
  animation = gsap.timeline({
    scrollTrigger: {
      trigger: ".poster",
      pin: true,
      markers: true,
      start: "top top",
      end: "+=500",
    },
  });

  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",
      },
    });
}

onMounted(() => {
  ctx = gsap.context(() => {
    createTween();
    window.addEventListener(".text", handleResize);
  }, section.value);

  requestAnimationFrame(() => {
    ScrollTrigger.refresh();
  });
  getTimeDate();
  interval = setInterval(() => {
    getTimeDate();
  }, 1000);
  console.log(date.value);
});

function handleResize() {
  split && split.revert();
  split = SplitText.create(".text", {
    type: "words",
  });
  ScrollTrigger.refresh();
}

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  ctx?.revert();
  clearInterval(interval);
});

function getTimeDate() {
  const now = new Date();

  time.value = now.toLocaleTimeString("de-DE", {
    timeZone: "Europe/Berlin",
    hour: "2-digit",
    minute: "2-digit",
  });

  date.value = now.toLocaleDateString("de-DE", {
    timeZone: "Europe/Berlin",
    weekday: "long",
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
}
</script>
<template>
  <div class="poster">
    <div class="b-one"></div>
    <div class="b-two"></div>
    <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="text fontStyle">Tom Alexander Herpel</h4>

      <h1 class="textblock__header text"></h1>

      <h4 class="textblock__subheader text fontStyle"></h4>

      <p class="textblock__caption">
        Oldenburg, Germany <br />
        {{ time }} {{ date.value }}
      </p>
    </div>
  </div>
</template>
<style scoped>
.poster {
  display: grid;
  grid-template-columns: repeat(33, 1fr);
  grid-template-rows: repeat(16, 1fr);

  width: 100%;
  height: 100vh;

  overflow: hidden;
  position: relative;
  padding: 2rem;
}

/* Schwarze Blöcke */
.b-one,
.b-two,
.b-three,
.b-four,
.b-five {
  background: hsl(0, 0%, 100%);
}

.b-one {
  grid-column: 1 / 3;
  grid-row: 11 / 14;
}

.b-two {
  grid-column: 4 / 11;
  grid-row: 6 / 8;
}

.b-three {
  grid-column: 16 / 18;
  grid-row: 8 / 11;
}

.b-four {
  grid-column: 11 / 30;
  grid-row: 15 / 14;
}

.b-five {
  grid-column: 30 / 34;
  grid-row: 4 / 11;
}
.b-six {
  grid-column: 30 / 34;
  grid-row: 12/ 13;
  font-size: 0.85rem;
}

/* Textbereich */
.textblock {
  grid-column: 6 / 28;
  grid-row-end: 14;

  align-self: center;
  color: var(--black-clr);
}

.fontStyle {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.textblock__header {
  font-size: 4rem;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 2rem;
  max-width: 900px;
}

.textblock__caption {
  font-size: 0.85rem;
  line-height: 1.7;
  max-width: 600px;
}
.text {
  font-family: Courier New;
  font-size: clamp(1.5rem, 3vw, 5rem);
}

a {
  color: #ffffff;
  white-space: nowrap;
}
</style>