https://www.cancom.de/wp-content/cache/min/2/wp-content/plugins/gr…/animations/animations.js?ver=1789639903

1var greyd=greyd||{};greyd.animations=new function(){this.usesReducedMotion=!1;this.init=function(){let animTargets=document.querySelectorAll("[data-anim-action]:not([data-anim-init='1'])");if(animTargets.length===0)return;const mediaQuery=window.matchMedia("prefers-reduced-motion: reduce");this.usesReducedMotion=!mediaQuery||mediaQuery.matches;animTargets.forEach(target=>{greyd.animations.setAnimationEvents(target)})};this.setAnimationEvents=function(target){const animEvent=target.dataset.animEvent;switch(animEvent){case "hover":case "parentHover":case "parentSticky":break;case "click":target.addEventListener('click',(e)=>{target.dataset.animTriggered=target.dataset.animTriggered==="true"?"false":"true"});break;case "parentClick":const parentSelector=target.dataset.animParent;const closestParent=greyd.animations.getClosest(target,parentSelector);if(closestParent){closestParent.addEventListener('click',(e)=>{target.dataset.animTriggered=target.dataset.animTriggered==="true"?"false":"true"})}
2break;case "whileScroll":case "onScroll":greyd.scrollObserver.observeElement(target,greyd.animations.whileInViewport,'always')
3break;case "isSticky":greyd.scrollObserver.observeElement(target,greyd.animations.whenSticky,'always')
4break;case "load":target.dataset.animTriggered="true";if(target.dataset.animReverse==="true"){setInterval(()=>{target.dataset.animTriggered=target.dataset.animTriggered==="true"?"false":"true"},parseInt(target.dataset.animTime))}
5break}
6target.dataset.animInit="1"};this.whileInViewport=function(target,e,inViewport){const animEvent=target.dataset.animEvent;if(animEvent==='onScroll'){greyd.animations.animateElementOnScroll(target)}else if(animEvent==='whileScroll'){greyd.animations.animateElementWhileScroll(target)}};this.whenSticky=function(target){if(target.className.indexOf('is-position-sticky')<0){greyd.scrollObserver.unobserveElement(target)}
7if(typeof target.dataset.offsetTop==="undefined"){target.dataset.offsetTop=parseInt(window.getComputedStyle(target).getPropertyValue('top'))+1}else{const boundingClientRect=target.getBoundingClientRect();if(boundingClientRect.y<=target.dataset.offsetTop){target.dataset.animTriggered="true"}else{target.dataset.animTriggered="false"}}};this.animateElementOnScroll=function(target){const animStart=target.dataset.animStart?parseInt(target.dataset.animStart):50;if(isNaN(animStart)){console.error('Invalid data-anim-start attribute:',target);return}
8if(typeof target.dataset.animStart=='string'&&target.dataset.animStart.indexOf('px')>-1){const scrollTop=window.pageYOffset||document.documentElement.scrollTop;if(target.dataset.animReverse==="true"){if(animStart>scrollTop){target.dataset.animTriggered="false"}else{target.dataset.animTriggered="true"}}else{if(animStart<=scrollTop){target.dataset.animTriggered="true";greyd.scrollObserver.unobserveElement(target)}}}else{const startLine=(window.innerHeight/100)*animStart;if(target.dataset.animReverse==="true"){const boundingClientRect=target.getBoundingClientRect();const targetCenter=boundingClientRect.y+(boundingClientRect.height/2);if(targetCenter<=startLine&&target.dataset.animTriggered==="false"){target.dataset.animTriggered="true"}else if(targetCenter>startLine&&target.dataset.animTriggered==="true"){target.dataset.animTriggered="false"}}else if(target.getBoundingClientRect().y<=startLine){target.dataset.animTriggered="true";greyd.scrollObserver.unobserveElement(target)}}};this.animateElementWhileScroll=function(target){const animStart=target.dataset.animStart?parseInt(target.dataset.animStart):50;const animEnd=target.dataset.animEnd?parseInt(target.dataset.animEnd):50;if(isNaN(animStart)){console.error('Invalid data-anim-start attribute:',target);return}else if(isNaN(animEnd)){console.error('Invalid data-anim-end attribute:',animEnd);return}
9const boundingClientRect=target.getBoundingClientRect();const targetCenter=boundingClientRect.y+(boundingClientRect.height/2);const endLine=(window.innerHeight/100)*animEnd;let startLine=(window.innerHeight/100)*animStart;if(targetCenter>startLine||targetCenter<endLine){target.dataset.animOffset=0;if(target.dataset.animTriggered==="true"){const progress=targetCenter>startLine?0:1;const styles=greyd.animations.getAnimatedStyles(target,progress);for(let property in styles){target.style[property]=styles[property]}
10target.dataset.animTriggered="false"}
11return}
12if(!target.hasAttribute('data-anim-offset')){const offset=parseInt(startLine-targetCenter);target.dataset.animOffset=offset;return}
13const offset=target.dataset.animOffset?parseInt(target.dataset.animOffset):0;if(offset>0){startLine=startLine-offset;if(targetCenter>startLine||targetCenter<endLine){return}}
14const progress=(targetCenter-startLine)/(endLine-startLine);const styles=greyd.animations.getAnimatedStyles(target,progress);for(let property in styles){target.style[property]=styles[property]}
15if(target.dataset.animTriggered==="false"){target.dataset.animTriggered="true"}};this.getAnimatedStyles=function(target,progress){if(greyd.animations.usesReducedMotion){return greyd.animations.cssStringToObject(target.dataset.animTo)}
16const styles={};const fromProperties=greyd.animations.cssStringToObject(target.dataset.animFrom);const toProperties=greyd.animations.cssStringToObject(target.dataset.animTo);const properties=Object.keys({...fromProperties,...toProperties});let computedStyle=null;

16properties.forEach(property=>{let fromValue=property in fromProperties?fromProperties[property]:null;let toValue=property in toProperties?toProperties[property]:null;if(!fromValue||!toValue){return}
17const fromHasCssVars=fromValue.indexOf('var(')>-1;const toHasCssVars=toValue.indexOf('var(')>-1;if(fromHasCssVars||toHasCssVars){if(fromValue.indexOf('color')>-1||toValue.indexOf('color')>-1){styles[property]='color-mix(in hsl, '+fromValue+' '+(100-(progress*100))+'%, '+toValue+' '+(100*progress)+'%)';return}else{let resolvedFromValue=fromValue;let resolvedToValue=toValue;if(!computedStyle){computedStyle=window.getComputedStyle(document.body)}
18if(fromHasCssVars){resolvedFromValue=computedStyle.getPropertyValue(fromValue.replace('var(','').replace(')',''))}
19if(toHasCssVars){resolvedToValue=computedStyle.getPropertyValue(toValue.replace('var(','').replace(')',''))}
20if(!resolvedFromValue||!resolvedToValue){styles[property]=progress<0.5?fromValue:toValue;return}else{fromValue=resolvedFromValue;toValue=resolvedToValue}}}
21const fromPieces=fromValue.match(/(\w+\()|([+-]?\d*\.\d+|[+-]?\d+)|(\))|([\%\w]+)|(\s+)|(,)/g);const toPieces=toValue.match(/(\w+\()|([+-]?\d*\.\d+|[+-]?\d+)|(\))|([\%\w]+)|(\s+)|(,)/g);if(fromPieces&&toPieces){const pieces=fromPieces.map((from,i)=>{const to=toPieces[i];if(greyd.animations.isNumeric(from)&&greyd.animations.isNumeric(to)){return Math.round(greyd.animations.mapProgress(progress,0,1,from,to)*1000)/1000}
22return to});styles[property]=pieces.join('')}else{styles[property]=progress<0.5?fromValue:toValue}});return styles}
23this.cssStringToObject=function(cssString){let cssObject={};let cssProperties=cssString.split(';');cssProperties.forEach(property=>{let keyValue=property.split(':');

23if(keyValue.length===2){cssObject[keyValue[0].trim()]=keyValue[1].trim()}});return cssObject}
24this.objectToCssString=function(cssObject){let cssString="";for(let key in cssObject){cssString+=key+": "+cssObject[key]+"; "}
25return cssString}
26this.mapProgress=function(value,inMin,inMax,outMin,outMax){if(outMin<outMax){return(value-inMin)*(outMax-outMin)/(inMax-inMin)+Math.min(outMin,outMax)}else{return(value-inMin)*(outMax-outMin)/(inMax-inMin)+Math.max(outMin,outMax)}};this.isNumeric=function(value){return!isNaN(parseFloat(value))&&isFinite(value)}
27this.getClosest=function(elem,selector){if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(s){var matches=(this.document||this.ownerDocument).querySelectorAll(s),i=matches.length;while(--i>=0&&matches.item(i)!==this){}
28return i>-1}}
29for(;elem&&elem!==document;elem=elem.parentNode){if(elem.matches(selector))return elem}
30return null}};addEventListener('DOMContentLoaded',function(){greyd.animations.init()})