animaticjs/dist/animatic.min.js

A lightweight JavaScript animation library for scroll, hover, click and more. From Static to Cinematic.

!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(){var t="Unknown";-1!=window.navigator.userAgent.indexOf("Windows")?t="Windows":-1!=window.navigator.userAgent.indexOf("Mac")&&(t="Mac");var a=!!navigator.userAgent.match(/Trident/g)||!!navigator.userAgent.match(/MSIE/g),i="",e=0,n=!0,s={},o={},r={},c={},m={},l={},d="visibility: hidden;",f="animation-fill-mode: both;",u=" -webkit-animation-fill-mode: both; visibility: visible;",h=" visibility: visible; -webkit-animation-duration: 1s; display:block;-webkit-animation-fill-mode: both; ",v={selectorClass:"animatic",dataClickElm:"data-animatic-click",dataMouseoverElm:"data-animatic-mouseover",dataMouseoutElm:"data-animatic-mouseout",dataSelectorIn:"data-animatic-top",dataSelectorOut:"data-animatic-down",dataAnimaticInDelay:"data-animatic-top-delay",dataAnimaticOutDelay:"data-animatic-down-delay",dataAnimaticOffsetTop:"data-animatic-offset-top",dataAnimaticOffsetBottom:"data-animatic-offset-bottom",dataCharacterAnimate:"data-animatic-characters",dataAnimaticIndex:"data-animatic-index",dataAnimaticTargetClick:"data-animatic-target-click",dataAnimaticTargetMouseOver:"data-animatic-target-mouseover",dataAnimaticTargetMouseOut:"data-animatic-target-mouseout",dataAnimaticSelector:"data-animatic-selector",dataAnimaticAnimation:"data-animatic-animation",animaticOffsetTop:0,animaticOffsetBottom:0,animaticMacOffsetTop:0,animaticMacOffsetBottom:0,animaticWindowsOffsetTop:0,animaticWindowsOffsetBottom:0,animaticTabOffsetTop:0,animaticTabOffsetBottom:0,animaticMobileOffsetTop:0,animaticMobileOffsetBottom:0,animaticDisable:!1,animaticAnimationCssRemove:!1,animaticScreen:{mobile:{minWidth:0,maxWidth:767},tab:{minWidth:768,maxWidth:991},desktop:{minWidth:992,maxWidth:1200},lgDesktop:{minWidth:1201,maxWidth:1e4}},animaticStopIt:{mobile:!1,tab:!1,desktop:!1,lgDesktop:!1}};this.isInView=function(t){var a,i,e,n;e=(n=window.pageYOffset)+window.innerHeight,a=(i=this.offsetTop(t))+t.clientHeight;var s=t.getAttribute(v.dataAnimaticOffsetTop);s?n+=parseInt(s):parseInt(v.animaticOffsetTop)&&(n+=parseInt(v.animaticOffsetTop));var o=t.getAttribute(v.dataAnimaticOffsetBottom);return o?e-=parseInt(o):parseInt(v.animaticOffsetBottom)&&(e-=parseInt(v.animaticOffsetBottom)),i<=e&&a>=n},a&&(h="visibility: visible; animation-duration: 1s;"),this.makeStyle=function(t,e){var n="";if(null!==t&&""!==t){var s=t.trim().split(",");n=u,n+=a?" animation-duration: 1s; ":" -webkit-animation-duration: 1s; ";for(var o=0;o<s.length;o++){var r=s[o].trim(),c=r.split(":");if(2===c.length)var m="animation-"+c[0].trim(),l=c[1].trim();else m="animation-name",l=r;a?n+=m+":"+l+"; ":"animation-delay"==m?(n+=d,"topToBottom"===e?i.setAttribute(v.dataAnimaticInDelay,l):"bottomToTop"===e&&i.setAttribute(v.dataAnimaticOutDelay,l)):n+=" -webkit-"+m.trim()+":"+l+"; "}}return n},this.isHidden=function(t){return null!==t.getAttribute("style")&&t.getAttribute("style").trim()==d.trim()},this.animationStart=function(){if(!0===v.animaticDisable)return 0;if(b){var t=window.pageYOffset||document.documentElement.scrollTop;n=t>=e,e=t;for(var a=0;a<b;a++){this.isInView(p[a])?this.showElement(a):this.clearStyle(a)}}},this.hasClass=function(t,a){return(" "+t.className+" ").indexOf(" "+a+" ")>-1};var p={},b=0,A=screen.width;this.checkScreenForAnimation=function(){v.animaticStopIt.mobile&&A>=parseInt(v.animaticScreen.mobile.minWidth)&&A<=parseInt(v.animaticScreen.mobile.maxWidth)||v.animaticStopIt.tab&&A>=parseInt(v.animaticScreen.tab.minWidth)&&A<=parseInt(v.animaticScreen.tab.maxWidth)||v.animaticStopIt.desktop&&A>=parseInt(v.animaticScreen.desktop.minWidth)&&A<=parseInt(v.animaticScreen.desktop.maxWidth)||v.animaticStopIt.lgDesktop&&A>=parseInt(v.animaticScreen.lgDesktop.minWidth)&&A<=parseInt(v.animaticScreen.lgDesktop.maxWidth)?(v.animaticDisable=!0,this.resetWindow()):v.animaticDisable=!1},this.initOptions=function(t,a){var i,e;for(i in a)e=a[i],null==t[i]&&(t[i]=e);return t},this.animatic=function(a){if(a&&(v=this.initOptions(a,v)),!0===v.animaticDisable)return 0;v.animaticStopIt&&this.checkScreenForAnimation(),"Windows"===t&&parseInt(v.animaticWindowsOffsetTop)&&(v.animaticOffsetTop=parseInt(v.animaticWindowsOffsetTop)),"Windows"===t&&parseInt(v.animaticWindowsOffsetBottom)&&(v.animaticOffsetBottom=parseInt(v.animaticWindowsOffsetBottom)),"Mac"===t&&parseInt(v.animaticMacOffsetTop)&&(v.animaticOffsetTop=parseInt(v.animaticMacOffsetTop)),"Mac"===t&&parseInt(v.animaticMacOffsetBottom)&&(v.animaticOffsetBottom=parseInt(v.animaticMacOffsetBottom)),parseInt(v.animaticMobileOffsetTop)&&A>=parseInt(v.animaticScreen.mobile.minWidth)&&A<=parseInt(v.animaticScreen.mobile.maxWidth)?v.animaticOffsetTop=parseInt(v.animaticMobileOffsetTop):parseInt(v.animaticTabOffsetTop)&&A>=parseInt(v.animaticScreen.tab.minWidth)&&A<=parseInt(v.animaticScreen.tab.maxWidth)&&(v.animaticOffsetTop=parseInt(v.animaticTabOffsetTop)),parseInt(v.animaticMobileOffsetBottom)&&A>=parseInt(v.animaticScreen.mobile.minWidth)&&A<=parseInt(v.animaticScreen.mobile.maxWidth)?v.animaticOffsetBottom=parseInt(v.animaticMobileOffsetBottom):parseInt(v.animaticTabOffsetBottom)&&A>=parseInt(v.animaticScreen.tab.minWidth)&&A<=parseInt(v.animaticScreen.tab.maxWidth)&&(v.animaticOffsetBottom=parseInt(v.animaticTabOffsetBottom));var e=document.querySelectorAll("["+v.dataSelectorIn+"]"),n=e.length,d=document.querySelectorAll("["+v.dataSelectorOut+"]"),f=d.length,u=document.querySelectorAll("["+v.dataAnimaticTargetClick+"]"),h=u.length;if(h)for(var g=0;g<h;g++)u[g].addEventListener("click",O,!0),this.hasClass(u[g],v.selectorClass)||(u[g].className+=" "+v.selectorClass);var T=document.querySelectorAll("["+v.dataAnimaticTargetMouseOver+"]"),y=T.length;if(y)for(var I=0;I<y;I++)T[I].addEventListener("mouseover",O,!0),this.hasClass(T[I],v.selectorClass)||(T[I].className+=" "+v.selectorClass);var S=document.querySelectorAll("["+v.dataAnimaticTargetMouseOut+"]"),w=S.length;if(w)for(g=0;g<w;g++)S[g].addEventListener("mouseout",O,!0),this.hasClass(S[g],v.selectorClass)||(S[g].className+=" "+v.selectorClass);var C=document.querySelectorAll("["+v.dataClickElm+"]"),k=C.length;if(k)for(var x=0;x<k;x++)C[x].addEventListener("click",this.cssAnimationClick),this.hasClass(C[x],v.selectorClass)||(C[x].className+=" "+v.selectorClass);var E=document.querySelectorAll("["+v.dataMouseoverElm+"]"),M=E.length;if(M)for(var W=0;W<M;W++)E[W].addEventListener("mouseover",this.cssAnimationMouseOver),this.hasClass(E[W],v.selectorClass)||(E[W].className+=" "+v.selectorClass);var B=document.querySelectorAll("["+v.dataMouseoutElm+"]"),D=B.length;if(D)for(var L=0;L<D;L++)B[L].addEventListener("mouseout",this.cssAnimationMouseOut),this.hasClass(B[L],v.selectorClass)||(B[L].className+=" "+v.selectorClass);if(n)for(var N=0;N<n;N++)this.hasClass(e[N],v.selectorClass)||(e[N].className+=" "+v.selectorClass);if(f)for(var q=0;q<f;q++)this.hasClass(d[q],v.selectorClass)||(d[q].className+=" "+v.selectorClass);if(p=document.querySelectorAll("."+v.selectorClass),b=p.length){for(var F=0;F<b;F++){if(p[F],i=p[F],s[F]="",o[F]="",r[F]="",c[F]="",m[F]="",l[F]="",v.animaticAnimationCssRemove){p[F].setAttribute(v.dataAnimaticIndex,F);var H=p[F];H.addEventListener("webkitAnimationEnd",cssAnimtionEnd,!1),H.addEventListener("animationend",cssAnimtionEnd,!1),H.addEventListener("oanimationend",cssAnimtionEnd,!1)}var Y=p[F].getAttribute("style");Y&&(c[F]=Y);var z=p[F].getAttribute("class");z&&(s[F]=z);var j=p[F].getAttribute(v.dataCharacterAnimate);if(j){var P=p[F].textContent.trim(),R=j.trim().replace(/\s/g,"").split(","),V=150,U=!1,G=p[F].getAttribute(v.dataSelectorIn),J=p[F].getAttribute(v.dataSelectorOut);G&&(m[F]=" "+G+" "),J&&(l[F]=" "+J+" ");for(var K=0;K<R.length;K++){var Q=R[K].trim().split(":");"delay"==Q[0]?V=Q[1]:"randomly"==Q[0]&&(U=!0)}for(var X=[],Z=0;Z<P.length;Z++)X[Z]=Z;U&&(X=this.shuffle(X));for(var $=0,_="",tt=0;tt<P.length;tt++){var at=P[tt];if(" "!=at){var it=V*X[$];$++,at='<span style="'+(" display: inline-block; animation-fill-mode: both; -webkit-animation-duration:1s; -webkit-animation-delay:"+it+"ms; ")+'" >'+at+"</span>"}_+=at}p[F].innerHTML=_}else{var et=p[F].getAttribute(v.dataSelectorIn);et&&(o[F]=this.makeStyle(et,"topToBottom"),p[F].removeAttribute(v.dataSelectorIn));var nt=p[F].getAttribute(v.dataSelectorOut);nt&&(r[F]=this.makeStyle(nt,"bottomToTop"),p[F].removeAttribute(v.dataSelectorOut))}this.clearStyle(F)}animationStart()}window.onscroll=function(){animationStart()},window.addEventListener("resize",(function(){this.checkScreenForAnimation()}))},this.shuffle=function(t){for(var a,i=t.length,e=0;i--;)e=Math.floor(Math.random()*(i+1)),a=t[i],t[i]=t[e],t[e]=a;return t};var g=!1,T=!1;this.showElement=function(t){if(this.isHidden(p[t])){var a=p[t].getAttribute(v.dataCharacterAnimate);if(n)if(p[t].getAttribute(v.dataAnimaticOutDelay)){var i=1e3*parseFloat(p[t].getAttribute(v.dataAnimaticOutDelay));T&&(clearTimeout(T),T=!1),g=setTimeout((function(){a?(p[t].style.cssText=u+c[t]+f,this.hasClass(p[t],m[t])||(p[t].className+=m[t])):p[t].style.cssText=r[t]+c[t],p[t].style.visibility="visible"}),i)}else a?(p[t].style.cssText=u+c[t]+f,this.hasClass(p[t],m[t])||(p[t].className+=m[t])):p[t].style.cssText=u+r[t]+c[t],p[t].style.visibility="visible";else if(p[t].getAttribute(v.dataAnimaticInDelay)){var e=1e3*parseFloat(p[t].getAttribute(v.dataAnimaticInDelay));g&&(clearTimeout(g),g=!1),T=setTimeout((function(){a?(p[t].style.cssText=u+c[t]+f,this.hasClass(p[t],l[t])||(p[t].className+=l[t])):p[t].style.cssText=o[t]+c[t],p[t].style.visibility="visible"}),e)}else a?(p[t].style.cssText=u+c[t]+f,this.hasClass(p[t],l[t])||(p[t].className+=l[t])):p[t].style.cssText=u+o[t]+c[t],p[t].style.visibility="visible"}},this.resetWindow=function(){if(b)for(var t=0;t<b;t++)p[t].style.cssText=c[t]},this.clearStyle=function(t){var a=p[t].getAttribute(v.dataCharacterAnimate);p[t].style.cssText=d,a&&(p[t].className="animatic "+s[t])},this.getScroll=function(){if(null!=window.pageYOffset)return pageYOffset;var t=document,a=t.documentElement,i=t.body;return a.scrollLeft||i.scrollLeft,a.scrollTop||i.scrollTop||0},this.offsetTop=function(t){for(var a;void 0===t.offsetTop;)t=t.parentNode;for(a=t.offsetTop;t=t.offsetParent;)a+=t.offsetTop;return a};var O=function(){var t=this,a=t.getAttribute(v.dataAnimaticTargetClick);null==a&&(a=t.getAttribute(v.dataAnimaticTargetMouseOver)),null==a&&(a=t.getAttribute(v.dataAnimaticTargetMouseOut));var i=document.querySelector("["+v.dataAnimaticSelector+"="+a+"]"),e=t.getAttribute(v.dataAnimaticAnimation),n=i.getAttribute("style");if(i.removeAttribute("style"),n||(n=""),null===i.getAttribute(v.dataAnimaticIndex)){var s=parseInt(Object.size(c))+1;i.setAttribute(v.dataAnimaticIndex,s),c[s]=n,i.addEventListener("webkitAnimationEnd",cssAnimtionEnd,!1),i.addEventListener("animationend",cssAnimtionEnd,!1),i.addEventListener("oanimationend",cssAnimtionEnd,!1)}setTimeout((function(){i.style.cssText=n+h+" animation-name: "+e+";"}),0)};Object.size=function(t){var a,i=0;for(a in t)t.hasOwnProperty(a)&&i++;return i},this.cssAnimtionEnd=function(){var t=this,a=parseInt(t.getAttribute(v.dataAnimaticIndex));t.removeAttribute("style"),a&&""!==c[a]&&(t.style.cssText=c[a])},this.cssAnimationClick=function(){var t=this,a=t.getAttribute(v.dataClickElm).trim();t.removeAttribute("style"),setTimeout((function(){t.style.cssText=h+" animation-name: "+a+";"}),0)},this.cssAnimationMouseOver=function(){var t=this,a=t.getAttribute(v.dataMouseoverElm).trim();t.removeAttribute("style"),setTimeout((function(){t.style.cssText=h+" animation-name: "+a+";"}),0)},this.cssAnimationMouseOut=function(){var t=this,a=t.getAttribute(v.dataMouseoutElm).trim();t.removeAttribute("style"),setTimeout((function(){t.style.cssText=h+" animation-name: "+a+";"}),0)}}()}));
//# sourceMappingURL=animatic.min.js.map