th/th-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refector code and kill all scrollTrigger

Browse Source
This commit is contained in:
T-A-H-prog
2026-04-03 21:02:48 +02:00
parent 5b3ac4fb89
commit a4cff85c10
3 changed files with 227 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
src/components/sections/ImageSection.vue
View File

@@ -1,132 +1,184 @@
<script setup lang="js"> <script setup lang="js">
import ski from '../../assets/myself/ski.png' import ski from "../../assets/myself/ski.png";
import book from '../../assets/myself/SmartTom.jpeg' import book from "../../assets/myself/SmartTom.jpeg";
import surf from '../../assets/myself/surf.png' import surf from "../../assets/myself/surf.png";
import boxen from '../../assets/myself/TOm.jpg' import boxen from "../../assets/myself/TOm.jpg";
import florencs from '../../assets/myself/15.jpg' import florencs from "../../assets/myself/15.jpg";
import schnee from '../../assets/myself/DSCN1921.jpg' import schnee from "../../assets/myself/DSCN1921.jpg";
import water from '../../assets/myself/27-2.jpg' import water from "../../assets/myself/27-2.jpg";
import gopro from '../../assets/myself/GOPR0521.png' import gopro from "../../assets/myself/GOPR0521.png";
import { ref, onMounted, onUnmounted } from "vue";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/dist/Flip";
import { ref, onMounted, onUnmounted } from "vue" (gsap.registerPlugin(ScrollTrigger), gsap.registerPlugin(Flip));
import gsap from "gsap"
import ScrollTrigger from "gsap/ScrollTrigger"
import Flip from 'gsap/dist/Flip'
gsap.registerPlugin(ScrollTrigger),
gsap.registerPlugin(Flip);
const section = ref(null)
const gallery = ref(null)
let ctx
let flipCtx
const section = ref(null);
const gallery = ref(null);
let ctx;
let flipCtx;
const createTween = () => { const createTween = () => {
let galleryElement = gallery.value ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
let galleryElement = gallery.value;
let galleryItems = galleryElement.querySelectorAll(".gallery__item"); let galleryItems = galleryElement.querySelectorAll(".gallery__item");
flipCtx && flipCtx.revert(); flipCtx && flipCtx.revert();
galleryElement.classList.remove("gallery--final"); galleryElement.classList.remove("gallery--final");
flipCtx = gsap.context(() => { flipCtx = gsap.context(() => {
galleryElement.classList.add("gallery--final");
galleryElement.classList.add("gallery--final") const state = Flip.getState(galleryItems);
const state = Flip.getState(galleryItems) galleryElement.classList.remove("gallery--final");
galleryElement.classList.remove("gallery--final")
const flip = Flip.to(state, { const flip = Flip.to(state, {
simple: true, simple: true,
ease: "expoScale(1,5)" ease: "expoScale(1,5)",
}) });
const tl = gsap.timeline({ const tl = gsap.timeline({
scrollTrigger: { scrollTrigger: {
trigger: galleryElement, trigger: galleryElement,
start: "center center", start: "center center",
end: "+=100%", end: "+=100%",
scrub: true, scrub: true,
pin: galleryElement.parentNode pin: galleryElement.parentNode,
} },
}) });
tl.add(flip)
}, section.value)
}
onMounted(() => {
ctx = gsap.context(() => { tl.add(flip);
createTween() }, section.value);
}, section.value) };
onUnmounted(() => {
ctx.revert();
flipCtx?.revert();
window.addEventListener("resize", createTween) ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
ScrollTrigger.refresh()
}) window.removeEventListener("resize", createTween);
});
onUnmounted(() => { onUnmounted(() => {
ctx.revert() ctx.revert();
flipCtx?.revert() flipCtx?.revert();
window.removeEventListener("resize", createTween)
})
window.removeEventListener("resize", createTween);
});
</script> </script>
<template> <template>
<section class="image-section" ref="section"> <section class="image-section" ref="section">
<div class="gallery-wrap"> <div class="gallery-wrap">
<div class="gallery gallery--bento gallery--switch" id="gallery-8" ref="gallery"> <div
<div class="gallery__item"> class="gallery gallery--bento gallery--switch"
<img :src=boxen alt="" /> id="gallery-8"
ref="gallery"
>
<div class="gallery__item">
<img :src="boxen" alt="" />
</div>
<div class="gallery__item">
<img :src="gopro" alt="" />
</div>
<div class="gallery__item">
<img :src="schnee" alt="" />
</div>
<div class="gallery__item">
<img :src="surf" alt="" />
</div>
<div class="gallery__item">
<img :src="florencs" alt="" />
</div>
<div class="gallery__item">
<img :src="book" alt="" />
</div>
<div class="gallery__item">
<img :src="ski" alt="" />
</div>
<div class="gallery__item">
<img :src="water" alt="" />
</div>
</div>
</div> </div>
<div class="gallery__item"> <div class="text">
<img :src=gopro alt="" /> <h2>Here is some content</h2>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div> </div>
<div class="gallery__item"> </section>
<img :src=schnee alt="" />
</div>
<div class="gallery__item">
<img :src=surf alt="" />
</div>
<div class="gallery__item">
<img :src="florencs" alt="" />
</div>
<div class="gallery__item">
<img :src=book alt="" />
</div>
<div class="gallery__item">
<img :src=ski alt="" />
</div>
<div class="gallery__item">
<img :src=water alt="" />
</div>
</div>
</div>
<div class="text">
<h2>Here is some content</h2>
<p>
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.</p>
<p>
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.</p>
<p>
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.</p>
<p>
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.</p>
<p>
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.</p>
<p>
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.</p>
<p>
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.</p>
<p>
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.</p>
</div>
</section>
</template> </template>
<style scoped> <style scoped>
@@ -214,5 +266,4 @@ p {
.text { .text {
padding: 2rem 5rem; padding: 2rem 5rem;
} }
</style>
</style>

136
src/components/sections/TextSection.vue
View File

@@ -1,12 +1,11 @@
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from "vue" import { ref, onMounted, onUnmounted } from "vue";
import gsap from "gsap" import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger" import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from 'gsap/dist/Flip' import Flip from "gsap/dist/Flip";
import { checkCompatEnabled } from "@vue/compiler-core" import { checkCompatEnabled } from "@vue/compiler-core";
gsap.registerPlugin(Flip, ScrollTrigger) gsap.registerPlugin(Flip, ScrollTrigger);
let flipCtx; let flipCtx;
@@ -14,7 +13,7 @@ const createTimeline = () => {
flipCtx && flipCtx.revert(); // alte Flip-Timeline zurücksetzen flipCtx && flipCtx.revert(); // alte Flip-Timeline zurücksetzen
flipCtx = gsap.context(() => { flipCtx = gsap.context(() => {
const flipConfig = { ease: "none", duration: 1 }; const flipConfig = { ease: "none", duration: 1 };
// Flip-States der Marker holen // Flip-States der Marker holen
const secondState = Flip.getState(".second .marker"); const secondState = Flip.getState(".second .marker");
@@ -28,81 +27,69 @@ const createTimeline = () => {
endTrigger: ".final", endTrigger: ".final",
end: "clamp(bottom center)", end: "clamp(bottom center)",
scrub: 1, scrub: 1,
} },
}); });
// initial -> second // initial -> second
tl.add(Flip.fit(".circle", secondState, flipConfig)) tl.add(Flip.fit(".circle", secondState, flipConfig)).add(() => {
.add(() => { gsap.set(".second-btn", {
gsap.set(".second-btn", { opacity: 1, pointerEvents: "auto" , zIndex: 1000}); opacity: 1,
}, "+=0.1"); pointerEvents: "auto",
zIndex: 1000,
});
}, "+=0.1");
// second -> third // second -> third
tl.add(Flip.fit(".circle", thirdState, flipConfig)) tl.add(Flip.fit(".circle", thirdState, flipConfig)).add(() => {
.add(() => { gsap.set(".third-btn", { opacity: 1, pointerEvents: "auto" });
gsap.set(".third-btn", { opacity: 1, pointerEvents: "auto" }); }, "+=0.01");
}, "+=0.01");
}); });
}; };
onMounted(() => { onMounted(() => {
createTimeline();
createTimeline(); window.addEventListener("resize", createTween);
ScrollTrigger.refresh();
window.addEventListener("resize", createTween) });
ScrollTrigger.refresh()
})
onUnmounted(() => { onUnmounted(() => {
flipCtx?.revert() flipCtx?.revert();
window.removeEventListener("resize", createTween); window.removeEventListener("resize", createTween);
gsap.ticker.remove(updateMorph) gsap.ticker.remove(updateMorph);
}) });
window.addEventListener("resize", createTimeline)
window.addEventListener("resize", createTimeline);
</script> </script>
<template> <template>
<div class="main">
<div class="main"> <div class="container initial">
<div class="container initial"> <div class="circle"></div>
<div class="circle"></div>
</div> </div>
<div class="container second"> <div class="container second">
<div class="experience-text"> <div class="experience-text">
<h2>Do you want to see where I used to study?</h2> <h2>Do you want to see where I used to study?</h2>
</div> </div>
<div class="marker"></div> <div class="marker"></div>
<router-link to="/experience"> <router-link to="/experience">
<button class="btn second-btn">Zur Experience</button> <button class="btn second-btn">Zur Experience</button>
</router-link> </router-link>
</div> </div>
<div class="container third"> <div class="container third">
<div class="experience-text"> <div class="experience-text">
<h2>Here is the final step!</h2> <h2>Here is the final step!</h2>
</div> </div>
<div class="marker"></div> <div class="marker"></div>
<button class="btn third-btn">Next</button> <button class="btn third-btn">Next</button>
</div> </div>
</div> </div>
<div class="spacer final"></div> <div class="spacer final"></div>
</template> </template>
<style scoped> <style scoped>
h2 { h2 {
font-size: 1.2rem; font-size: 1.2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
@@ -116,7 +103,6 @@ h2 {
padding: 0 0.3rem; padding: 0 0.3rem;
} }
.btn { .btn {
background-color: white; background-color: white;
color: #1a1a2e; /* dunkler Text */ color: #1a1a2e; /* dunkler Text */
@@ -126,35 +112,37 @@ h2 {
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0,0,0,0.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
opacity: 0; opacity: 0;
} }
.btn:hover { .btn:hover {
background-color: #f0f0f0; background-color: #f0f0f0;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }
.btn:active { .btn:active {
transform: translateY(0); transform: translateY(0);
box-shadow: 0 2px 6px rgba(0,0,0,0.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
} }
body { body {
background-image: linear-gradient( background-image:
rgba(255, 255, 255, 0.05) 2px, linear-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px),
transparent 2px
),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-size:
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; 100px 100px,
100px 100px,
20px 20px,
20px 20px;
background-position:
-2px -2px,
-2px -2px,
-1px -1px,
-1px -1px;
} }
* { * {
@@ -171,28 +159,24 @@ body {
justify-content: center; justify-content: center;
} }
.main { .main {
position: relative; position: relative;
height: 200vh; height: 200vh;
min-height: 800px; min-height: 800px;
--grid-line: rgba(255, 255, 255, 0.08); --grid-line: rgba(255, 255, 255, 0.08);
--box-border: rgba(255, 255, 255, 0.25); --box-border: rgba(255, 255, 255, 0.25);
} }
.container { .container {
position: absolute; position: absolute;
width: 200px; width: 200px;
height: 200px; height: 200px;
display: flex; display: flex;
flex-direction: column; /* Items untereinander */ flex-direction: column; /* Items untereinander */
align-items: center; /* horizontal zentrieren */ align-items: center; /* horizontal zentrieren */
justify-content: center; /* vertikal zentrieren, kann auch flex-start sein */ justify-content: center; /* vertikal zentrieren, kann auch flex-start sein */
} }
.experience-text { .experience-text {
width: 200px; width: 200px;
text-align: center; text-align: center;
@@ -228,7 +212,6 @@ body {
.marker { .marker {
border-radius: 10px; border-radius: 10px;
} }
.second .marker { .second .marker {
@@ -245,9 +228,4 @@ body {
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
</style>
</style>

46
src/views/HomeView.vue
View File

@@ -1,45 +1,37 @@
<script setup lang="ts"> <script setup lang="ts">
import HeroSection from '../components/sections/HeroSection.vue' import HeroSection from "../components/sections/HeroSection.vue";
import ImageSection from '../components/sections/ImageSection.vue' import ImageSection from "../components/sections/ImageSection.vue";
import TextSection from '../components/sections/TextSection.vue' import TextSection from "../components/sections/TextSection.vue";
import { onMounted, nextTick } from "vue" import { onMounted, nextTick } from "vue";
import gsap from "gsap" import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger" import ScrollTrigger from "gsap/ScrollTrigger";
import ScrollSmoother from "gsap/ScrollSmoother" import ScrollSmoother from "gsap/ScrollSmoother";
gsap.registerPlugin(ScrollTrigger, ScrollSmoother) gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
onMounted(async () => { onMounted(async () => {
await nextTick() await nextTick();
ScrollSmoother.create({ ScrollSmoother.create({
wrapper: "#smooth-wrapper", wrapper: "#smooth-wrapper",
content: "#smooth-content", content: "#smooth-content",
smooth: 0.2, smooth: 0.2,
effects: true effects: true,
}) });
ScrollTrigger.refresh()
})
ScrollTrigger.refresh();
});
</script> </script>
<template> <template>
<div id="smooth-wrapper"> <div id="smooth-wrapper">
<div id="smooth-content"> <div id="smooth-content">
<HeroSection id="hero" /> <HeroSection id="hero" />
<ImageSection id="image" /> <ImageSection id="image" />
<TextSection id="text" /> <TextSection id="text" />
</div> </div>
</div> </div>
</template> </template>
<style lang="css" scoped></style>
<style lang="css" scoped>
</style>