use-scroll-animate 3.8.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +47 -0
- package/README.md +17 -14
- package/README_ja.md +11 -11
- package/README_zh.md +12 -12
- package/dist/chunks/{base-BpROOcey.js → base-ZARFccur.js} +2 -2
- package/dist/chunks/{base-BpROOcey.js.map → base-ZARFccur.js.map} +1 -1
- package/dist/chunks/core-Co-6AL0h.js +218 -0
- package/dist/chunks/core-Co-6AL0h.js.map +1 -0
- package/dist/chunks/{core-uxs3ETou.js → core-DKY-fVzR.js} +2 -2
- package/dist/chunks/{core-uxs3ETou.js.map → core-DKY-fVzR.js.map} +1 -1
- package/dist/chunks/core-DXqZm5Il.cjs +222 -0
- package/dist/chunks/core-DXqZm5Il.cjs.map +1 -0
- package/dist/chunks/{index-tags-BANJ-e4H.js → index-tags-43Xtd01A.js} +3 -2
- package/dist/chunks/index-tags-43Xtd01A.js.map +1 -0
- package/dist/chunks/{index-tags-wbuPiMR6.cjs → index-tags-BQh_uGqH.cjs} +3 -2
- package/dist/chunks/index-tags-BQh_uGqH.cjs.map +1 -0
- package/dist/chunks/{spring-C-fw7_9f.js → spring-E2ickYNI.js} +2 -2
- package/dist/chunks/{spring-C-fw7_9f.js.map → spring-E2ickYNI.js.map} +1 -1
- package/dist/chunks/{variants-CHe1VbSn.js → variants-DvnxvRCM.js} +2 -2
- package/dist/chunks/{variants-CHe1VbSn.js.map → variants-DvnxvRCM.js.map} +1 -1
- package/dist/components/angular.cjs +3 -1
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +29 -17
- package/dist/components/angular.d.ts +29 -17
- package/dist/components/angular.js +7 -5
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.js +3 -3
- package/dist/components/cards.js +3 -3
- package/dist/components/click.js +3 -3
- package/dist/components/depth.js +4 -4
- package/dist/components/feedback.js +2 -2
- package/dist/components/gesture.js +5 -5
- package/dist/components/interaction.js +2 -2
- package/dist/components/jsx.d.cts +2 -1
- package/dist/components/jsx.d.ts +2 -1
- package/dist/components/layout.js +2 -2
- package/dist/components/lazy.cjs +2 -1
- package/dist/components/lazy.cjs.map +1 -1
- package/dist/components/lazy.d.cts +2 -1
- package/dist/components/lazy.d.ts +2 -1
- package/dist/components/lazy.js +2 -1
- package/dist/components/lazy.js.map +1 -1
- package/dist/components/packs.cjs +194 -0
- package/dist/components/packs.cjs.map +1 -0
- package/dist/components/packs.css +3 -0
- package/dist/components/packs.d.cts +107 -0
- package/dist/components/packs.d.ts +107 -0
- package/dist/components/packs.js +185 -0
- package/dist/components/packs.js.map +1 -0
- package/dist/components/page.js +3 -3
- package/dist/components/physics.js +4 -4
- package/dist/components/react.cjs +2 -2
- package/dist/components/react.cjs.map +1 -1
- package/dist/components/react.d.cts +1 -1
- package/dist/components/react.d.ts +1 -1
- package/dist/components/react.js +2 -2
- package/dist/components/react.js.map +1 -1
- package/dist/components/reveal.js +2 -2
- package/dist/components/solid.cjs +3 -1
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +29 -17
- package/dist/components/solid.d.ts +29 -17
- package/dist/components/solid.js +7 -5
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +3 -1
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +29 -17
- package/dist/components/svelte.d.ts +29 -17
- package/dist/components/svelte.js +7 -5
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.js +2 -2
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.cjs +6 -219
- package/dist/components/timeline.cjs.map +1 -1
- package/dist/components/timeline.js +5 -217
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/transitions.cjs +7 -120
- package/dist/components/transitions.cjs.map +1 -1
- package/dist/components/transitions.css +0 -1
- package/dist/components/transitions.d.cts +5 -32
- package/dist/components/transitions.d.ts +5 -32
- package/dist/components/transitions.js +10 -121
- package/dist/components/transitions.js.map +1 -1
- package/dist/components/ui.js +5 -5
- package/dist/components/vue.cjs +3 -1
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +29 -17
- package/dist/components/vue.d.ts +29 -17
- package/dist/components/vue.js +7 -5
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.js +2 -2
- package/dist/components.cjs +18 -10
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.d.cts +67 -33
- package/dist/components.d.ts +67 -33
- package/dist/components.js +14 -10
- package/dist/components.js.map +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +5 -102
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +72 -30
- package/dist/index.d.ts +72 -30
- package/dist/index.js +4 -103
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/docs/API.md +6 -6
- package/docs/ROADMAP.md +14 -0
- package/docs/components.md +16 -4
- package/docs/migration-from-aos.md +1 -1
- package/docs/migration-from-gsap-scrolltrigger.md +6 -6
- package/docs/upgrading-4.md +65 -0
- package/package.json +13 -2
- package/dist/chunks/index-tags-BANJ-e4H.js.map +0 -1
- package/dist/chunks/index-tags-wbuPiMR6.cjs.map +0 -1
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ScrollAnimate={})}(this,function(e){"use strict";const t={"fade-in":{from:{opacity:0},to:{opacity:1}},"fade-in-up":{from:{opacity:0,transform:"translateY(40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-down":{from:{opacity:0,transform:"translateY(-40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-left":{from:{opacity:0,transform:"translateX(-40px)"},to:{opacity:1,transform:"translateX(0px)"}},"fade-in-right":{from:{opacity:0,transform:"translateX(40px)"},to:{opacity:1,transform:"translateX(0px)"}},"zoom-in":{from:{opacity:0,transform:"scale(0.8)"},to:{opacity:1,transform:"scale(1)"}},"zoom-out":{from:{opacity:0,transform:"scale(1.2)"},to:{opacity:1,transform:"scale(1)"}},"flip-x":{from:{opacity:0,transform:"rotateX(-90deg)"},to:{opacity:1,transform:"rotateX(0deg)"}},"flip-y":{from:{opacity:0,transform:"rotateY(-90deg)"},to:{opacity:1,transform:"rotateY(0deg)"}},"slide-up":{from:{transform:"translateY(100%)"},to:{transform:"translateY(0px)"}},"slide-down":{from:{transform:"translateY(-100%)"},to:{transform:"translateY(0px)"}},"slide-left":{from:{transform:"translateX(-100%)"},to:{transform:"translateX(0px)"}},"slide-right":{from:{transform:"translateX(100%)"},to:{transform:"translateX(0px)"}},bounce:{from:{opacity:0,transform:"translateY(-60px)"},to:{opacity:1,transform:"translateY(0px)"}},"rotate-in":{from:{opacity:0,transform:"rotate(-180deg) scale(0.5)"},to:{opacity:1,transform:"rotate(0deg) scale(1)"}},"blur-in":{from:{opacity:0,filter:"blur(12px)"},to:{opacity:1,filter:"blur(0px)"}},"skew-in":{from:{opacity:0,transform:"skewX(20deg) translateX(30px)"},to:{opacity:1,transform:"skewX(0deg) translateX(0px)"}},"scale-x":{from:{transform:"scaleX(0)"},to:{transform:"scaleX(1)"}},"scale-y":{from:{transform:"scaleY(0)"},to:{transform:"scaleY(1)"}},shimmer:{from:{opacity:.5,filter:"brightness(1)"},to:{opacity:1,filter:"brightness(1.5)"}},pulse:{from:{transform:"scale(1)"},to:{transform:"scale(1.05)"}},swing:{from:{transform:"rotate(-10deg)"},to:{transform:"rotate(10deg)"}},"scale-up":{from:{opacity:0,transform:"scale(0.5)"},to:{opacity:1,transform:"scale(1)"}},"blur-in-up":{from:{opacity:0,filter:"blur(12px)",transform:"translateY(40px)"},to:{opacity:1,filter:"blur(0px)",transform:"translateY(0px)"}},"flip-up":{from:{opacity:0,transform:"perspective(800px) rotateX(60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"flip-down":{from:{opacity:0,transform:"perspective(800px) rotateX(-60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"rotate-left":{from:{opacity:0,transform:"rotate(-15deg) translateX(-40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"rotate-right":{from:{opacity:0,transform:"rotate(15deg) translateX(40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"clip-up":{from:{clipPath:"inset(100% 0% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-down":{from:{clipPath:"inset(0% 0% 100% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-left":{from:{clipPath:"inset(0% 0% 0% 100%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-right":{from:{clipPath:"inset(0% 100% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-circle":{from:{clipPath:"circle(0% at 50% 50%)"},to:{clipPath:"circle(75% at 50% 50%)"}}};function r(e){if("string"==typeof e)return t[e.trim()]??t["fade-in-up"];if(Array.isArray(e)){const r={from:{},to:{}};return e.forEach(e=>{const o=t[e.trim()];o&&(Object.entries(o.from).forEach(([e,t])=>{"transform"===e&&r.from[e]?r.from[e]=`${r.from[e]} ${t}`:r.from[e]=t}),Object.entries(o.to).forEach(([e,t])=>{"transform"===e&&r.to[e]?r.to[e]=`${r.to[e]} ${t}`:r.to[e]=t}))}),r}return e}const o={linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)","soft-spring":"cubic-bezier(0.175, 0.885, 0.32, 1.275)","heavy-bounce":"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function n(e){return"string"==typeof e?o[e]??e:Array.isArray(e)?`cubic-bezier(${e.join(", ")})`:"function"==typeof e?"linear":"ease"}const a={defaultAnimation:"fade-in-up",defaultDuration:600,defaultDelay:0,defaultEasing:"ease",defaultThreshold:.1,defaultRootMargin:"0px",defaultRepeat:!1,defaultOnce:!0,defaultOffset:0,hiddenClass:"sa-hidden",visibleClass:"sa-visible",useClassNames:!1,disabled:!1,root:null,autoUnregister:!0,defaultEngine:"auto"},s=()=>{},i=()=>"undefined"!=typeof window&&"undefined"!=typeof document,c=()=>i()&&"undefined"!=typeof IntersectionObserver;let l,f;function d(){return!!i()&&(void 0===l&&(l="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!l&&l.matches)}function u(){return void 0===f&&(f=i()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),f}function p(e){if(void 0===e||""===e.trim())return;const t=parseFloat(e);return Number.isFinite(t)?t:void 0}const m=["entry 0%","entry 100%"];function g(e){const t=e.trim();return t?t.startsWith("--")?t:`--${t}`:"--sa-progress"}function h(e,t){return y(function(e){const t={},r=e("animation");r&&(t.animation=r.includes(",")?r.split(",").map(e=>e.trim()):r.trim()),t.duration=p(e("duration")),t.delay=p(e("delay"));const o=e("easing");if(o){const e=o.trim();if(e.startsWith("["))try{t.easing=JSON.parse(e)}catch{}else t.easing=e}const n=e("threshold");n&&(t.threshold=n.includes(",")?n.split(",").map(parseFloat).filter(Number.isFinite):p(n));const a=e("root-margin");a&&(t.rootMargin=a);const s=e("repeat");void 0!==s&&(t.repeat="false"!==s);const i=e("once");void 0!==i&&(t.once="false"!==i),t.offset=p(e("offset")),t.stagger=p(e("stagger"));const c=e("progress-var");void 0!==c&&(t.progressVar=g(c));const l=e("engine")?.trim();"auto"!==l&&"js"!==l&&"css"!==l||(t.engine=l);const f=e("view-range");if(f){const[e,r]=f.split(",").map(e=>e.trim());e&&r&&(t.viewRange=[e,r])}const d=e("exit");if(void 0!==d){const e=d.trim();t.exit=""===e||"true"===e||"false"!==e&&(e.includes(",")?e.split(",").map(e=>e.trim()):e)}const u=e("progress");return u&&(t.progressMode="scroll"===u.trim()?"scroll":"ratio"),Object.keys(t).forEach(e=>void 0===t[e]&&delete t[e]),t}(t=>{const r=e.getAttribute(`data-sa-${t}`);return null===r?void 0:r}),t)}function y(e,t){let r=e.engine??t.defaultEngine;"auto"===r&&(void 0!==e.duration||void 0!==e.delay||void 0!==e.offset||(e.stagger??0)>0)&&(r="js");const o=e.exit??!1,n=e.repeat??(!!o||t.defaultRepeat),a=e.threshold??t.defaultThreshold;return{animation:e.animation??t.defaultAnimation,duration:e.duration??t.defaultDuration,delay:e.delay??t.defaultDelay,easing:e.easing??t.defaultEasing,threshold:Array.isArray(a)&&0===a.length?t.defaultThreshold:a,rootMargin:e.rootMargin??t.defaultRootMargin,repeat:n,once:e.once??(!n&&t.defaultOnce),offset:e.offset??t.defaultOffset,stagger:e.stagger??0,onStart:e.onStart??s,onComplete:e.onComplete??s,onEnter:e.onEnter??s,onLeave:e.onLeave??s,onProgress:e.onProgress??s,progressMode:e.progressMode??"ratio",progressVar:e.progressVar?g(e.progressVar):"",engine:r,viewRange:e.viewRange??m,exit:o}}function v(e){return e&&i()?"string"==typeof e?Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.isArray(e)||e instanceof NodeList?Array.from(e).filter(e=>e instanceof Element):[]:[]}function b(e,t){if(!i())return 0;const r=e.getBoundingClientRect();let o=0,n=window.innerHeight||document.documentElement.clientHeight||0;if(t){const e=t.getBoundingClientRect();o=e.top,n=e.height}const a=n+r.height;if(a<=0)return 0;const s=(o+n-r.top)/a;return s<0?0:s>1?1:s}const x=new WeakMap,E=new WeakMap,w=new WeakMap;function S(e){const t=E.get(e);t&&(E.delete(e),t.cancel());const r=x.get(e);r&&(x.delete(e),r.onfinish=null,r.cancel());const o=w.get(e);void 0!==o&&(clearTimeout(o),w.delete(e))}function M(e,t){const r=e.style;r&&Object.keys(t).forEach(e=>{r[e]=String(t[e])})}const C=/(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)/gi;let O,A;function P(e,t){if("function"!=typeof t)return{keyframes:[e.from,e.to],easing:n(t)};const r=function(e){const t=[];for(let r=0;r<=30;r++){const o=e(r/30);t.push(Number.isFinite(o)?+o.toFixed(4):r/30)}return t}(t);if(void 0===O&&(O="undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timing-function","linear(0, 1)")),O)return{keyframes:[e.from,e.to],easing:`linear(${r.join(", ")})`};const o=Object.keys(e.from).filter(t=>t in e.to);return{keyframes:r.map((t,r)=>{const n={offset:r/30};return o.forEach(r=>{n[r]=function(e,t,r){if("number"==typeof e&&"number"==typeof t)return e+(t-e)*r;const o=String(e),n=String(t),a=[],s=[],i=o.replace(C,(e,t,r)=>(a.push([parseFloat(t),r]),"#"));if(i!==n.replace(C,(e,t,r)=>(s.push([parseFloat(t),r]),"#"))||a.length!==s.length)return r<.5?e:t;let c=0,l=!0;const f=i.replace(/#/g,()=>{const[e,t]=a[c],[o,n]=s[c++];t!==n&&0!==e&&0!==o&&t&&n&&(l=!1);const i=t||n;return`${+(e+(o-e)*r).toFixed(4)}${i}`});return l?f:r<.5?e:t}(e.from[r],e.to[r],t)}),n}),easing:"linear"}}function $(e,t){if(S(e),t.useClassNames)e.classList.remove(t.hiddenClass),e.classList.add(t.visibleClass);else{const t=e.style;t&&(t.opacity="")}}function X(e,t={}){$(e,{...a,...t})}function k(e){return!!e.disabled||d()}function F(e,t,o,n=0,a){const{duration:s,delay:i,stagger:c,onStart:l,onComplete:f}=t,d=Math.max(0,i+n*c);if(S(e),k(o))return $(e,o),l(e),void f(e);if(o.useClassNames)return d>0&&(e.style.animationDelay=`${d}ms`),e.classList.remove(o.hiddenClass),e.classList.add(o.visibleClass),l(e),a?.add(e),void w.set(e,setTimeout(()=>{w.delete(e),a?.delete(e),f(e)},s+d));const u=r(t.animation);if(!("opacity"in u.to)){const t=e.style;t&&"0"===t.opacity&&(t.opacity="")}if("function"!=typeof e.animate)return M(e,u.to),l(e),void f(e);const p=P(u,t.easing),m={duration:s,delay:d,easing:p.easing,fill:"both"};let g;try{g=e.animate(p.keyframes,m)}catch{g=e.animate(p.keyframes,{...m,easing:"ease"})}x.set(e,g),l(e),g.onfinish=()=>{if(x.get(e)===g){x.delete(e);try{g.commitStyles()}catch{M(e,u.to)}g.cancel()}f(e)}}function N(e,t){if(S(e),t.useClassNames)e.classList.add(t.hiddenClass),e.classList.remove(t.visibleClass);else{const t=e.style;t&&(t.opacity="0")}}function L(e,t={}){const r={...a,...t};k(r)||N(e,r)}function j(){if(!A){A=[];for(let e=0;e<=100;e++)A.push(e/100)}return A}const T={passive:!0};function Y(e={}){let t={...a,...e};const o=new Map;let n=new WeakSet;const l=new Set;let f=0,d=null;const p=new Set,m=new Set,g=new Set,C=new Map;function O(e,t,r){let o=C.get(e);o||C.set(e,o=new Map);let n=o.get(t);return n||o.set(t,n=r()),n}function A(e,r){const n=o.get(e);n&&(n.observer.unobserve(e),n.progressObserver?.unobserve(e),o.delete(e),V(e),"css"!==n.engine?r&&!n.animated&&$(e,t):r?(g.delete(e),$(e,t)):!1===e.isConnected&&g.delete(e))}function X(){o.forEach((e,t)=>{!1===t.isConnected&&A(t,!1)})}function L(e,t,r){const o=t.options;if(o.onProgress(e,r),o.progressVar){const t=e.style;t&&t.setProperty(o.progressVar,String(+r.toFixed(4)))}}function Y(){f=0,l.forEach(e=>{const r=o.get(e);r&&L(e,r,b(e,t.root))})}const I=()=>f||(f=requestAnimationFrame(Y));function R(e){if(e===!!d)return;const r=e?"addEventListener":"removeEventListener",o=d||t.root||window;o[r]("scroll",I,T),window[r]("resize",I,T),d=e?o:null,!e&&f&&(cancelAnimationFrame(f),f=0)}function V(e){l.delete(e)&&!l.size&&R(!1)}function z(e){e.forEach(e=>{const r=e.target,n=o.get(r);n&&(e.isIntersecting?(l.add(r),R(!0)):V(r),L(r,n,b(r,t.root)))})}function W(e){const a=new Map;e.forEach(e=>{const s=e.target,i=o.get(s);if(!i)return;const c=i.options;if(!1!==s.isConnected)if("css"!==i.engine)if(e.isIntersecting){if(c.onEnter(s),i.animated&&!c.repeat)return;let e=0;if(c.stagger>0){const t=s.parentElement;e=a.get(t)??0,a.set(t,e+1)}F(s,c,t,e,m),i.animated=!0,c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(n.add(s),A(s,!1)))}else c.onLeave(s),c.repeat&&i.animated&&(k(t)||(c.exit?function(e,t,o){if(o.useClassNames||"function"!=typeof e.animate)return void N(e,o);S(e);const n=r(!0===t.exit?t.animation:t.exit),a=P({from:n.to,to:n.from},t.easing),s={duration:t.duration,easing:a.easing,fill:"forwards"};let i;try{i=e.animate(a.keyframes,s)}catch{i=e.animate(a.keyframes,{...s,easing:"ease"})}x.set(e,i)}(s,c,t):N(s,t)),i.animated=!1);else e.isIntersecting?(c.onEnter(s),i.animated||(i.animated=!0,c.onStart(s)),c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(n.add(s),A(s,!1)))):(c.onLeave(s),c.repeat&&(i.animated=!1));else A(s,!1)})}function q(e){e.forEach(e=>{const t=o.get(e.target);t&&L(e.target,t,e.intersectionRatio)})}function D(e){const r=function(e,t){if(!t)return e;const r=(e||"0px").trim().split(/\s+/),o=r[0],n=r[1]??o,a=r[2]??o,s=r[3]??n,i=/^(-?\d*\.?\d+)(px)?$/.exec(a);return`${o} ${n} ${(i?parseFloat(i[1]):0)-t}px ${s}`}(e.rootMargin,e.offset),o=e.threshold,n=t.root;return O(n,`m|${r}|${String(o)}`,()=>new IntersectionObserver(W,{threshold:o,rootMargin:r,root:n}))}function U(e,r,o){var n;r.observer=D(r.options),o&&r.observer.observe(e),r.progressObserver=(n=r.options).onProgress!==s||n.progressVar?function(e){const r=t.root;return"scroll"===e.progressMode?O(r,`s|${e.rootMargin}`,()=>new IntersectionObserver(z,{threshold:0,rootMargin:e.rootMargin,root:r})):O(r,`p|${e.rootMargin}`,()=>new IntersectionObserver(q,{threshold:j(),rootMargin:e.rootMargin,root:r}))}(r.options):void 0,r.progressObserver?.observe(e)}function _(e,a){if(o.has(e)||n.has(e))return;if(!c())return void $(e,t);const s={element:e,options:a,animated:!1,engine:"js"};(function(e){return"js"!==e.engine&&!t.useClassNames&&!k(t)&&u()})(a)&&(S(e),function(e,t,o){if("function"!=typeof e.animate)return null;const n=r(t.animation),a=P(n,t.easing);let s;try{const r=new globalThis.ViewTimeline({subject:e,axis:"block"}),o={fill:"both",easing:a.easing,timeline:r,rangeStart:t.viewRange[0],rangeEnd:t.viewRange[1]};try{s=e.animate(a.keyframes,o)}catch{s=e.animate(a.keyframes,{...o,easing:"linear"})}}catch{return null}if(x.set(e,s),t.exit){const o=r(!0===t.exit?t.animation:t.exit),n=P({from:o.to,to:o.from},t.easing);try{const t=new globalThis.ViewTimeline({subject:e,axis:"block"}),r={fill:"forwards",easing:n.easing,timeline:t,rangeStart:"exit 0%",rangeEnd:"exit 100%"};E.set(e,e.animate(n.keyframes,r))}catch{}}const i=t.repeat||!t.once;return s.onfinish=()=>{if(!i&&x.get(e)===s){x.delete(e);try{s.commitStyles()}catch{M(e,n.to)}s.cancel(),o?.()}t.onComplete(e)},s}(e,a,()=>g.delete(e))&&(s.engine="css",g.add(e))),"js"!==s.engine||k(t)||N(e,t),o.set(e,s),U(e,s,!0)}function B(e){o.has(e)||_(e,h(e,t))}const H={observe(e,r={}){X();const o=y(r,t);v(e).forEach(e=>_(e,o))},unobserve(e){v(e).forEach(e=>{n.delete(e),A(e,!0)})},init(e){const t=e??(i()?document:null);t&&(X(),t.querySelectorAll("[data-sa]").forEach(B))},watch(e){const t=e??(i()?document:null);if(!t||"undefined"==typeof MutationObserver)return s;H.init(t);const r=e=>{e.hasAttribute("data-sa")&&B(e),e.querySelectorAll("[data-sa]").forEach(B)},o=new MutationObserver(e=>{let t=!1;e.forEach(e=>{if("attributes"===e.type){const t=e.target;return void(!1!==t.isConnected&&r(t))}e.addedNodes.forEach(e=>{e instanceof Element&&!1!==e.isConnected&&r(e)}),e.removedNodes.length&&(t=!0)}),t&&X()});return o.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-sa"]}),p.add(o),()=>{o.disconnect(),p.delete(o)}},destroy(){p.forEach(e=>e.disconnect()),p.clear(),m.forEach(e=>{const t=w.get(e);void 0!==t&&(clearTimeout(t),w.delete(e))}),m.clear(),o.forEach((e,r)=>{e.animated||"css"===e.engine||$(r,t)}),g.forEach(e=>{x.has(e)&&$(e,t)}),g.clear(),C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),o.clear(),l.clear(),R(!1),n=new WeakSet},refresh(){C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),l.clear(),R(!1),X(),c()&&o.forEach((e,t)=>{U(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,r={}){const o=y(r,t);v(e).forEach(e=>F(e,o,t,0,m))},getObservedElements:()=>Array.from(o.values()),configure(e){t={...t,...e}}};return H}let I=null;let R=null;function V(e,t){const r=[];let o=0;return e.forEach(e=>{const{target:n,gap:a=0,at:s,...i}=e,c={...t,...i},l=c.duration??600,f=Math.max(0,s??o+a)+(c.delay??0);let d=Math.max(o,f);v(n).forEach((e,t)=>{const o=f+t*(c.stagger??0);r.push({el:e,opts:{...c,duration:l,delay:o,stagger:0},end:o+l}),d=Math.max(d,o+l)}),o=d}),r}const z={passive:!0};
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ScrollAnimate={})}(this,function(e){"use strict";const t={"fade-in":{from:{opacity:0},to:{opacity:1}},"fade-in-up":{from:{opacity:0,transform:"translateY(40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-down":{from:{opacity:0,transform:"translateY(-40px)"},to:{opacity:1,transform:"translateY(0px)"}},"fade-in-left":{from:{opacity:0,transform:"translateX(-40px)"},to:{opacity:1,transform:"translateX(0px)"}},"fade-in-right":{from:{opacity:0,transform:"translateX(40px)"},to:{opacity:1,transform:"translateX(0px)"}},"zoom-in":{from:{opacity:0,transform:"scale(0.8)"},to:{opacity:1,transform:"scale(1)"}},"zoom-out":{from:{opacity:0,transform:"scale(1.2)"},to:{opacity:1,transform:"scale(1)"}},"flip-x":{from:{opacity:0,transform:"rotateX(-90deg)"},to:{opacity:1,transform:"rotateX(0deg)"}},"flip-y":{from:{opacity:0,transform:"rotateY(-90deg)"},to:{opacity:1,transform:"rotateY(0deg)"}},"slide-up":{from:{transform:"translateY(100%)"},to:{transform:"translateY(0px)"}},"slide-down":{from:{transform:"translateY(-100%)"},to:{transform:"translateY(0px)"}},"slide-left":{from:{transform:"translateX(-100%)"},to:{transform:"translateX(0px)"}},"slide-right":{from:{transform:"translateX(100%)"},to:{transform:"translateX(0px)"}},bounce:{from:{opacity:0,transform:"translateY(-60px)"},to:{opacity:1,transform:"translateY(0px)"}},"rotate-in":{from:{opacity:0,transform:"rotate(-180deg) scale(0.5)"},to:{opacity:1,transform:"rotate(0deg) scale(1)"}},"blur-in":{from:{opacity:0,filter:"blur(12px)"},to:{opacity:1,filter:"blur(0px)"}},"skew-in":{from:{opacity:0,transform:"skewX(20deg) translateX(30px)"},to:{opacity:1,transform:"skewX(0deg) translateX(0px)"}},"scale-x":{from:{transform:"scaleX(0)"},to:{transform:"scaleX(1)"}},"scale-y":{from:{transform:"scaleY(0)"},to:{transform:"scaleY(1)"}},shimmer:{from:{opacity:.5,filter:"brightness(1)"},to:{opacity:1,filter:"brightness(1.5)"}},pulse:{from:{transform:"scale(1)"},to:{transform:"scale(1.05)"}},swing:{from:{transform:"rotate(-10deg)"},to:{transform:"rotate(10deg)"}},"scale-up":{from:{opacity:0,transform:"scale(0.5)"},to:{opacity:1,transform:"scale(1)"}},"blur-in-up":{from:{opacity:0,filter:"blur(12px)",transform:"translateY(40px)"},to:{opacity:1,filter:"blur(0px)",transform:"translateY(0px)"}},"flip-up":{from:{opacity:0,transform:"perspective(800px) rotateX(60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"flip-down":{from:{opacity:0,transform:"perspective(800px) rotateX(-60deg)"},to:{opacity:1,transform:"perspective(800px) rotateX(0deg)"}},"rotate-left":{from:{opacity:0,transform:"rotate(-15deg) translateX(-40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"rotate-right":{from:{opacity:0,transform:"rotate(15deg) translateX(40px)"},to:{opacity:1,transform:"rotate(0deg) translateX(0px)"}},"clip-up":{from:{clipPath:"inset(100% 0% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-down":{from:{clipPath:"inset(0% 0% 100% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-left":{from:{clipPath:"inset(0% 0% 0% 100%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-right":{from:{clipPath:"inset(0% 100% 0% 0%)"},to:{clipPath:"inset(0% 0% 0% 0%)"}},"clip-circle":{from:{clipPath:"circle(0% at 50% 50%)"},to:{clipPath:"circle(75% at 50% 50%)"}}};function n(e){if("string"==typeof e)return t[e.trim()]??t["fade-in-up"];if(Array.isArray(e)){const n={from:{},to:{}};return e.forEach(e=>{const r=t[e.trim()];r&&(Object.entries(r.from).forEach(([e,t])=>{"transform"===e&&n.from[e]?n.from[e]=`${n.from[e]} ${t}`:n.from[e]=t}),Object.entries(r.to).forEach(([e,t])=>{"transform"===e&&n.to[e]?n.to[e]=`${n.to[e]} ${t}`:n.to[e]=t}))}),n}return e}const r={linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)","soft-spring":"cubic-bezier(0.175, 0.885, 0.32, 1.275)","heavy-bounce":"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function o(e){return"string"==typeof e?r[e]??e:Array.isArray(e)?`cubic-bezier(${e.join(", ")})`:"function"==typeof e?"linear":"ease"}const a={defaultAnimation:"fade-in-up",defaultDuration:600,defaultDelay:0,defaultEasing:"ease",defaultThreshold:.1,defaultRootMargin:"0px",defaultRepeat:!1,defaultOnce:!0,defaultOffset:0,hiddenClass:"sa-hidden",visibleClass:"sa-visible",useClassNames:!1,disabled:!1,root:null,autoUnregister:!0,defaultEngine:"auto"},s=()=>{},i=()=>"undefined"!=typeof window&&"undefined"!=typeof document,c=()=>i()&&"undefined"!=typeof IntersectionObserver;let f,l;function d(){return!!i()&&(void 0===f&&(f="function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null),!!f&&f.matches)}function u(){return void 0===l&&(l=i()&&"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: view()")&&"function"==typeof globalThis.ViewTimeline),l}function m(e){if(void 0===e||""===e.trim())return;const t=parseFloat(e);return Number.isFinite(t)?t:void 0}const p=["entry 0%","entry 100%"];function g(e){const t=e.trim();return t?t.startsWith("--")?t:`--${t}`:"--sa-progress"}function h(e,t){return y(function(e){const t={},n=e("animation");n&&(t.animation=n.includes(",")?n.split(",").map(e=>e.trim()):n.trim()),t.duration=m(e("duration")),t.delay=m(e("delay"));const r=e("easing");if(r){const e=r.trim();if(e.startsWith("["))try{t.easing=JSON.parse(e)}catch{}else t.easing=e}const o=e("threshold");o&&(t.threshold=o.includes(",")?o.split(",").map(parseFloat).filter(Number.isFinite):m(o));const a=e("root-margin");a&&(t.rootMargin=a);const s=e("repeat");void 0!==s&&(t.repeat="false"!==s);const i=e("once");void 0!==i&&(t.once="false"!==i),t.offset=m(e("offset")),t.stagger=m(e("stagger"));const c=e("progress-var");void 0!==c&&(t.progressVar=g(c));const f=e("engine")?.trim();"auto"!==f&&"js"!==f&&"css"!==f||(t.engine=f);const l=e("view-range");if(l){const[e,n]=l.split(",").map(e=>e.trim());e&&n&&(t.viewRange=[e,n])}const d=e("exit");if(void 0!==d){const e=d.trim();t.exit=""===e||"true"===e||"false"!==e&&(e.includes(",")?e.split(",").map(e=>e.trim()):e)}const u=e("progress");return u&&(t.progressMode="scroll"===u.trim()?"scroll":"ratio"),Object.keys(t).forEach(e=>void 0===t[e]&&delete t[e]),t}(t=>{const n=e.getAttribute(`data-sa-${t}`);return null===n?void 0:n}),t)}function y(e,t){let n=e.engine??t.defaultEngine;"auto"===n&&(void 0!==e.duration||void 0!==e.delay||void 0!==e.offset||(e.stagger??0)>0)&&(n="js");const r=e.exit??!1,o=e.repeat??(!!r||t.defaultRepeat),a=e.threshold??t.defaultThreshold;return{animation:e.animation??t.defaultAnimation,duration:e.duration??t.defaultDuration,delay:e.delay??t.defaultDelay,easing:e.easing??t.defaultEasing,threshold:Array.isArray(a)&&0===a.length?t.defaultThreshold:a,rootMargin:e.rootMargin??t.defaultRootMargin,repeat:o,once:e.once??(!o&&t.defaultOnce),offset:e.offset??t.defaultOffset,stagger:e.stagger??0,onStart:e.onStart??s,onComplete:e.onComplete??s,onEnter:e.onEnter??s,onLeave:e.onLeave??s,onProgress:e.onProgress??s,progressMode:e.progressMode??"ratio",progressVar:e.progressVar?g(e.progressVar):"",engine:n,viewRange:e.viewRange??p,exit:r}}function v(e){return e&&i()?"string"==typeof e?Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.isArray(e)||e instanceof NodeList?Array.from(e).filter(e=>e instanceof Element):[]:[]}function b(e,t){if(!i())return 0;const n=e.getBoundingClientRect();let r=0,o=window.innerHeight||document.documentElement.clientHeight||0;if(t){const e=t.getBoundingClientRect();r=e.top,o=e.height}const a=o+n.height;if(a<=0)return 0;const s=(r+o-n.top)/a;return s<0?0:s>1?1:s}const x=new WeakMap,w=new WeakMap,E=new WeakMap;function M(e){const t=w.get(e);t&&(w.delete(e),t.cancel());const n=x.get(e);n&&(x.delete(e),n.onfinish=null,n.cancel());const r=E.get(e);void 0!==r&&(clearTimeout(r),E.delete(e))}function S(e,t){const n=e.style;n&&Object.keys(t).forEach(e=>{n[e]=String(t[e])})}const C=/(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)/gi;let A,P;function O(e,t){if("function"!=typeof t)return{keyframes:[e.from,e.to],easing:o(t)};const n=function(e){const t=[];for(let n=0;n<=30;n++){const r=e(n/30);t.push(Number.isFinite(r)?+r.toFixed(4):n/30)}return t}(t);if(void 0===A&&(A="undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timing-function","linear(0, 1)")),A)return{keyframes:[e.from,e.to],easing:`linear(${n.join(", ")})`};const r=Object.keys(e.from).filter(t=>t in e.to);return{keyframes:n.map((t,n)=>{const o={offset:n/30};return r.forEach(n=>{o[n]=function(e,t,n){if("number"==typeof e&&"number"==typeof t)return e+(t-e)*n;const r=String(e),o=String(t),a=[],s=[],i=r.replace(C,(e,t,n)=>(a.push([parseFloat(t),n]),"#"));if(i!==o.replace(C,(e,t,n)=>(s.push([parseFloat(t),n]),"#"))||a.length!==s.length)return n<.5?e:t;let c=0,f=!0;const l=i.replace(/#/g,()=>{const[e,t]=a[c],[r,o]=s[c++];t!==o&&0!==e&&0!==r&&t&&o&&(f=!1);const i=t||o;return`${+(e+(r-e)*n).toFixed(4)}${i}`});return f?l:n<.5?e:t}(e.from[n],e.to[n],t)}),o}),easing:"linear"}}function $(e,t){if(M(e),t.useClassNames)e.classList.remove(t.hiddenClass),e.classList.add(t.visibleClass);else{const t=e.style;t&&(t.opacity="")}}function X(e){return!!e.disabled||d()}function k(e,t,r,o=0,a){const{duration:s,delay:i,stagger:c,onStart:f,onComplete:l}=t,d=Math.max(0,i+o*c);if(M(e),X(r))return $(e,r),f(e),void l(e);if(r.useClassNames)return d>0&&(e.style.animationDelay=`${d}ms`),e.classList.remove(r.hiddenClass),e.classList.add(r.visibleClass),f(e),a?.add(e),void E.set(e,setTimeout(()=>{E.delete(e),a?.delete(e),l(e)},s+d));const u=n(t.animation);if(!("opacity"in u.to)){const t=e.style;t&&"0"===t.opacity&&(t.opacity="")}if("function"!=typeof e.animate)return S(e,u.to),f(e),void l(e);const m=O(u,t.easing),p={duration:s,delay:d,easing:m.easing,fill:"both"};let g;try{g=e.animate(m.keyframes,p)}catch{g=e.animate(m.keyframes,{...p,easing:"ease"})}x.set(e,g),f(e),g.onfinish=()=>{if(x.get(e)===g){x.delete(e);try{g.commitStyles()}catch{S(e,u.to)}g.cancel()}l(e)}}function F(e,t){if(M(e),t.useClassNames)e.classList.add(t.hiddenClass),e.classList.remove(t.visibleClass);else{const t=e.style;t&&(t.opacity="0")}}function L(e,t={}){const n={...a,...t};X(n)||F(e,n)}function N(){if(!P){P=[];for(let e=0;e<=100;e++)P.push(e/100)}return P}const T={passive:!0};function Y(e={}){let t={...a,...e};const r=new Map;let o=new WeakSet;const f=new Set;let l=0,d=null;const m=new Set,p=new Set,g=new Set,C=new Map;function A(e,t,n){let r=C.get(e);r||C.set(e,r=new Map);let o=r.get(t);return o||r.set(t,o=n()),o}function P(e,n){const o=r.get(e);o&&(o.observer.unobserve(e),o.progressObserver?.unobserve(e),r.delete(e),I(e),"css"!==o.engine?n&&!o.animated&&$(e,t):n?(g.delete(e),$(e,t)):!1===e.isConnected&&g.delete(e))}function L(){r.forEach((e,t)=>{!1===t.isConnected&&P(t,!1)})}function Y(e,t,n){const r=t.options;if(r.onProgress(e,n),r.progressVar){const t=e.style;t&&t.setProperty(r.progressVar,String(+n.toFixed(4)))}}function j(){l=0,f.forEach(e=>{const n=r.get(e);n&&Y(e,n,b(e,t.root))})}const R=()=>l||(l=requestAnimationFrame(j));function z(e){if(e===!!d)return;const n=e?"addEventListener":"removeEventListener",r=d||t.root||window;r[n]("scroll",R,T),window[n]("resize",R,T),d=e?r:null,!e&&l&&(cancelAnimationFrame(l),l=0)}function I(e){f.delete(e)&&!f.size&&z(!1)}function V(e){e.forEach(e=>{const n=e.target,o=r.get(n);o&&(e.isIntersecting?(f.add(n),z(!0)):I(n),Y(n,o,b(n,t.root)))})}function q(e){const a=new Map;e.forEach(e=>{const s=e.target,i=r.get(s);if(!i)return;const c=i.options;if(!1!==s.isConnected)if("css"!==i.engine)if(e.isIntersecting){if(c.onEnter(s),i.animated&&!c.repeat)return;let e=0;if(c.stagger>0){const t=s.parentElement;e=a.get(t)??0,a.set(t,e+1)}k(s,c,t,e,p),i.animated=!0,c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(o.add(s),P(s,!1)))}else c.onLeave(s),c.repeat&&i.animated&&(X(t)||(c.exit?function(e,t,r){if(r.useClassNames||"function"!=typeof e.animate)return void F(e,r);M(e);const o=n(!0===t.exit?t.animation:t.exit),a=O({from:o.to,to:o.from},t.easing),s={duration:t.duration,easing:a.easing,fill:"forwards"};let i;try{i=e.animate(a.keyframes,s)}catch{i=e.animate(a.keyframes,{...s,easing:"ease"})}x.set(e,i)}(s,c,t):F(s,t)),i.animated=!1);else e.isIntersecting?(c.onEnter(s),i.animated||(i.animated=!0,c.onStart(s)),c.once&&!c.repeat&&(i.observer.unobserve(s),t.autoUnregister&&!i.progressObserver&&(o.add(s),P(s,!1)))):(c.onLeave(s),c.repeat&&(i.animated=!1));else P(s,!1)})}function W(e){e.forEach(e=>{const t=r.get(e.target);t&&Y(e.target,t,e.intersectionRatio)})}function D(e){const n=function(e,t){if(!t)return e;const n=(e||"0px").trim().split(/\s+/),r=n[0],o=n[1]??r,a=n[2]??r,s=n[3]??o,i=/^(-?\d*\.?\d+)(px)?$/.exec(a);return`${r} ${o} ${(i?parseFloat(i[1]):0)-t}px ${s}`}(e.rootMargin,e.offset),r=e.threshold,o=t.root;return A(o,`m|${n}|${String(r)}`,()=>new IntersectionObserver(q,{threshold:r,rootMargin:n,root:o}))}function _(e,n,r){var o;n.observer=D(n.options),r&&n.observer.observe(e),n.progressObserver=(o=n.options).onProgress!==s||o.progressVar?function(e){const n=t.root;return"scroll"===e.progressMode?A(n,`s|${e.rootMargin}`,()=>new IntersectionObserver(V,{threshold:0,rootMargin:e.rootMargin,root:n})):A(n,`p|${e.rootMargin}`,()=>new IntersectionObserver(W,{threshold:N(),rootMargin:e.rootMargin,root:n}))}(n.options):void 0,n.progressObserver?.observe(e)}function U(e,a){if(r.has(e)||o.has(e))return;if(!c())return void $(e,t);const s={element:e,options:a,animated:!1,engine:"js"};(function(e){return"js"!==e.engine&&!t.useClassNames&&!X(t)&&u()})(a)&&(M(e),function(e,t,r){if("function"!=typeof e.animate)return null;const o=n(t.animation),a=O(o,t.easing);let s;try{const n=new globalThis.ViewTimeline({subject:e,axis:"block"}),r={fill:"both",easing:a.easing,timeline:n,rangeStart:t.viewRange[0],rangeEnd:t.viewRange[1]};try{s=e.animate(a.keyframes,r)}catch{s=e.animate(a.keyframes,{...r,easing:"linear"})}}catch{return null}if(x.set(e,s),t.exit){const r=n(!0===t.exit?t.animation:t.exit),o=O({from:r.to,to:r.from},t.easing);try{const t=new globalThis.ViewTimeline({subject:e,axis:"block"}),n={fill:"forwards",easing:o.easing,timeline:t,rangeStart:"exit 0%",rangeEnd:"exit 100%"};w.set(e,e.animate(o.keyframes,n))}catch{}}const i=t.repeat||!t.once;return s.onfinish=()=>{if(!i&&x.get(e)===s){x.delete(e);try{s.commitStyles()}catch{S(e,o.to)}s.cancel(),r?.()}t.onComplete(e)},s}(e,a,()=>g.delete(e))&&(s.engine="css",g.add(e))),"js"!==s.engine||X(t)||F(e,t),r.set(e,s),_(e,s,!0)}function B(e){r.has(e)||U(e,h(e,t))}const H={observe(e,n={}){L();const r=y(n,t);v(e).forEach(e=>U(e,r))},unobserve(e){v(e).forEach(e=>{o.delete(e),P(e,!0)})},init(e){const t=e??(i()?document:null);t&&(L(),t.querySelectorAll("[data-sa]").forEach(B))},watch(e){const t=e??(i()?document:null);if(!t||"undefined"==typeof MutationObserver)return s;H.init(t);const n=e=>{e.hasAttribute("data-sa")&&B(e),e.querySelectorAll("[data-sa]").forEach(B)},r=new MutationObserver(e=>{let t=!1;e.forEach(e=>{if("attributes"===e.type){const t=e.target;return void(!1!==t.isConnected&&n(t))}e.addedNodes.forEach(e=>{e instanceof Element&&!1!==e.isConnected&&n(e)}),e.removedNodes.length&&(t=!0)}),t&&L()});return r.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-sa"]}),m.add(r),()=>{r.disconnect(),m.delete(r)}},destroy(){m.forEach(e=>e.disconnect()),m.clear(),p.forEach(e=>{const t=E.get(e);void 0!==t&&(clearTimeout(t),E.delete(e))}),p.clear(),r.forEach((e,n)=>{e.animated||"css"===e.engine||$(n,t)}),g.forEach(e=>{x.has(e)&&$(e,t)}),g.clear(),C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),r.clear(),f.clear(),z(!1),o=new WeakSet},refresh(){C.forEach(e=>e.forEach(e=>e.disconnect())),C.clear(),f.clear(),z(!1),L(),c()&&r.forEach((e,t)=>{_(t,e,!(e.animated&&e.options.once&&!e.options.repeat))})},animate(e,n={}){const r=y(n,t);v(e).forEach(e=>k(e,r,t,0,p))},getObservedElements:()=>Array.from(r.values()),configure(e){t={...t,...e}}};return H}let j=null;const R={off:0,low:.6,normal:1,high:1.25},z="normal";function I(){return"function"==typeof matchMedia&&!!matchMedia("(prefers-reduced-motion: reduce)").matches}function V(e,t){if(t)for(const[n,r]of Object.entries(t))"offset"!==n&&"easing"!==n&&"composite"!==n&&null!=r&&(e.style[n]=String(r))}const q=e=>"function"==typeof requestAnimationFrame?requestAnimationFrame(e):setTimeout(()=>e(Date.now()),16),W=()=>"undefined"!=typeof performance?performance.now():Date.now(),D=e=>{"function"==typeof cancelAnimationFrame?cancelAnimationFrame(e):clearTimeout(e)},_=(e,t,n)=>Math.min(n,Math.max(t,e)),U={fade:[{opacity:0},{opacity:1}],"fade-up":[{opacity:0,transform:"translateY(24px)"},{opacity:1,transform:"none"}],"fade-down":[{opacity:0,transform:"translateY(-24px)"},{opacity:1,transform:"none"}],"fade-left":[{opacity:0,transform:"translateX(24px)"},{opacity:1,transform:"none"}],"fade-right":[{opacity:0,transform:"translateX(-24px)"},{opacity:1,transform:"none"}],scale:[{opacity:0,transform:"scale(0.85)"},{opacity:1,transform:"none"}],blur:[{opacity:0,filter:"blur(12px)"},{opacity:1,filter:"blur(0)"}],rotate:[{opacity:0,transform:"rotate(-12deg) scale(0.9)"},{opacity:1,transform:"none"}],"clip-up":[{clipPath:"inset(100% 0 0 0)"},{clipPath:"inset(0 0 0 0)"}],"clip-right":[{clipPath:"inset(0 100% 0 0)"},{clipPath:"inset(0 0 0 0)"}]};function B(e,t,n,r={}){if(void 0===e||""===e||">"===e)return t;if("number"==typeof e)return Math.max(0,e);const o=String(e).trim();if(/^-?\d+(\.\d+)?$/.test(o))return Math.max(0,Number(o));const a=/^(<|>|[A-Za-z_][\w-]*)?\s*(?:([+-])=\s*(\d+(?:\.\d+)?))?$/.exec(o);if(!a)return t;const s="<"===a[1]?n:">"!==a[1]&&a[1]?r[a[1]]??t:t,i=a[2]?("-"===a[2]?-1:1)*Number(a[3]):0;return Math.max(0,s+i)}const H={passive:!0};
|
|
2
2
|
/**
|
|
3
3
|
* use-scroll-animate
|
|
4
4
|
*
|
|
@@ -11,5 +11,5 @@
|
|
|
11
11
|
* @license MIT
|
|
12
12
|
* @see https://github.com/HarrisonCN/use-scroll-animate
|
|
13
13
|
*/
|
|
14
|
-
const
|
|
14
|
+
const G=Y();e.EASING_MAP=r,e.PRESETS=t,e.TIMELINE_PRESETS=U,e.createScrollAnimate=Y,e.default=G,e.getScrollProgress=b,e.parallax=function(e,t={}){const n=v(e);if(!n.length||!i()||!c())return()=>{};const{speed:r=.2,axis:o="y",root:a=null,respectReducedMotion:s=!0}=t,f=t.progressVar?t.progressVar.startsWith("--")?t.progressVar:`--${t.progressVar}`:"--sa-parallax",l="x"===o?"vw":"vh",u=new Set;let m=0,p=!1;const g=a||window,h=e=>{const t=e.style;if(!t)return;const n=b(e,a);if(t.setProperty(f,String(+n.toFixed(4))),s&&d())return void t.removeProperty("translate");const i=`${+((n-.5)*r*100).toFixed(3)}${l}`;t.setProperty("translate","x"===o?`${i} 0px`:`0px ${i}`)},y=()=>{m=0,u.forEach(h)},x=()=>{m||(m=requestAnimationFrame(y))},w=e=>{if(e===p)return;p=e;const t=e?"addEventListener":"removeEventListener";g[t]("scroll",x,H),window[t]("resize",x,H),!e&&m&&(cancelAnimationFrame(m),m=0)},E=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?u.add(e.target):u.delete(e.target),h(e.target)}),w(u.size>0)},{threshold:0,root:a});return n.forEach(e=>{h(e),E.observe(e)}),()=>{E.disconnect(),w(!1),u.clear(),n.forEach(e=>{const t=e.style;t&&(t.removeProperty("translate"),t.removeProperty(f))})}},e.resolveEasing=o,e.resolvePosition=B,e.resolvePreset=n,e.staggerChildren=function(e,t={},n){if(!e||!i()||!c())return()=>{};const r=n||j||(j=Y()),{stagger:o=80,delay:s=0,threshold:f=.1,rootMargin:l="0px",observeChildren:d=!1,...u}=t;let m=Array.from(e.children),p=!1;const g=[];m.forEach(e=>L(e));const h=new IntersectionObserver(t=>{!p&&t.some(e=>e.isIntersecting)&&(p=!0,h.disconnect(),m.forEach((t,n)=>{t.parentNode===e&&r.animate(t,{...u,delay:s+n*o})}),m=[])},{threshold:f,rootMargin:l});let y;return h.observe(e),d&&"undefined"!=typeof MutationObserver&&(y=new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t instanceof Element&&t.parentNode===e&&(p?(g.push(t),r.observe(t,{...u,delay:s,stagger:o,threshold:f,rootMargin:l})):(L(t),m.push(t)))}),t.removedNodes.forEach(e=>{if(!(e instanceof Element))return;m=m.filter(t=>t!==e);const t=g.indexOf(e);t>=0&&(g.splice(t,1),r.unobserve(e))})})}),y.observe(e,{childList:!0})),()=>{h.disconnect(),y?.disconnect(),p||(p=!0,m.forEach(e=>function(e,t={}){$(e,{...a,...t})}(e)),m=[]),g.forEach(e=>r.unobserve(e)),g.length=0}},e.supportsScrollTimeline=u,e.timeline=function(e={}){const t={duration:600,easing:"cubic-bezier(0.22, 1, 0.36, 1)",stagger:0,...e.defaults},n=[],r=[],o={};let a,s=0,i=0,c=0,f=0,l=1,d=!1;const u=()=>Math.max(s,...r.map(e=>e.at),0),m=(t,o)=>{(()=>{if(!d){d=!0;for(const e of n)"function"==typeof e.el.animate?(e.anim=e.el.animate(e.frames,{duration:e.duration,delay:e.start,easing:e.easing,fill:"both"}),e.anim.pause?.()):e.anim=null}})(),c=_(t,0,u());for(const e of n)e.anim?e.anim.currentTime=c:V(e.el,e.frames[c>=e.start?e.frames.length-1:0]);for(const e of r)(o<e.at&&c>=e.at||o>e.at&&c<=e.at)&&e.fn();e.onUpdate?.(u()?c/u():1)},p=()=>{f&&D(f),f=0},g=t=>{p(),a?.(),l=t;const n=l>0?u():0,r=R[z];if(I()||0===r||!u())return m(n,c),e.onComplete?.(),Promise.resolve();const o=(e.speed??1)/r;return new Promise(t=>{a=()=>{a=void 0,t()};let r=W();const s=()=>{const t=W(),i=c+(t-r)*o*l;if(r=t,m(i,c),l>0&&c>=n||l<0&&c<=0)return f=0,e.onComplete?.(),void a?.();f=q(s)};f=q(s)})},h={get duration(){return u()},get labels(){return{...o}},get time(){return c},to(e,r,a={}){const c="string"==typeof r?U[r]||U.fade:r,f=B(a.at,s,i,o),l=a.duration??t.duration,u=a.stagger??t.stagger;let m=f;return(e=>"string"==typeof e?"undefined"==typeof document?[]:Array.from(document.querySelectorAll(e)):e instanceof Element?[e]:Array.from(e))(e).forEach((e,r)=>{const o=f+r*u;n.push({el:e,frames:c,start:o,duration:l,easing:a.easing??t.easing}),m=Math.max(m,o+l)}),i=f,s=Math.max(s,m),d=!1,n.forEach(e=>e.anim?.cancel?.()),h},label:(e,t)=>(o[e]=B(t,s,i,o),h),call:(e,t)=>(r.push({fn:e,at:B(t,s,i,o)}),h),play:e=>(void 0!==e?m(B(e,0,0,o),c):c>=u()&&m(0,-1),g(1)),reverse:()=>g(-1),pause:()=>(p(),h),seek:e=>(p(),m(B(e,0,0,o),c),h),progress:e=>(void 0!==e&&h.seek(_(e,0,1)*u()),u()?c/u():0),scrub(e,t={}){if(p(),I()||"undefined"==typeof window)return m(u(),c),()=>{};let n=0,r=c;const o=()=>{n=0;const a=e.getBoundingClientRect(),s=window.innerHeight||1,i=_((s+(t.offset??0)-a.top)/(s+a.height||1),0,1)*u(),f=_(t.smooth??0,0,.95);r=f?r+(i-r)*(1-f):i,m(r,c),f&&Math.abs(i-r)>.5&&(n=q(o))},a=()=>{n||(n=q(o))};return window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a,{passive:!0}),o(),()=>{window.removeEventListener("scroll",a),window.removeEventListener("resize",a),n&&D(n)}},cancel(){p(),a?.(),n.forEach(e=>e.anim?.cancel?.()),d=!1}};return h},Object.defineProperty(e,"__esModule",{value:!0})});
|
|
15
15
|
//# sourceMappingURL=index.umd.js.map
|