MC aktiv 2/2021

pageImpression = pageImpression + 1; }); barba.init({ preventRunning: true, timeout: 5000, /* for debuggin usi this parameters debug: false, logLevel: 'debug', */ /*sync: true,*/ // define a custom function that will prevent Barba // from working on links that contains a `prevent` CSS class prevent: ({ el, event, href }) => { if (!el) { return false; } if (el.href && el.href.includes('landingpages')) { return true; } if (el.classList && el.classList.contains('prevent')) { return true; } return false; }, preventScroll: true, scroll: false, views: [], transitions: [ { name: 'header-transition', sync: false, from: { custom: ({ trigger }) => { if (trigger.classList && trigger.classList.contains('headerFlip')) { transistionImage = trigger.getElementsByClassName("transitionImage")[0]; if (typeof transistionImage == "undefined") { return false; } transisitionEffect = getRandomInt(1); return true; } return false; } }, async leave(data) { if (transistionImage === null) return; // can be null, return if null to not throw an error if ( transisitionEffect == 0) { const done = this.async(); let element = transistionImage; let state = Flip.getState(element); let headerImage = document.getElementById('headerImage'); headerImage.removeChild(headerImage.getElementsByTagName('img')[0]); let headerContent = document.querySelector('.headerContent'); gsap.to(headerContent, { opacity: 0, }); let content = document.querySelector('.content'); gsap.to(content, { opacity: 0, }); headerImage.appendChild(element); scroll(0,0); Flip.from(state, {duration:0.9, ease: "power1.inOut", scale: true, absolute:true,}); await delay(900); // Der await Operator wird genutzt, um auf einen Promise zu warten. Er kann nur in einer async Funktion benutzt werden. done(); } }, enter(data) { window.scrollTop = '0'; let content = data.next.container.querySelector('.content'); gsap.from(content, { opacity: 0, }); let headerContent = data.next.container.querySelector('.headerContent'); gsap.from(headerContent, { opacity: 0, delay: 0.5, }); }, after(data) { } }, { name: 'microsites_sliding_scroll', sync: true, from: { custom: (data) => { const { trigger, current, next } = data; function getParent(pathname) { const parts = pathname.split('/').filter(part => part !== '') return parts.length > 1 ? parts[parts.length - 2] : parts[0] || null } if (trigger === 'popstate' || trigger === 'back' || trigger === 'forward') { return false; } if(trigger.classList.contains('microsites_sliding_scroll') || trigger.classList.contains('sliding_scroll')){ return true; } if(current.namespace == 'template_138' && next.namespace == 'template_138') { return getParent(current.url.path) === getParent(next.url.path) } return false; } }, to: { namespace: [ 'template_120', 'template_138', ] },async leave({ current, next, trigger }) { const debug = window.debug; if (debug) console.log('Debug mode enabled'); const done = this.async(); const menuindexCurrent = +current.container.querySelector('[data-menuindex]').dataset.menuindex; const menuindexNext = +next.container.querySelector('[data-menuindex]').dataset.menuindex; const nextContent = next.container.querySelector('.content'); const currentContent = current.container.querySelector('.content'); let xPerc = menuindexCurrent < menuindexNext ? 100 : -100; const navbarHeight = document.querySelector('.navbar').offsetHeight; const pageHeight = document.querySelector('.header').offsetHeight; const nextContentHeight = nextContent.offsetHeight; const totalHeight = nextContentHeight + navbarHeight + pageHeight; document.body.style.minHeight = `${totalHeight}px`; const targetScrollY = trigger.classList.contains('microsites_sliding_scroll') ? pageHeight - navbarHeight : pageHeight + navbarHeight; const top = trigger.classList.contains('microsites_sliding_scroll') ? '0px' : '116px'; gsap.set(next.container, { xPercent: xPerc, position: 'absolute', top: top, left: 0, display: 'block' }); const tl = gsap.timeline({ onComplete: () => { gsap.set(current.container, { display: "none" }); gsap.set(next.container, { clearProps: 'position,top,left,xPercent' }); gsap.set(nextContent, { clearProps: 'xPercent' }); document.body.style.minHeight = ''; done(); } }); tl.to(currentContent, { xPercent: -xPerc, duration: debug ? 5 : 0.5, ease: "power1.inOut", }, 0); tl.to(nextContent, { xPercent: -xPerc, duration: debug ? 5 : 0.5, ease: "power1.inOut" }, 0); tl.to(window, { scrollTo: { y: targetScrollY }, duration: debug ? 5 : 0.5, ease: "power1.inOut" }, 0); }, enter({ next }) { gsap.from(next.container, { opacity: 0, }); } }, { name: 'microsites_sliding', sync: true, from: { custom: ({ trigger }) => { if (trigger === 'popstate' || trigger === 'back' || trigger === 'forward') { return false; } if(trigger.classList.contains('microsites_sliding')){ return true; } return false; } }, to: { namespace: [ 'template_120', ] }, async leave({current, next}) { const done = this.async(); const tl = gsap.timeline({onComplete: ()=>{ gsap.set(next.container, {clearProps: 'all'}) gsap.set(next.container.querySelector('.content'), {clearProps: 'all'}) }}) const currentContent = current.container.querySelector('.content') const nextContent = next.container.querySelector('.content') const currentH1 = document.querySelector('.currentPagetitle') const currentIntrotext = document.querySelector('.currentIntrotext') const nextH1 = next.container.querySelector('.pageTitle') const nextIntrotext = next.container.querySelector('.introtext') gsap.set(next.container, { xPercent: 100, position: 'absolute', top: 0, left: 0 }) tl.to(currentContent, {xPercent: -100, opacity: 0, duration: 1, ease: "power1.inOut", onComplete: () => { gsap.set(current.container, { display: "none" }); }}, 0) .to([currentH1, currentIntrotext], { opacity: 0, duration: 0.5, ease: "power1.inOut", onComplete: () => { currentH1.innerText = nextH1.innerText; currentIntrotext.innerText = nextIntrotext.innerText; }}, 0) .to([currentH1, currentIntrotext], { opacity: 1, duration: 0.5, ease: "power1.inOut" }, 0.5) .to(nextContent, {xPercent: -100, duration: 1, ease: "power1.inOut"}, 0) await delay(1000); done(); }, enter({next}){ gsap.from(next.container, { opacity: 0, }); } }, { name: 'default', sync: false, async leave(data) { const done = this.async(); gsap.to(data.current.container, { opacity: 0, duration: 0.5, }); await delay(500); // Der await Operator wird genutzt, um auf einen Promise zu warten. Er kann nur in einer async Funktion benutzt werden. scroll(0,0); done(); }, enter(data) { window.scrollTop = '0'; gsap.from(data.next.container, { opacity: 0, duration: 0.5, }); }, after(data) { // START: Ankur - 15062023 - For Scroll Position History if(scrollHistory[data.next.url.href]) { let scroll = scrollHistory[data.next.url.href]; window.scrollTo({top: scroll.y, behavior: 'instant'}); } // END: Ankur } }, { name: 'self', enter() { }, } ] }); });