diff --git a/src/assets/bird-claw.svg b/src/assets/bird-claw.svg new file mode 100644 index 0000000..ec8a605 --- /dev/null +++ b/src/assets/bird-claw.svg @@ -0,0 +1,7 @@ + + + + + + bird-claw + \ No newline at end of file diff --git a/src/assets/crow-dive-svgrepo-com.svg b/src/assets/crow-dive-svgrepo-com.svg new file mode 100644 index 0000000..f952376 --- /dev/null +++ b/src/assets/crow-dive-svgrepo-com.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/myself/dark/italien.png b/src/assets/myself/dark/italien.png new file mode 100644 index 0000000..08f221f Binary files /dev/null and b/src/assets/myself/dark/italien.png differ diff --git a/src/assets/myself/dark/laub.png b/src/assets/myself/dark/laub.png new file mode 100644 index 0000000..a7caa73 Binary files /dev/null and b/src/assets/myself/dark/laub.png differ diff --git a/src/assets/myself/dark/ski.png b/src/assets/myself/dark/ski.png new file mode 100644 index 0000000..db69762 Binary files /dev/null and b/src/assets/myself/dark/ski.png differ diff --git a/src/assets/myself/dark/small.png b/src/assets/myself/dark/small.png new file mode 100644 index 0000000..3bb4839 Binary files /dev/null and b/src/assets/myself/dark/small.png differ diff --git a/src/assets/myself/dark/smart.png b/src/assets/myself/dark/smart.png new file mode 100644 index 0000000..586de70 Binary files /dev/null and b/src/assets/myself/dark/smart.png differ diff --git a/src/assets/myself/dark/suf.png b/src/assets/myself/dark/suf.png new file mode 100644 index 0000000..b6af45d Binary files /dev/null and b/src/assets/myself/dark/suf.png differ diff --git a/src/assets/myself/dark/wasser.png b/src/assets/myself/dark/wasser.png new file mode 100644 index 0000000..6633fef Binary files /dev/null and b/src/assets/myself/dark/wasser.png differ diff --git a/src/components/sections/TextSection.vue b/src/components/sections/TextSection.vue index f5886a4..3d9c31c 100644 --- a/src/components/sections/TextSection.vue +++ b/src/components/sections/TextSection.vue @@ -4,70 +4,104 @@ import { ref, onMounted, onUnmounted } from "vue" import gsap from "gsap" import ScrollTrigger from "gsap/ScrollTrigger" import Flip from 'gsap/dist/Flip' +import { checkCompatEnabled } from "@vue/compiler-core" + +gsap.registerPlugin(Flip, ScrollTrigger) + +let flipCtx; + +const createTimeline = () => { + flipCtx && flipCtx.revert(); // alte Flip-Timeline zurücksetzen + + flipCtx = gsap.context(() => { + const flipConfig = { ease: "none", duration: 1 }; + + // Flip-States der Marker holen + const secondState = Flip.getState(".second .marker"); + const thirdState = Flip.getState(".third .marker"); + + // Timeline mit ScrollTrigger + const tl = gsap.timeline({ + scrollTrigger: { + trigger: ".container.initial", + start: "clamp(top center)", + endTrigger: ".final", + end: "clamp(bottom center)", + scrub: 1, + } + }); + + // initial -> second + tl.add(Flip.fit(".circle", secondState, flipConfig)) + .add(() => { + gsap.set(".second-btn", { opacity: 1, pointerEvents: "auto" , zIndex: 1000}); + }, "+=0.1"); + + // second -> third + tl.add(Flip.fit(".circle", thirdState, flipConfig)) + .add(() => { + gsap.set(".third-btn", { opacity: 1, pointerEvents: "auto" }); + }, "+=0.01"); + }); +}; -gsap.registerPlugin(Flip, ScrollTrigger); - -let ctx, renderer, scene, camera, mesh, canvasEl; -function initThree(canvas) { - renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); - renderer.outputColorSpace = THREE.SRGBColorSpace; +onMounted(() => { - scene = new THREE.Scene(); - camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100); - camera.position.set(0, 0, 3); + createTimeline(); - const mat = new THREE.MeshBasicMaterial({ map: makeGradientNoiseTexture() }); - mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), mat); - scene.add(mesh); + window.addEventListener("resize", createTween) + ScrollTrigger.refresh() - gsap.ticker.add(render); - onResize(); +}) - buildTimeline(); -} +onUnmounted(() => { + flipCtx?.revert() + window.removeEventListener("resize", createTween); + gsap.ticker.remove(updateMorph) +}) + +window.addEventListener("resize", createTimeline) \ No newline at end of file