diff --git a/index.html b/index.html index 7c33139..a574307 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - th diff --git a/src/assets/fonts/IBMPlexMono-Medium.woff2 b/src/assets/fonts/IBMPlexMono-Medium.woff2 new file mode 100644 index 0000000..bea8609 Binary files /dev/null and b/src/assets/fonts/IBMPlexMono-Medium.woff2 differ diff --git a/src/components/sections/ImageSection.vue b/src/components/sections/ImageSection.vue index 91b82c5..7a4be40 100644 --- a/src/components/sections/ImageSection.vue +++ b/src/components/sections/ImageSection.vue @@ -130,15 +130,6 @@ onUnmounted(() => { richtet, damit dies ein schön belebter Wohnort für die selber in Schönheit vollendete Menschheit sei. (Ebd.)

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. Duis aute irure dolor in reprehenderit in voluptate - velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. -

Nach Hegel (1770–1831) offenbart sich Gott in Natur und Kunst unter der Form der Schönheit. Gott äußert sich auf zweierlei Weise: in dem Objekt diff --git a/src/components/sections/IntroductionSection.vue b/src/components/sections/IntroductionSection.vue index 9119855..3b87542 100644 --- a/src/components/sections/IntroductionSection.vue +++ b/src/components/sections/IntroductionSection.vue @@ -13,22 +13,51 @@ let split; let animation; function createTween() { - split = SplitText.create(".text", { type: "chars,words,lines" }); + split = SplitText.create(".text", { type: "words" }); - animation = gsap.from(split.lines, { - rotationX: -100, - transformOrigin: "50% 50% -160px", - opacity: 0, - duration: 0.8, - ease: "power3", - stagger: 0.25, + const tl = gsap.timeline({ scrollTrigger: { trigger: ".text", - start: "top 80%", + start: "top 75%", toggleActions: "play none none none", - // markers: true }, }); + + tl.set(".block", { + borderColor: "#fff", + boxShadow: "0 0 0px #fff", + opacity: 0.3, + }); + + // Flicker + tl.to(".block", { + opacity: 1, + duration: 0.05, + stagger: 0.1, + }) + .to(".block", { opacity: 0.4, duration: 0.05, stagger: 0.1 }) + .to(".block", { opacity: 1, duration: 0.1 }) + .to(".block", { opacity: 0.6, duration: 0.05 }) + .to(".block", { opacity: 1, duration: 0.2 }); + + // Glow aufbauen + tl.to( + ".block", + { + boxShadow: "0 0 20px #fff, 0 0 10px #fff", + duration: 0.6, + ease: "power2.out", + }, + "-=0.3", + ); + + tl.from(split.words, { + y: 30, // kleine Bewegung statt Rotation + opacity: 0, + duration: 0.8, + ease: "power2.out", // weicher als power3 + stagger: 0.05, // subtiler + }); } onMounted(() => { @@ -51,51 +80,76 @@ function handleResize() { onUnmounted(() => { window.removeEventListener("resize", handleResize); - ctx?.revert(); // killt ALLES inkl. ScrollTrigger & SplitText sauber + ctx?.revert(); }); -