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