animere
Version:
CSS-driven scroll-based animations
2 lines (1 loc) • 1.55 kB
JavaScript
var Animere=function(a){"use strict";var v;const m=!("onscroll"in window)||/(?:gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),u=window.matchMedia("(prefers-reduced-motion: reduce)").matches;function f(e,i,n=""){return new Promise(t=>{const s=[`${n}animated`,`${n}${i}`];e.classList.add(...s),e.addEventListener("animationend",()=>{e.classList.remove(...s),t()},{once:!0})})}function p(e){return e.replace(/-([a-z])/g,(i,n)=>n.toUpperCase())}function w(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function b({prefix:e="animere",offset:i,shouldInitialize:n}={}){const t=w(e);if((n==null?void 0:n())??(!u&&!m))for(const s of document.querySelectorAll(`[data-${t}]:not([data-${t}-skip])`))g(s,{prefix:t,offset:i})}function g(e,{prefix:i="animere",offset:n=.2}){const t=p(i);e.style.visibility="hidden";const s=async([c],y)=>{if(!(c!=null&&c.isIntersecting))return;const r=c.target;Object.keys(r.dataset).filter(o=>o!==t&&o.startsWith(t)).forEach(o=>{const d=o.slice(t.length).toLowerCase(),l=`--animate-${d}`;d==="delay"&&(r.style.animationDelay=`var(${l})`),d==="repeat"&&(r.style.animationIterationCount=`var(${l})`),r.style.setProperty(l,r.dataset[o])}),r.style.visibility="visible",y.unobserve(r),await f(r,r.dataset[t],"animate__"),r.dataset[`${t}Finished`]="true"};new IntersectionObserver(s,{threshold:n}).observe(e)}return(v=document.currentScript)!=null&&v.hasAttribute("init")&&b(),a.animate=f,a.createAnimere=b,a.isCrawler=m,a.prefersReducedMotion=u,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),a}({});