UNPKG

taos

Version:

TAOS - Tailwind CSS Animation on Scroll Library

2 lines (1 loc) 1.49 kB
(function(){"use strict";(function(){const w=(t,s)=>{let e=null;return()=>{clearTimeout(e),e=setTimeout(t,s)}},c=(t,s)=>{let e=!1;return()=>{e||(t(),e=!0,setTimeout(()=>e=!1,s))}};let i=[],u=window.innerWidth,o=window.scrollY;const n=t=>t.getAttribute("class")||"",r=(t,s)=>{t.setAttribute("class",s)},b=t=>{const s=n(t);s.includes("taos-animate")||(t.style.transitionDuration="",t.style.transitionDelay="",r(t,s+" taos-animate"))},l=t=>{const s=n(t);r(t,s.split(" taos-animate").join(""))},d=({element:t,offset:s})=>t.getBoundingClientRect().top-window.innerHeight+s+o,f=c(()=>{i.forEach(t=>t.trigger=d(t))},250),h=()=>{o=window.scrollY,i.forEach(({element:t,trigger:s,once:e,offset:y})=>{const E=n(t);s||(s=d({element:t,offset:y})),s<o?b(t):!e&&E.includes("taos-animate")&&l(t)}),f()},a=()=>{i=[],document.querySelectorAll('[class*="taos"]').forEach(g),f(),requestAnimationFrame(h)},m=()=>{u!==window.innerWidth&&(u=window.innerWidth,a())},g=t=>{const s=n(t);i.some(e=>e.element===t)||s.includes("taos:")&&(s.includes("taos-init")||r(t,s+" taos-init"),t.style.transitionDuration="0ms",t.style.transitionDelay="0ms",l(t),i.push({element:t,once:getComputedStyle(t)["animation-iteration-count"]==="1",offset:parseInt(t.dataset.taosOffset||0)}))};a(),addEventListener("scroll",c(h,32)),addEventListener("orientationchange",a),addEventListener("resize",w(m,250)),new MutationObserver(t=>{t.forEach(({target:s})=>{g(s)})}).observe(document,{attributes:!0,childList:!0,subtree:!0})})()})();