jos-animation/dev/jos.min.js

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

class jos{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(){console.log(`JOS: Javascript On Scroll Animation Library
    - Version: ${jos.version}
    - Author: ${jos.author}
    - Webpage: ${jos.webpage}
    - Github: ${jos.github}
`)}debugger(t=0){if(0===t&&this.debugMode){this.version();let s={};for(let e of Object.keys(this))"function"!=typeof this[e]&&(s[e]=this[e]);console.log(`JOS Values:
`,s),console.log("JOS Initialized:\n\n")}}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,i=1;if(e.isIntersecting){if(void 0!=t.dataset.jos_counter){let r=parseInt(t.dataset.jos_counter);r++,t.dataset.jos_counter=r}a&&(t.classList.remove("jos-"+a),void 0!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),(void 0!=t.dataset.jos_once||"false"!=t.dataset.jos_once)&&("true"==t.dataset.jos_once?s.unobserve(t):t.dataset.jos_counter>=t.dataset.jos_once&&s.unobserve(t)),void 0!=o&&t.classList.add("jos-"+o))}else(void 0===t.dataset.jos_scrolldirection||1===i&&"down"===t.dataset.jos_scrolldirection||0===i&&"up"===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(),d=n.top-t.jos.topMargin,l=n.bottom-t.jos.bottomMargin,u=n.top/e,h=d/(e-t.jos.topMargin-t.jos.bottomMargin),c=0;c=h<=0?0:h>=100?1:h,t.jos={elementRect:n,elementTop:d,elementBottom:l,windowScrollProgress:u,rootScrollProgress:h,scrollProgress:c},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&&void 0!=o.dataset.jos_scroll&&(this.scrollEnter.push(o),this.callbackScroller(this.scrollEnter)),void 0!=o.dataset.jos_counter){let d=parseInt(o.dataset.jos_counter);d++,o.dataset.jos_counter=d}"false"==o.dataset.jos_mirror&&o.classList.remove("jos-no-mirror"),i&&(o.classList.remove("jos-"+i),void 0!=o.dataset.jos_invoke&&window[o.dataset.jos_invoke](o),(void 0!=o.dataset.jos_once||"false"!=o.dataset.jos_once)&&("true"==o.dataset.jos_once?s.unobserve(o):o.dataset.jos_counter>=o.dataset.jos_once&&s.unobserve(o))),void 0!=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),void 0!=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&&void 0!=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,d=e.dataset.jos_delay||this.default_delay,l=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 u=this.default_delay,h=this.default_duration,c=this.once,j=this.mirror,g=this.scrolldirection,f=this.rootMargin,b=this.animationinverse;if(e.id||(e.id=Math.random().toString(36).substring(7)),Array.from(e.children).forEach((a,o)=>{if(!a.classList.contains("jos")){a.classList.add("jos"),a.id||(a.id=`${e.id}_${o}`);let i=e.dataset.jos_stagger,r=e.dataset.jos_stagger_delay||u,n=e.dataset.jos_stagger_seq||0,d=e.dataset.jos_stagger_duration||h,l=e.dataset.jos_stagger_once||c,m=e.dataset.jos_staggerinverse||b,v=e.dataset.jos_stagger_mirror||j,$=e.dataset.jos_stagger_startVisible,p=e.dataset.jos_stagger_scrolldirection||g,y=e.dataset.jos_stagger_rootmargin||f;if(e.dataset.jos_stagger_anchor||a.dataset.jos_anchor){let _="true"===e.dataset.jos_stagger_anchor?"#"+e.id:e.dataset.jos_stagger_anchor;a.setAttribute("data-jos_anchor",_)}a.setAttribute("data-jos_animation",i),m&&a.setAttribute("data-jos_animationinverse",m),a.setAttribute("data-jos_duration",d);let A=parseFloat(n*o+r);a.setAttribute("data-jos_delay",A),a.setAttribute("data-jos_once",l),"false"===v&&a.setAttribute("data-jos_mirror","false"),$&&t.push(a),p&&a.setAttribute("data-jos_scrolldirection",p),y&&a.setAttribute("data-jos_rootmargin",y),e.dataset.jos_stagger_scroll&&a.setAttribute("data-jos_scroll",e.dataset.jos_stagger_scroll),e.dataset.jos_stagger_timingFunction&&a.setAttribute("data-jos_timingFunction",e.dataset.jos_stagger_timingFunction),e.dataset.jos_stagger_invoke&&a.setAttribute("data-jos_invoke",e.dataset.jos_stagger_invoke),e.dataset.jos_stagger_invoke_out&&a.setAttribute("data-jos_invoke_out",e.dataset.jos_stagger_invoke_out),this.boxes=[...this.boxes,a],s(a)}}),!e.dataset.jos_animation){e.classList.remove("jos");return}}e.setAttribute("data-jos_animation",o),i&&e.setAttribute("data-jos_animationinverse",i),r&&e.setAttribute("data-jos_timingFunction",r),"false"==l&&e.setAttribute("data-jos_mirror",l),n&&(e.setAttribute("data-jos_duration",n),this.setRange.add(parseFloat(n))),d&&(e.setAttribute("data-jos_delay",d),this.setRange.add(parseFloat(d))),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 m=[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=>{let s=t.startsWith("-");return s?t.substring(1):`-${t}`}).join(" "),v={rootMargin:m,threshold:e.dataset.jos_threshold||this.default_threshold,passive:e.dataset.jos_passive||this.default_passive};if(e.dataset.jos_anchor){let $=new IntersectionObserver(this.callbackRouter_anchor,v);this.observers.push($),$.observe(document.getElementById(e.dataset.jos_anchor.substring(1)))}else{let p=new IntersectionObserver(this.callbackRouter,v);this.observers.push(p),p.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 a of(s.insertRule(".jos {transition: "+e+";}"),this.setRange))s.insertRule(`[data-jos_duration="${a}"] {
    transition-duration: ${a}s !important;
  }`),s.insertRule(`[data-jos_delay="${a}"] {
    transition-delay: ${a}s !important;
  }`);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:d,duration:l,mirror:u,delay:h,debugMode:c,disable:j,scrollProgressDisable:g,rootMargin:f,rootMarginTop:b,rootMarginBottom:m}=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=d||this.default_threshold,this.default_duration=l||this.default_duration,this.default_delay=h||this.default_delay,this.debugMode=c||this.debugMode,void 0!=j&&(this.disable=j),this.scrollProgressDisable=g||this.scrollProgressDisable,this.default_rootMargin=f||`${b||"-10%"} 0% ${m||"-40%"} 0%`,this.default_mirror=u||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"}}const JOS=new jos;"undefined"!=typeof module&&void 0!==module.exports?module.exports=JOS:"function"==typeof define&&define.amd?define([],function(){return JOS}):window.JOS=JOS;