let screenSize = window.innerWidth; function time() { let e = new Date((new Date).getTime() + 72e5).toUTCString().match(/\d*:\d*/gm)[0]; document.querySelectorAll(".header__current-time").forEach((function (t) { t.innerText = "Berlin, " + e })) } time(), setInterval(time, 1e3), screenSize > 480 && ScrollTrigger.batch(".divider", { start: "top center", onEnter: e => { gsap.to(e, { scaleX: "100%", duration: 2 }) } }), screenSize < 480 && ScrollTrigger.batch(".divider", { start: "top 80%", onEnter: e => { gsap.to(e, { scaleX: "100%", duration: 2 }) } }), gsap.set(".section.is--wow", { scaleX: 1 }), gsap.timeline({ scrollTrigger: { trigger: ".section.is--start", start: "top top", end: "110% bottom", scrub: 1.5 } }).to(".start-eye-small", { morphSVG: ".start-eye-normal" }, "normalEye").to(".start-pupil-normal", { autoAlpha: 1 }, "-20%").to(".start__text-1", { autoAlpha: 0 }, "normalEye").to(".start__text-2-wrap > *", { autoAlpha: 1, y: 0, stagger: .2 }, "-=50%").to(".start__text-2-wrap", { autoAlpha: 0, y: "2rem", stagger: { each: .2, from: "end" } }).to(".start__text-3", { autoAlpha: 1, y: "2rem" }, "bigEye-=50%").to(".start-eye-small", { morphSVG: ".start-eye-big" }, "bigEye").to(".start-pupil-normal", { morphSVG: ".start-pupil-big" }, "bigEye"), setTimeout((() => { gsap.timeline({ scrollTrigger: { trigger: ".section.is--start", start: "80% center", end: "bottom top", scrub: 1.5 } }).fromTo(".section.is--wow", { scaleX: .6 }, { scaleX: 1 }), screenSize > 480 && gsap.timeline({ scrollTrigger: { trigger: ".section.is--why", start: "-14% center", end: "center bottom", scrub: 1.5 } }).fromTo(".section.is--wow", { scaleX: 1, y: 0, transformOrigin: "50% 100%", boxShadow: "0 0rem 0rem 0rem rgba(0,0,0,0.0)" }, { scaleX: .8, y: "-5vh", transformOrigin: "50% 100%", boxShadow: "0 1rem 3rem 0rem rgba(0,0,0,0.6)" }), screenSize < 480 && gsap.timeline({ scrollTrigger: { trigger: ".section.is--why", start: "top center", end: "center center", scrub: 1.5 } }).fromTo(".section.is--wow", { scaleX: 1, y: 0, transformOrigin: "50% 100%", boxShadow: "0 0rem 0rem 0rem rgba(0,0,0,0.0)" }, { scaleX: .9, y: "-5vh", transformOrigin: "50% 100%", boxShadow: "0 1rem 12rem 0rem rgba(0,0,0,0.6)" }) }), 200); let currencySigns = document.querySelectorAll(".is--sign"); fetch("https://ipapi.co/json").then((e => e.json())).then((e => { "EUR" != e.currency ? "GBP" != e.currency || currencySigns.forEach((function (e) { e.innerText = "£" })) : currencySigns.forEach((function (e) { e.innerText = "€" })) })), ScrollTrigger.create({ trigger: ".sturtups__title-wrap", start: "top center", start: "top 90%", onEnter: () => { gsap.to(".sturtups__title-wrap > *", { autoAlpha: 1, y: 0, stagger: .2 }) } }), ScrollTrigger.create({ trigger: ".concepts__title-wrap > *", start: "top center", start: "top 90%", onEnter: () => { gsap.to(".concepts__title-wrap > *", { autoAlpha: 1, y: 0, stagger: .2 }) } }), ScrollTrigger.batch(".sturtups__details-grid > *", { start: "top center", start: "top 90%", onEnter: e => { gsap.to(e, { autoAlpha: 1, y: 0, stagger: .3, duration: 1 }) } }), ScrollTrigger.batch(".is--price-card", { start: "top 90%", onEnter: e => { gsap.to(e, { autoAlpha: 1, y: 0, stagger: .3, duration: .7 }) } }), ScrollTrigger.create({ trigger: ".concepts__time-circle", start: "top 80%", onEnter: () => { gsap.to(".concepts__time-circle", { borderRadius: "100%", duration: 3 }) } }), ScrollTrigger.create({ trigger: ".why__title-wrap", start: "top 90%", onEnter: () => { gsap.to(".why__title-wrap > *", { autoAlpha: 1, y: 0, stagger: .2 }) } }), document.querySelector(".radio-interactive").addEventListener("click", (e => { gsap.to(".check-arrow", { autoAlpha: 1, duration: .2 }) })); let mircoBubbleText = new SplitText(".why__text-bubble > *", { type: "lines" }), mircoTl = gsap.timeline({ paused: !0 }).to(".why__mirco-body", { scale: 1, rotateZ: 0, duration: 1 }, "same").to(".why__mirco-hand", { keyframes: { scale: [.01, 1.1, .9, 1], rotateZ: [16, 0] }, duration: 1.5 }, "-=0.5").to(".why__text-bubble", { scale: 1, duration: .4 }, "bubble-=1").fromTo(mircoBubbleText.lines, { autoAlpha: 0, y: "2rem", rotateZ: 3 }, { autoAlpha: 1, y: 0, stagger: .1, rotateZ: 0, duration: .3 }, "bubble-=0.5"); if (ScrollTrigger.create({ trigger: ".why__mirco-body", start: "top 90%", onEnter: () => { mircoTl.play() } }), document.querySelector("" + (screenSize > 480 ? ".sturtups__detail-description-icon" : ".sturtups__detail-description-wrap.is--mobile")).addEventListener("click", (() => { gsap.to(".sturtups__popup-wrap", { autoAlpha: 1, duration: .5 }), document.querySelector("body").style.overflow = "hidden" })), document.querySelectorAll(".sturtups__popup-close, .sturtups__popup-overlay").forEach((function (e) { e.addEventListener("click", (() => { gsap.to(".sturtups__popup-wrap", { autoAlpha: 0, duration: .5 }), document.querySelector("body").style.overflow = "" })) })), screenSize > 480) { let e, t; document.querySelectorAll(".process__timeline-card-headline").forEach((r => { let o = r.nextSibling, s = r.querySelector(".vertical"); gsap.set(o, { height: 0 }), r.addEventListener("mouseenter", (() => { r.parentNode.style.zIndex = "1000", e = gsap.timeline({ paused: !0 }).to(o, { height: "auto", duration: .3 }, "cardOpen").to(s, { scaleY: 0, duration: .3, transformOrigin: "50% 50%" }, "cardOpen").play() })), r.addEventListener("mouseleave", (() => { r.parentNode.style.zIndex = "10", e.isActive() && e.reverse(), t = gsap.timeline({ paused: !0 }).to(o, { height: 0, duration: .3, immediateRender: !0 }, "cardClose").to(s, { scaleY: 1, duration: .3, transformOrigin: "50% 50%", immediateRender: !0 }, "cardClose").play() })) })) } if (screenSize > 480) { let e = document.querySelector(".process__content-wrap").clientWidth, t = document.querySelector("body").clientWidth; gsap.timeline({ scrollTrigger: { trigger: ".section.is--process", start: "top -10%", end: "95% bottom", scrub: 1.5 } }).to(".process__content-wrap", { x: -e + t }, "same") } if (screenSize < 480) { let e = document.querySelector("#week_number"); e.textContent = "WEEK 0-2", gsap.timeline({ scrollTrigger: { trigger: ".process__timeline-track", start: "top -10%", end: "80% bottom", scrub: 1.5 } }).call((() => { e.textContent = "WEEK 0-2" })).to(".process__timeline-card:nth-of-type(3)", { marginTop: "-40rem" }, "week1").call((() => { e.textContent = "WEEK 0-2" })).call((() => { e.textContent = "WEEK 1-2" })).to(".process__timeline-card:nth-of-type(2)", { marginTop: "-32rem" }, "week2").call((() => { e.textContent = "WEEK 1-2" })).call((() => { e.textContent = "WEEK 2-4" })).to(".process__timeline-card:nth-of-type(4)", { marginTop: "-40rem" }, "week3").call((() => { e.textContent = "WEEK 2-4" })) } if (document.querySelector(".reasons__card-flower-img").addEventListener("mouseenter", (() => { gsap.to(".reasons__card-flower-img", { rotate: "+=30", duration: .3, ease: "power3.inOut" }) })), document.querySelector(".reasons__card-flower-img").addEventListener("click", (() => { gsap.to(".reasons__card-flower-img", { rotate: "+=30", duration: .3, ease: "power3.inOut" }) })), screenSize > 480) { let e = { frame: 0 }, t = lottie.loadAnimation({ container: document.querySelector(".work__lottie-wrap"), renderer: "canvas", loop: !1, autoplay: !1, path: "https://uploads-ssl.webflow.com/62c83e27f0b913366f3b34a8/62c9b2a2d36ebc948de95983_laptop-mockup.json" }); t.addEventListener("DOMLoaded", (function () { gsap.timeline({ scrollTrigger: { trigger: ".section.is--works", start: "top center", end: "90% bottom", scrub: 1, snap: { snapTo: "labels", duration: .4, delay: .4, ease: "power1.inOut" } } }).to(e, { frame: t.totalFrames - 1, duration: 3, ease: "none", onUpdate: () => t.goToAndStop(e.frame, !0) }).to(".swiper.is--work, .swiper-pagination, .swiper-navigation-wrap", { autoAlpha: 1 }).addLabel("end") })); new Swiper(".swiper.is--work", { loop: !0, pagination: { el: ".swiper-pagination", renderBullet: function (e, t) { return '<span class="' + t + '">' + ((e < 10 ? "0" : e) + (e + 1)) + "</span>" } }, navigation: { nextEl: ".swiper-nav-button.is--next", prevEl: ".swiper-nav-button.is--prev" }, effect: "fade", fadeEffect: { crossFade: !0 } }); const r = document.querySelector(".swiper-nav-cursor"); document.querySelectorAll(".swiper-nav-button").forEach((e => { e.addEventListener("mouseenter", (() => { e.classList.contains("is--next") ? (r.innerHTML = "NEXT", gsap.to(r, { rotate: 16, duration: .3 })) : (r.innerHTML = "PREV", gsap.to(r, { rotate: -16, duration: .3 })) })) })), gsap.set(r, { xPercent: -50, yPercent: -50 }); let o = gsap.quickTo(r, "x", { duration: .6, ease: "power3" }), s = gsap.quickTo(r, "y", { duration: .6, ease: "power3" }); window.addEventListener("mousemove", (e => { o(e.clientX), s(e.clientY) })) } if (screenSize < 480) { let e = document.querySelector(".work__slide-image.is--video"); e.addEventListener("click", (() => { e.querySelector("video").play() })), gsap.to(".work__headline-wrap", { x: "-51.1%", duration: 3, repeat: -1, ease: "none" }); new Swiper(".swiper.is--work", { loop: !0, slidesPerView: "auto", spaceBetween: 20 }) } const mainForm = document.querySelector("#wf-form-main-form"), formSlides = document.querySelectorAll(".form__slide"), backButton = document.querySelector(".button.is--form.is--back"), nextButton = document.querySelector(".button.is--form.is--next"), sendButton = document.querySelector(".button.is--form.is--submit"), progressBar = document.querySelector(".form__progress-bar"), privacyText = document.querySelector(".form__privacy-text"); let currentSlideNumber = 0; function progressBarSize() { progressBar.style.width = (currentSlideNumber + 1) / formSlides.length * 100 + "%" } backButton.classList.add("is--disabled"), privacyText.style.display = "none", progressBarSize(), formSlides.forEach((function (e, t) { 0 !== t && e.classList.add("is--hidden"), e.querySelectorAll("input, textarea").forEach((e => { e.addEventListener("focus", (e => { e.target.classList.remove("is--error") })) })) })), document.querySelectorAll(".form__slide").forEach((e => { e.querySelectorAll("input, textarea").forEach((e => { e.addEventListener("keydown", (e => { 13 === e.keyCode && (e.preventDefault(), nextButton.click()) })) })) })), nextButton.addEventListener("click", (() => { let e = currentSlideNumber, t = formSlides[currentSlideNumber].querySelectorAll("input, textarea"), r = []; null !== t && t.forEach(((o, s) => { o.checkValidity() || e !== currentSlideNumber || (o.classList.add("is--error"), r.push(1)), o.checkValidity() && e === currentSlideNumber && (o.classList.remove("is--error"), r.push(0)), r.includes(1) || s !== t.length - 1 || (currentSlideNumber == formSlides.length - 2 && (privacyText.style.display = "", nextButton.textContent = "SEND"), currentSlideNumber < formSlides.length - 1 ? (formSlides[currentSlideNumber].classList.add("is--hidden"), currentSlideNumber++, formSlides[currentSlideNumber].classList.remove("is--hidden"), formSlides[currentSlideNumber].querySelector("input, textarea").focus(), progressBarSize(), backButton.classList.remove("is--disabled")) : (currentSlideNumber++, progressBarSize(), sendButton.click())) })) })), backButton.addEventListener("click", (() => { currentSlideNumber > 0 && (currentSlideNumber !== formSlides.length && formSlides[currentSlideNumber].classList.add("is--hidden"), currentSlideNumber -= 1, formSlides[currentSlideNumber].classList.remove("is--hidden"), formSlides[currentSlideNumber].querySelector("input, textarea").focus(), progressBarSize(), privacyText.style.display = "none", nextButton.textContent = "NEXT", 0 === currentSlideNumber && backButton.classList.add("is--disabled")) })); const stepsCursor = document.querySelector(".next__cursor"), stepSection = document.querySelector(".section.is--next"); gsap.set(stepsCursor, { autoAlpha: 0, scale: 0 }), stepSection.addEventListener("mouseenter", (() => { gsap.to(stepsCursor, { autoAlpha: 1, scale: 1, duration: .2 }) })), stepSection.addEventListener("mouseleave", (() => { gsap.to(stepsCursor, { autoAlpha: 0, scale: 0, duration: .2 }) })); let xToSteps = gsap.quickTo(stepsCursor, "x", { duration: .6, ease: "power3" }), yToSteps = gsap.quickTo(stepsCursor, "y", { duration: .6, ease: "power3" }); stepSection.addEventListener("mousemove", (e => { xToSteps(e.layerX - stepsCursor.clientWidth / 2), yToSteps(e.layerY - stepsCursor.clientHeight / 2) })), stepSection.addEventListener("mousedown", (e => { gsap.to(stepsCursor, { scale: 1.3, duration: .2 }) })), stepSection.addEventListener("mouseup", (e => { gsap.to(stepsCursor, { scale: 1, duration: .2 }) })); let nextContent = document.querySelector(".next__content"); if (Draggable.create(nextContent, { type: "x", edgeResistance: .65, bounds: { top: 100, left: 0, width: window.innerWidth }, lockAxis: !0, inertia: !0 }), gsap.timeline({ scrollTrigger: { trigger: ".section.is--footer", start: "top center", end: "bottom bottom", scrub: 1.5 } }).to("#footer-pupil-normal", { morphSVG: "#footer-eye-love" }), ScrollTrigger.create({ trigger: ".section.is--footer", start: "top top", end: "bottom bottom", onEnter: () => { document.querySelector(".section.is--start").style.visibility = "hidden" }, onLeaveBack: () => { document.querySelector(".section.is--start").style.visibility = "" } }), screenSize > 480) { function hideOnClickOutside(r) { const o = o => { !r.contains(o.target) && e(r) && (t.classList.remove("is--open"), gsap.to(t, { autoAlpha: 0, duration: .3 }), s()) }, s = () => { document.removeEventListener("click", o) }; document.addEventListener("click", o) } ScrollTrigger.create({ trigger: ".section.is--wow", start: "top bottom", end: "bottom bottom", onEnter: function () { gsap.to(".request-wrap", { autoAlpha: 0, duration: .3 }) }, onEnterBack: function () { gsap.to(".request-wrap", { autoAlpha: 0, duration: .3 }) }, onLeave: function () { gsap.to(".request-wrap", { autoAlpha: 1, duration: .3 }) }, onLeaveBack: function () { gsap.to(".request-wrap", { autoAlpha: 1, duration: .3 }) } }); const e = e => !!e && !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length), t = document.querySelector(".request__window"), r = document.querySelector(".request__button"), o = gsap.to(r, { rotate: 360, duration: 4, ease: "Power3.easeInOut", repeat: -1, yoyo: !0, repeatDelay: 1 }); r.addEventListener("click", (() => { t.classList.contains("is--open") ? (t.classList.remove("is--open"), gsap.to(t, { autoAlpha: 0, duration: .3 })) : (t.classList.add("is--open"), gsap.to(t, { autoAlpha: 1, duration: .3 }), o.pause(), hideOnClickOutside(r)) })), document.querySelector(".button.is--request").addEventListener("click", (() => { t.classList.remove("is--open"), gsap.to(t, { autoAlpha: 0, duration: .3 }) })) }