diff --git a/components/about-page/Header.vue b/components/about-page/Header.vue index 47b1b5c..72f7152 100644 --- a/components/about-page/Header.vue +++ b/components/about-page/Header.vue @@ -1,7 +1,7 @@ @@ -218,6 +245,42 @@ onMounted(() => { let spaceIntX5 = parseInt(spaceX5); let spaceIntY5 = parseInt(spaceY5); + const circleRes1 = document.querySelector("#circleRes1"); + let heightRes1 = circleRes1.getAttribute("height"); + let widthRes1 = circleRes1.getAttribute("width"); + let spaceResX1 = circleRes1.getAttribute("x"); + let spaceResY1 = circleRes1.getAttribute("y"); + let rxRes1 = circleRes1.getAttribute("rx"); + let rxIntRes1 = parseInt(rxRes1); + let heightIntRes1 = parseInt(heightRes1); + let widthIntRes1 = parseInt(widthRes1); + let spaceIntResX1 = parseInt(spaceResX1); + let spaceIntResY1 = parseInt(spaceResY1); + + const circleRes2 = document.querySelector("#circleRes2"); + let heightRes2 = circleRes2.getAttribute("height"); + let widthRes2 = circleRes2.getAttribute("width"); + let spaceResX2 = circleRes2.getAttribute("x"); + let spaceResY2 = circleRes2.getAttribute("y"); + let rxRes2 = circleRes2.getAttribute("rx"); + let rxIntRes2 = parseInt(rxRes2); + let heightIntRes2 = parseInt(heightRes2); + let widthIntRes2 = parseInt(widthRes2); + let spaceIntResX2 = parseInt(spaceResX2); + let spaceIntResY2 = parseInt(spaceResY2); + + const circleRes3 = document.querySelector("#circleRes3"); + let heightRes3 = circleRes3.getAttribute("height"); + let widthRes3 = circleRes3.getAttribute("width"); + let spaceResX3 = circleRes3.getAttribute("x"); + let spaceResY3 = circleRes3.getAttribute("y"); + let rxRes3 = circleRes3.getAttribute("rx"); + let rxIntRes3 = parseInt(rxRes3); + let heightIntRes3 = parseInt(heightRes3); + let widthIntRes3 = parseInt(widthRes3); + let spaceIntResX3 = parseInt(spaceResX3); + let spaceIntResY3 = parseInt(spaceResY3); + const rect = document.querySelector("#rect"); const pad = 4; @@ -240,8 +303,9 @@ onMounted(() => { trigger: ".image-unmask", pin: true, start: "top top", - end: "+=500", - //end: "bottom bottom", + //end: "+=100", + end: "bottom 20%", + ease: "slow(0.7,0.7,false)", scrub: true, }, defaults: { @@ -315,6 +379,46 @@ onMounted(() => { }, 0 ) + .to( + circleRes1, + { + attr: { + height: () => heightIntRes1 * 10 + "vh", + width: () => widthIntRes1 * 10 + "vw", + x: () => spaceIntResX1 * 3.6 + "%", + y: () => spaceIntResY1 - (heightIntRes1 * 10) / 3 + "%", + rx: () => rxIntRes1 * 10 + "vw", + }, + }, + 0 + ) + .to( + circleRes2, + { + attr: { + height: () => heightIntRes2 * 10 + "vh", + width: () => widthIntRes2 * 10 + "vw", + x: () => spaceIntResX2 * -8 + "%", + y: () => spaceIntResY2 - (heightIntRes2 * 10) / 3 + "%", + rx: () => rxIntRes2 * 10 + "vw", + }, + }, + 0 + ) + + .to( + circleRes3, + { + attr: { + height: () => heightIntRes3 * 10 + "vh", + width: () => widthIntRes3 * 10 + "vw", + x: () => spaceIntResX3 * 18 + "%", + y: () => spaceIntResY3 - (heightIntRes3 * 10) / 3 + "%", + rx: () => rxIntRes3 * 10 + "vw", + }, + }, + 0 + ) .to( img, @@ -342,53 +446,53 @@ onMounted(() => { }, }); - window.addEventListener("load", init); - window.addEventListener("resize", resize); + // window.addEventListener("load", init); + // window.addEventListener("resize", resize); - function init() { - imgWidth = img.naturalWidth; - imgHeight = img.naturalHeight; + // function init() { + // imgWidth = img.naturalWidth; + // imgHeight = img.naturalHeight; - resize(); - } + // resize(); + // } - function resize() { - tl.progress(0); + // function resize() { + // tl.progress(0); - const r = svg.getBoundingClientRect(); - const rectWidth = r.width + pad; - const rectHeight = r.height + pad; + // const r = svg.getBoundingClientRect(); + // const rectWidth = r.width + pad; + // const rectHeight = r.height + pad; - const rx = rectWidth / imgWidth; - const ry = rectHeight / imgHeight; + // const rx = rectWidth / imgWidth; + // const ry = rectHeight / imgHeight; - const ratio = Math.max(rx, ry); + // const ratio = Math.max(rx, ry); - const width = imgWidth * ratio; - const height = imgHeight * ratio; + // const width = imgWidth * ratio; + // const height = imgHeight * ratio; - const dx = rectWidth / 2; - const dy = rectHeight / 2; - radius = Math.sqrt(dx * dx + dy * dy); + // const dx = rectWidth / 2; + // const dy = rectHeight / 2; + // radius = Math.sqrt(dx * dx + dy * dy); - gsap.set(img, { width, height }); - gsap.set(imgFixed, { width, height }); + // gsap.set(img, { width, height }); + // gsap.set(imgFixed, { width, height }); - tl.invalidate(); + // tl.invalidate(); - ScrollTrigger.refresh(); - } + // ScrollTrigger.refresh(); + // } const timeline = gsap.timeline({ scrollTrigger: { trigger: ".autoHide", // What element triggers the scroll scrub: true, // Add a small delay of scrolling and animation. `true` is direct start: "center center", // Can be top, center, bottom - end: "center", // Can be top, center, bottom + end: "top", // Can be top, center, bottom pin: true, }, }); let stagger = 0.8; - + timeline .from(".autoHide", { autoAlpha: 1, display: "block", stagger: stagger }) .to( @@ -397,7 +501,6 @@ onMounted(() => { stagger ); }); - }); @@ -414,8 +517,12 @@ body { padding: 0; } .border { - outline: 0.3vw solid red; - outline-offset: 0.8vw; + outline: 0.3vw solid !important; + outline-offset: 0.8vw !important; +} +.thickborder { + outline: 1vw solid !important; + outline-offset: 2vw !important; } section.spacer { height: 100vh; @@ -466,6 +573,24 @@ section.image-unmask { opacity: 0; z-index: -1; } +@media (max-width: 768px) { + #img { + position: fixed; + top: 50%; + left: 50%; + height: 100%; + opacity: 0.8; + z-index: -1; + } + #img-fixed { + position: fixed; + top: 50%; + left: 50%; + height: 100%; + opacity: 0; + z-index: -1; + } +} .text span { background: linear-gradient( to left, diff --git a/components/about-page/Map.vue b/components/about-page/Map.vue index f5ef851..073c57d 100644 --- a/components/about-page/Map.vue +++ b/components/about-page/Map.vue @@ -44,8 +44,8 @@ -
- + - +
- \ No newline at end of file + + \ No newline at end of file diff --git a/components/home-page/AboutUs.vue b/components/home-page/AboutUs.vue index 4ce290c..ccb8151 100644 --- a/components/home-page/AboutUs.vue +++ b/components/home-page/AboutUs.vue @@ -234,10 +234,11 @@ onMounted(() => { scrollTrigger: { trigger: ".panel", start: "top center", + end: "+=50" }, strokeDashoffset: 300, repeat: 1, - ease: "none", + ease: "slow(0.7,0.7,false)", duration: 5, }); @@ -273,7 +274,7 @@ onMounted(() => { const tl = gsap.timeline({ defaults: { duration: 1, - ease: "power1.inOut", + ease: "slow(0.7,0.7,false)", }, scrollTrigger: { trigger: ".about", diff --git a/components/home-page/Header.vue b/components/home-page/Header.vue index b8300cf..42e5c82 100644 --- a/components/home-page/Header.vue +++ b/components/home-page/Header.vue @@ -4,7 +4,7 @@ class="!max-w-[100vw] transform-bubbles header h-[76.923vw] md:h-[48.802vw] text-white flex flex-col items-center" > + + + + + + - - - - - - - - - - - - @@ -144,7 +138,7 @@ onMounted(() => { }, rotation: 500, duration: 3, - ease: "none", + ease: "slow(0.7,0.7,false)", }); gsap.to(".big", { scrollTrigger: { diff --git a/layouts/default.vue b/layouts/default.vue index 1c88c76..5898bd2 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,5 +1,4 @@