jos-animation/dist/jos.min.js

An animation library package to instantly add beautiful/professional looking animation to your website

!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,s){void 0===s&&(s={});var e=s.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}(".jos,.jos-anchor{transition:.4s ease-in-out}.jos-anchor{opacity:0}.jos-static{opacity:1;transform:translate(0)}.jos-no-transition{transition-duration:0s;transition-timing-function:linear}.jos-hidden{display:none}.jos-visible{display:block;opacity:1}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{opacity:0;transform:perspective(2500px) rotateY(-100deg)}.jos-flip-left{opacity:0;transform:perspective(2500px) rotateY(100deg)}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-1turn) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(1turn) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}.jos-skew{opacity:0;transform:skew(20deg,20deg)}.jos-skew-right{opacity:0;transform:skew(20deg,20deg) translate3d(-100px,0,-100px)}.jos-skew-left{opacity:0;transform:skew(20deg,20deg) translate3d(100px,0,-100px)}.jos-skew-down{opacity:0;transform:skew(20deg,20deg) translate3d(0,-100px,0)}.jos-skew-up{opacity:0;transform:skew(20deg,20deg) translate3d(0,100px,0)}.jos-slant{transform:skew(25deg,25deg)}.jos-slant-right{transform:skew(25deg,0deg)}.jos-slant-left{transform:skew(0deg,25deg)}.jos-bar,.jos-bar_vertical{transform:perspective(2500px) rotateY(-100deg)}.jos-bar_horizontal{transform:perspective(2500px) rotateX(-100deg)}.jos-grey{filter:grayscale(100%)}.jos-blur{filter:blur(7px)}.jos-backdrop{backdrop-filter:blur(7px);opacity:.8}.jos-invert{filter:invert(100%)}.jos-sepia{filter:sepia(100%)}.jos-saturate{filter:saturate(100%)}.jos-hue-rotate{filter:hue-rotate(90deg)}.jos-brightness{filter:brightness(.5)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}");const JOS=new class{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;setRange=new Set;debug=!1;scrollProgressDisable=void 0;disable=!1;static version="0.9.2 (Minified)";static author="Jesvi Jonathan";static webpage="https://jos-animation.vercel.app";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){}debugger(t=0){if(0===t&&this.debugMode){this.version();let t={};for(let s of Object.keys(this))"function"!=typeof this[s]&&(t[s]=this[s])}}callbackRouter_anchor=(t,s)=>{if(this.disable)return;let e=t[0],a=e.target;document.querySelectorAll("[data-jos_anchor='#"+a.id+"']").forEach((t=>{let a=t.dataset.jos_animation,o=t.dataset.jos_animationinverse;if(e.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}a&&(t.classList.remove("jos-"+a),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),(null!=t.dataset.jos_once||"false"!=t.dataset.jos_once)&&("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=o&&t.classList.add("jos-"+o))}else(void 0===t.dataset.jos_scrolldirection||"down"===t.dataset.jos_scrolldirection||"none"===t.dataset.jos_scrolldirection)&&(t.classList.add("jos-"+a),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};rand=t=>Array.isArray(t)?t[Math.floor(Math.random()*t.length)]:"number"==typeof t?t%1!=0?Math.random()*t:Math.floor(Math.random()*t):Math.random();callbackScroller=t=>{if(this.disable||this.scrollProgressDisable)return;let s=this.default_rootMargin,e=window.innerHeight,a=t=>{let a=t.dataset.jos_rootmargin||s,o=a.split(" ").map(parseFloat),i=e*o[0]/100,r=e*o[2]/100;t.jos={rootMargin:a,rootMarginValues:o,topMargin:i,bottomMargin:r};let n=t.getBoundingClientRect(),l=n.top-t.jos.topMargin,d=n.bottom-t.jos.bottomMargin,c=n.top/e,u=l/(e-t.jos.topMargin-t.jos.bottomMargin),f=0;f=u<=0?0:u>=100?1:u,t.jos={elementRect:n,elementTop:l,elementBottom:d,windowScrollProgress:c,rootScrollProgress:u,scrollProgress:f},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{this.disable||this.scrollProgressDisable||t.forEach(a)}};callbackRouter=(t,s,e=1)=>{if(this.disable)return;let a=t[0],o=a.target,i=o.dataset.jos_animation,r=o.dataset.jos_animationinverse,n=1;if(n=a.boundingClientRect.top<0?0:1,a.isIntersecting){if("false"!=o.dataset.jos_scroll&&null!=o.dataset.jos_scroll&&(this.scrollEnter.push(o),this.callbackScroller(this.scrollEnter)),null!=o.dataset.jos_counter){let t=parseInt(o.dataset.jos_counter);t++,o.dataset.jos_counter=t}"false"==o.dataset.jos_mirror&&o.classList.remove("jos-no-mirror"),i&&(o.classList.remove("jos-"+i),null!=o.dataset.jos_invoke&&window[o.dataset.jos_invoke](o),(null!=o.dataset.jos_once||"false"!=o.dataset.jos_once)&&("true"==o.dataset.jos_once||o.dataset.jos_counter>=o.dataset.jos_once)&&s.unobserve(o)),null!=r&&o.classList.add("jos-"+r)}else(void 0===o.dataset.jos_scrolldirection||1===n&&"down"===o.dataset.jos_scrolldirection||0===n&&"up"===o.dataset.jos_scrolldirection||"none"===o.dataset.jos_scrolldirection)&&(o.classList.toggle("jos-no-mirror","false"==o.dataset.jos_mirror),o.classList.add("jos-"+i),null!=r&&o.classList.remove("jos-"+r),void 0!==o.dataset.jos_invoke_out&&window[o.dataset.jos_invoke_out](o)),"false"!=o.dataset.jos_scroll&&null!=o.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==o.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[],s=e=>{let a=e.dataset.jos_once||this.default_once,o=e.dataset.jos_animation||this.default_animation,i=e.dataset.jos_animationinverse||this.default_animationinverse,r=e.dataset.jos_timingFunction||this.default_timingFunction,n=e.dataset.jos_duration||this.default_duration,l=e.dataset.jos_delay||this.default_delay,d=e.dataset.jos_mirror||this.default_mirror;if(e.classList.contains("jos_disabled")&&(e.classList.remove("jos_disabled"),e.classList.add("jos")),a&&("true"==a||/^\d+$/.test(a))?e.setAttribute("data-jos_once",a):e.setAttribute("data-jos_once",this.default_once?"1":"false"),e.dataset.jos_stagger){let a=this.default_delay,o=this.default_duration,i=this.once,r=this.mirror,n=this.scrolldirection,l=this.rootMargin,d=this.animationinverse;if(e.id||(e.id=Math.random().toString(36).substring(7)),Array.from(e.children).forEach(((c,u)=>{if(!c.classList.contains("jos")){c.classList.add("jos"),c.id||(c.id=`${e.id}_${u}`);let f=e.dataset.jos_stagger,j=e.dataset.jos_stagger_delay||a,_=e.dataset.jos_stagger_seq||0,h=e.dataset.jos_stagger_duration||o,m=e.dataset.jos_stagger_once||i,p=e.dataset.jos_staggerinverse||d,g=e.dataset.jos_stagger_mirror||r,b=e.dataset.jos_stagger_startVisible,v=e.dataset.jos_stagger_scrolldirection||n,y=e.dataset.jos_stagger_rootmargin||l;if(e.dataset.jos_stagger_anchor||c.dataset.jos_anchor){let t="true"===e.dataset.jos_stagger_anchor?"#"+e.id:e.dataset.jos_stagger_anchor;c.setAttribute("data-jos_anchor",t)}c.setAttribute("data-jos_animation",f),p&&c.setAttribute("data-jos_animationinverse",p),c.setAttribute("data-jos_duration",h);let x=parseFloat(_*u+j);c.setAttribute("data-jos_delay",x),c.setAttribute("data-jos_once",m),"false"===g&&c.setAttribute("data-jos_mirror","false"),b&&t.push(c),v&&c.setAttribute("data-jos_scrolldirection",v),y&&c.setAttribute("data-jos_rootmargin",y),e.dataset.jos_stagger_scroll&&c.setAttribute("data-jos_scroll",e.dataset.jos_stagger_scroll),e.dataset.jos_stagger_timingFunction&&c.setAttribute("data-jos_timingFunction",e.dataset.jos_stagger_timingFunction),e.dataset.jos_stagger_invoke&&c.setAttribute("data-jos_invoke",e.dataset.jos_stagger_invoke),e.dataset.jos_stagger_invoke_out&&c.setAttribute("data-jos_invoke_out",e.dataset.jos_stagger_invoke_out),this.boxes=[...this.boxes,c],s(c)}})),!e.dataset.jos_animation)return void e.classList.remove("jos")}e.setAttribute("data-jos_animation",o),i&&e.setAttribute("data-jos_animationinverse",i),r&&e.setAttribute("data-jos_timingFunction",r),"false"==d&&e.setAttribute("data-jos_mirror",d),n&&(e.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),l&&(e.setAttribute("data-jos_delay",l),this.setRange.add(parseFloat(l))),e.setAttribute("data-jos_counter","0"),e.classList.add("jos-"+o),(e.dataset.jos_startvisible||this.default_startVisible)&&t.push(e),this.default_scrolldirection&&e.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let c=[e.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],e.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],e.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],e.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),u={rootMargin:c,threshold:e.dataset.jos_threshold||this.default_threshold,passive:e.dataset.jos_passive||this.default_passive};if(e.dataset.jos_anchor){let t=new IntersectionObserver(this.callbackRouter_anchor,u);this.observers.push(t),t.observe(document.getElementById(e.dataset.jos_anchor.substring(1)))}else{let t=new IntersectionObserver(this.callbackRouter,u);this.observers.push(t),t.observe(e)}};this.boxes.forEach((t=>{s(t)})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){let t=document.createElement("style");document.head.appendChild(t);let s=t.sheet;s.insertRule(".jos-no-mirror {    transition: 0s forwards !important;}");let e="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";for(let t of(s.insertRule(".jos {transition: "+e+";}"),this.setRange))s.insertRule(`[data-jos_duration="${t}"] {\n    transition-duration: ${t}s !important;\n  }`),s.insertRule(`[data-jos_delay="${t}"] {\n    transition-delay: ${t}s !important;\n  }`);this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:e,animationinverse:a,timingFunction:o,threshold:i,startVisible:r,scrolldirection:n,intersectionRatio:l,duration:d,mirror:c,delay:u,debugMode:f,disable:j,scrollProgressDisable:_,rootMargin:h,rootMarginTop:m,rootMarginBottom:p}=t;this.default_once=s||this.default_once,this.default_animation=e||this.default_animation,this.default_animationinverse=a||this.default_animationinverse,this.default_timingFunction=o||this.default_timingFunction,this.default_threshold=i||this.default_threshold,this.default_startVisible=r||this.default_startVisible,this.default_scrolldirection=n||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=u||this.default_delay,this.debugMode=f||this.debugMode,null!=j&&(this.disable=j),this.scrollProgressDisable=_||this.scrollProgressDisable,this.default_rootMargin=h||`${m||"-10%"} 0% ${p||"-40%"} 0%`,this.default_mirror=c||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.disable||(this.getBoxes(),this.debugMode&&this.debugger(),this.start(),this.getStylesheet())}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){for(let s in this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0,this)this.hasOwnProperty(s)&&"function"!=typeof this[s]&&(this[s]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}};"undefined"!=typeof module&&void 0!==module.exports?module.exports=JOS:"function"==typeof define&&define.amd?define([],(function(){return JOS})):window.JOS=JOS}));