animex
Version:
Modern animation-on-scroll library with optional GSAP support
3 lines (2 loc) • 2.19 kB
JavaScript
var f=Object.defineProperty;var u=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var l=(s,t,e)=>t in s?f(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e,a=(s,t)=>{for(var e in t||(t={}))h.call(t,e)&&l(s,e,t[e]);if(u)for(var e of u(t))g.call(t,e)&&l(s,e,t[e]);return s};var o=class{constructor(t={}){this.defaults={offset:120,duration:800,easing:"ease",once:!1,delay:0,debug:!1,useGSAP:!1},this.settings=a(a({},this.defaults),t),this.observer=null,this.init()}init(){this.setupObserver(),this.observeElements()}setupObserver(){this.observer=new IntersectionObserver(t=>t.forEach(e=>this.handleIntersection(e)),{rootMargin:`0px 0px -${this.settings.offset}px 0px`,threshold:.1})}handleIntersection(t){let e=t.target,d=parseInt(e.getAttribute("animex-delay")||0)+(e._animexIndex||0);t.isIntersecting?setTimeout(()=>{this.settings.useGSAP&&typeof window!="undefined"&&window.gsap?gsap.to(e,{opacity:1,y:0,x:0,scale:1,rotateX:0,duration:parseFloat(e.getAttribute("animex-duration")||this.settings.duration)/1e3,ease:e.getAttribute("animex-easing")||this.settings.easing,delay:d/1e3}):e.classList.add("animex-animate"),this.settings.once&&this.observer.unobserve(e)},d):this.settings.once||e.classList.remove("animex-animate")}observeElements(){let t=0;document.querySelectorAll("[animex]").forEach(e=>{e.style.setProperty("--animex-duration",`${e.getAttribute("animex-duration")||this.settings.duration}ms`),e.style.setProperty("--animex-easing",e.getAttribute("animex-easing")||this.settings.easing),e._animexIndex=this.settings.delay*t++,this.settings.debug&&(e.style.outline="1px dashed #3a8dde",e.style.outlineOffset="-2px"),this.observer.observe(e)})}refresh(){this.observer.disconnect(),this.init()}},n;function i(s={}){return n=new o(s),n}function r(){n&&n.refresh()}typeof window!="undefined"&&(window.AnimeX={init:i,refresh:r},document.addEventListener("DOMContentLoaded",()=>{i()}));typeof window!="undefined"&&(window.AnimeX={init:i,refresh:r},document.addEventListener("DOMContentLoaded",()=>{i()}));var m={init:i,refresh:r};export{m as default,i as init,r as refresh};
//# sourceMappingURL=animex.min.js.map