Name

Spezialist für Betonbahnen in der Ukraine

Land

Ukraine

Kategorien //SLOW-IN document.querySelectorAll(".slow-in-container").forEach(function(container, i) { let items = container.querySelectorAll(".slow-in-left"); let item_count = items.length; items.forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom 80%", scrub:1, toggleActions:"play none none reverse" }, }); elem.from(item,{ x:-200, duration:0.7, ease: "power1.inOut", delay: ((0.1 * item_count) + (-0.1 * (index+1))) }); }); items = container.querySelectorAll(".slow-in-right"); item_count = items.length; items.forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom 80%", scrub:1, toggleActions:"play none none reverse" }, }); elem.from(item,{ x:200, duration:0.7, ease: "power1.inOut", delay: ((0.1 * (index+1))) }); }); items = container.querySelectorAll(".slow-in-top"); item_count = items.length; items.forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom 80%", scrub:1, toggleActions:"play none none reverse" }, }); elem.from(item,{ y:-50, duration:0.7, ease: "power1.inOut", delay: ((0.1 * (index+1))) }); }); items = container.querySelectorAll(".slow-in-bottom"); item_count = items.length; items.forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom 80%", scrub:1, toggleActions:"play none none reverse", }, }); elem.from(item,{ y:50, duration:0.7, ease: "power1.inOut", delay: ((0.3 * (index+1))) }); }); items = container.querySelectorAll(".slow-in-fade"); item_count = items.length; items.forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom 80%", scrub:1, toggleActions:"play none none reverse" }, }); elem.from(item,{ opacity:0, duration:0.7, ease: "power1.inOut", delay: ((0.1 * item_count) + (-0.1 * (index+1))) }); }); }); //FLY IN RIGHT gsap.utils.toArray('.fly-in-right').forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom top", toggleActions:"restart none restart none" }, }); elem.from(item,{ x:50, duration:0.7, ease: "power1.inOut", }); }); //FLY IN LEFT gsap.utils.toArray('.fly-in-left').forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom top", toggleActions:"restart none restart none" }, }); elem.from(item,{ x:-50, duration:0.7, ease: "power1.inOut", }); }); //FLY IN TOP gsap.utils.toArray('.fly-in-top').forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom top", toggleActions:"restart none restart none" }, }); elem.from(item,{ y:-50, duration:0.7, ease: "power1.inOut", }); }); //FLY IN BOTTOM gsap.utils.toArray('.fly-in-bottom').forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom top", toggleActions:"restart none restart none" }, }); elem.from(item,{ y:50, duration:0.7, ease: "power1.inOut", }); }); //FLY IN BOTTOM with stagger if (document.querySelectorAll('.fly-up-box').length) { const boxes = gsap.utils.toArray('.fly-up-box'); ScrollTrigger.batch(boxes, { start: "top bottom", onEnter: (batch) => { gsap.fromTo(batch, { y: 50, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.7, stagger: 0.3 } ); }, onEnterBack: (batch) => { gsap.fromTo(batch, { y: 50, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.7, stagger: 0.3 } ); }, once: false, }); } //FADE IN gsap.utils.toArray('.fade-in').forEach((item, index) => { console.log('fade', item) let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom top", toggleActions:"restart none restart none" }, }); elem.from(item,{ opacity:0, duration:0.7, ease: "power1.inOut", }); }); //FLY IN BOTTOM WITH STAGGER - MC document.addEventListener("DOMContentLoaded", () => { if (document.querySelectorAll('.fly-up-box').length) { console.log("box is found"); gsap.from('.fly-up', { y: 500, duration: 0.5, ease: "power1.inOut", delay: 0.3, stagger: 0.2, scrollTrigger: { trigger: ".fly-up-box", start: "top bottom", end: "bottom top", toggleActions: "restart none restart none", once: true } }); } }); //FADE IN - MC gsap.utils.toArray('.fade-in').forEach((item, index) => { let elem = gsap.timeline({ scrollTrigger:{ trigger:item, start: "top bottom", end: "bottom top", toggleActions:"restart none restart none" }, }); elem.from(item,{ opacity:0, duration:0.7, ease: "power1.inOut", }); }); // CAROUSEL ARROW FLY TO THE LEFT - MC document.querySelectorAll('.leftButtonContainer').forEach((containerL) => { const arrowL = containerL.querySelector('.arrowL'); if (arrowL) { const flyOutAnimationL = gsap.to(arrowL, { duration: 0.3, ease: "power1.inOut", x: "-=100", autoAlpha: 0, paused: true, onComplete: () => { gsap.set(arrowL, { x: "+=100", autoAlpha: 0 }); flyInAnimationL.restart(); } }); const flyInAnimationL = gsap.to(arrowL, { duration: 0.3, ease: "power1.inOut", x: 0, autoAlpha: 1, paused: true, onStart: () => { gsap.set(arrowL, { x: "+=100" }); } }); gsap.set(arrowL, { x: 0 }); containerL.addEventListener('mouseenter', () => { flyOutAnimationL.restart(); }); } }); // CAROUSEL ARROW FLY TO THE RIGHT - MC document.querySelectorAll('.rightButtonContainer').forEach((containerR) => { const arrowR = containerR.querySelector('.arrowR'); if (arrowR) { const flyOutAnimationR = gsap.to(arrowR, { duration: 0.3, ease: "power1.inOut", x: "+=100", paused: true, autoAlpha: 0, onComplete: () => { gsap.set(arrowR, { x: "-=100"}); flyInAnimationR.restart(); } }); const flyInAnimationR = gsap.to(arrowR, { duration: 0.3, ease: "power1.inOut", x: 0, autoAlpha: 1, paused: true, onStart: () => { gsap.set(arrowR, { x: "-=100"}); } }); gsap.set(arrowR, { x: 0, autoAlpha: 1 }); containerR.addEventListener('mouseenter', () => { flyOutAnimationR.restart(); }); } }); //ZOOM if (document.querySelectorAll('.zoom').length != 0 ) { ScrollTrigger.batch(".zoom", { interval:0, batchMax:99, start:"top bottom", end:"bottom top", onEnter: batch => gsap.to(batch, {scale:1, duration:1, ease: "power1.inOut", stagger:0.04, overwrite: true}), onLeave: batch => gsap.set(batch, {scale:0.5, duration:1, ease: "power1.inOut", overwrite: true}), onEnterBack: batch => gsap.to(batch, {scale:1, duration:1, ease: "power1.inOut", stagger: 0.04, overwrite: true}), onLeaveBack: batch => gsap.set(batch, {scale:0.5, duration:1, ease: "power1.inOut", overwrite: true}) }); gsap.set(".zoom", {scale:0.5}); } if (window.location.hash) { var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character var element = document.getElementsByName(hash)[0]; if (element) { var headerOffset = document.getElementById('nav_main').offsetHeight + 25; var elementPosition = element.getBoundingClientRect().top; var offsetPosition = elementPosition + window.pageYOffset - headerOffset; /* window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); */ } } [[!+lux_cookie_consent_status:is=`accept 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() { }, } ] }); });