svg-scroll-draw 2.11.0 → 2.12.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/README.md
CHANGED
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
| `scrollText` | `svg-scroll-draw/text` | Split text into chars/words/lines and stagger-animate each on scroll. 2.5 KB, nothing else to load. |
|
|
32
32
|
| `devtools` | `svg-scroll-draw/devtools` | Visual overlay showing every active animation's triggers and progress. Dev-only. |
|
|
33
33
|
| `AOS` | `svg-scroll-draw/aos` | Drop-in replacement for AOS: same `AOS.init()`, same `data-aos` markup, no `aos.css`. |
|
|
34
|
+
| `ScrollReveal` | `svg-scroll-draw/scrollreveal` | Drop-in replacement for ScrollReveal.js 4, MIT instead of GPL-3.0. |
|
|
34
35
|
|
|
35
36
|
All APIs return the same instance object: `{ destroy, replay, pause, resume, seek, getProgress }`.
|
|
36
37
|
|
|
@@ -397,6 +398,38 @@ Differences, on purpose:
|
|
|
397
398
|
|
|
398
399
|
---
|
|
399
400
|
|
|
401
|
+
## ScrollReveal drop-in — MIT instead of GPL
|
|
402
|
+
|
|
403
|
+
On [ScrollReveal](https://scrollrevealjs.org)? It is GPL-3.0 (with a paid licence for commercial work)
|
|
404
|
+
and has not shipped since 4.0.9. `svg-scroll-draw/scrollreveal` is an independent, MIT-licensed
|
|
405
|
+
implementation of the same API, so the move is an import change. 4.5 KB gzipped, against 5.6 KB.
|
|
406
|
+
|
|
407
|
+
```diff
|
|
408
|
+
- import ScrollReveal from 'scrollreveal';
|
|
409
|
+
+ import ScrollReveal from 'svg-scroll-draw/scrollreveal';
|
|
410
|
+
|
|
411
|
+
ScrollReveal({ distance: '40px', duration: 800 }).reveal('.card', { interval: 80 });
|
|
412
|
+
```
|
|
413
|
+
|
|
414
|
+
No bundler? `<script src="https://unpkg.com/svg-scroll-draw/dist/cdn/scrollreveal.global.js"></script>`
|
|
415
|
+
defines `window.ScrollReveal` as the function, like ScrollReveal's own file. With CommonJS,
|
|
416
|
+
`require('svg-scroll-draw/scrollreveal').default` is the function.
|
|
417
|
+
|
|
418
|
+
Every option behaves as in 4.0.9 — `distance` / `origin`, `opacity`, `scale`, `rotate`, `duration`,
|
|
419
|
+
`delay`, `easing`, `interval` sequences, `reset`, `useDelay`, `viewFactor`, `viewOffset`,
|
|
420
|
+
`container`, `mobile` / `desktop`, `cleanup` and the four callbacks — as do `reveal`, `clean`, `sync`,
|
|
421
|
+
`destroy`, `data-sr-id` and the `sr` class on `<html>` for FOUC-hiding CSS. The browser suite runs
|
|
422
|
+
ScrollReveal 4.0.9 beside it in Chromium, Firefox and WebKit and fails if any element's inline `style`
|
|
423
|
+
differs by a character at any scroll stop, or if any callback fires differently.
|
|
424
|
+
|
|
425
|
+
Differences, on purpose:
|
|
426
|
+
|
|
427
|
+
- Nothing happens on import. ScrollReveal adds the `sr` class and `body { height: 100% }` as soon as its
|
|
428
|
+
script loads; this does both on the first `ScrollReveal()` call, keeping the import SSR-safe.
|
|
429
|
+
- `prefers-reduced-motion: reduce` shows every element in its final state, with no transition.
|
|
430
|
+
|
|
431
|
+
---
|
|
432
|
+
|
|
400
433
|
## Instance API
|
|
401
434
|
|
|
402
435
|
Every function returns the same instance object:
|
|
@@ -488,6 +521,7 @@ devtools.highlight('#my-element'); // outline for 2 seconds
|
|
|
488
521
|
| `svg-scroll-draw/cinematic` | `Cinematic` |
|
|
489
522
|
| `svg-scroll-draw/devtools` | `devtools` (dev-only) |
|
|
490
523
|
| `svg-scroll-draw/aos` | `AOS` (default), `init`, `refresh`, `refreshHard`, `destroy` |
|
|
524
|
+
| `svg-scroll-draw/scrollreveal` | `ScrollReveal` (default and named) |
|
|
491
525
|
|
|
492
526
|
---
|
|
493
527
|
|
|
@@ -500,6 +534,7 @@ devtools.highlight('#my-element'); // outline for 2 seconds
|
|
|
500
534
|
| `svg-scroll-draw/reveal` | 4.5 KB |
|
|
501
535
|
| `svg-scroll-draw/text` | 2.5 KB |
|
|
502
536
|
| `svg-scroll-draw/video` | 2.0 KB |
|
|
537
|
+
| `svg-scroll-draw/scrollreveal` | 4.5 KB |
|
|
503
538
|
| `svg-scroll-draw/aos` (styles included) | 3.0 KB |
|
|
504
539
|
| `svg-scroll-draw/snap` | 1.7 KB |
|
|
505
540
|
| `svg-scroll-draw/devtools` | 1.7 KB (dev only) |
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";(()=>{function Y(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var J="4.0.9",D=()=>typeof window<"u"&&typeof document<"u",C=e=>e!==null&&typeof e=="object"&&Object.prototype.toString.call(e)==="[object Object]";function q(e,...n){for(let t of n)if(C(t))for(let o of Object.keys(t)){let i=t[o];C(i)?(C(e[o])||(e[o]={}),q(e[o],i)):e[o]=i}return e}function j(e){if(typeof e=="string")try{return Array.from(document.querySelectorAll(e))}catch{return[]}return e instanceof Element?[e]:e&&typeof e.length=="number"?Array.from(e).filter(n=>n instanceof Element):[]}var $=(e=navigator.userAgent)=>/Android|iPhone|iPad|iPod/i.test(e),F=!1;function P(e,...n){F&&typeof console<"u"&&console.log(`%cScrollReveal: ${e}${n.map(t=>`
|
|
2
|
+
\u2014 ${t}`).join("")}`,"color: #ea654b;")}var x=()=>[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];function ie(e,n){let t=[];for(let o=0;o<4;o++)for(let i=0;i<4;i++){let r=0;for(let s=0;s<4;s++)r+=e[i+4*s]*n[4*o+s];t[i+4*o]=r}return t}function re(e){let n=/matrix(3d)?\(([^)]+)\)/.exec(e||"");if(!n)return x();let t=n[2].split(", ").map(parseFloat);if(t.length===16)return t;let o=x();return[o[0],o[1],o[4],o[5],o[12],o[13]]=t,o}function z(e,n){let t=Math.PI/180*n,o=Math.cos(t),i=Math.sin(t),r=x(),[s,a,c,h]=e==="x"?[5,10,6,9]:e==="y"?[0,10,8,2]:[0,5,1,4];return r[s]=r[a]=o,r[c]=i,r[h]=-i,r}function se(e,n){let t=x();return t[e==="X"?12:13]=n,t}function ae(e){let n=x();return n[0]=n[5]=e,n}function p(e,n){for(let t of n.split(";")){let o=t.indexOf(":");if(o<1)continue;let i=t.slice(0,o).trim(),r=t.slice(o+1).trim();i&&r&&e.style.setProperty(i,r)}}function le(e){let{node:n,config:t}=e,o=window.getComputedStyle(n),i=(n.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[],r=i.map(d=>d.trim()),s=`${r.join("; ")};`,a=i.some(d=>/visibility\s?:\s?visible/i.test(d))?s:`${[...r,"visibility: visible"].join("; ")};`,c=parseFloat(o.opacity),h=t.opacity!==null&&!isNaN(parseFloat(String(t.opacity)))?parseFloat(String(t.opacity)):c,b=c!==h?{computed:`opacity: ${c};`,generated:`opacity: ${h};`}:{computed:"",generated:""},u=[];if(parseFloat(t.distance)){let d=t.origin==="top"||t.origin==="bottom"?"Y":"X",f=t.distance;(t.origin==="top"||t.origin==="left")&&(f=f.startsWith("-")?f.slice(1):`-${f}`);let E=f.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g)||[],m=Number(E[0]),A=E[1],L;if(A==="em")L=parseInt(o.fontSize,10)*m;else if(A==="px")L=m;else if(A==="%"){let X=n.getBoundingClientRect();L=(d==="Y"?X.height:X.width)*m/100}else throw new RangeError("Unrecognized or missing distance unit.");u.push(se(d,L))}t.rotate.x&&u.push(z("x",t.rotate.x)),t.rotate.y&&u.push(z("y",t.rotate.y)),t.rotate.z&&u.push(z("z",t.rotate.z)),t.scale!==1&&u.push(ae(t.scale===0?2e-4:t.scale));let g={initial:"",final:""};if(u.length){let d=re(o.transform);g={initial:`transform: matrix3d(${u.reduce(ie,d).join(", ")});`,final:`transform: matrix3d(${d.join(", ")});`}}let w={delayed:"",instant:""};if(b.generated||g.initial){let d=m=>`${m/1e3}s`,f=[],E=m=>({delayed:`${m} ${d(t.duration)} ${t.easing} ${d(t.delay)}`,instant:`${m} ${d(t.duration)} ${t.easing} 0s`});o.transition&&!/all 0s|none 0s/.test(o.transition)&&f.push({delayed:o.transition,instant:o.transition}),b.generated&&f.push(E("opacity")),g.initial&&f.push(E("transform")),w={delayed:`transition: ${f.map(m=>m.delayed).join(", ")};`,instant:`transition: ${f.map(m=>m.instant).join(", ")};`}}return{inline:{computed:s,generated:a},opacity:b,position:o.position,transform:g,transition:w}}var k=(...e)=>e.filter(n=>n!=="").join(" "),ce=()=>({delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:()=>{},afterReveal:()=>{},beforeReset:()=>{},beforeReveal:()=>{}}),v=null,T=null,l={containers:{},elements:{},history:[],sequences:{}},G=!0,O=null,R=0,Q=!1,de=0,H=()=>de++;function V(e,n=!1){let t=e,o=n?t.clientHeight:t.offsetHeight,i=n?t.clientWidth:t.offsetWidth,r=0,s=0,a=t;for(;a;)isNaN(a.offsetTop)||(r+=a.offsetTop),isNaN(a.offsetLeft)||(s+=a.offsetLeft),a=a.offsetParent;return{bounds:{top:r,right:s+i,bottom:r+o,left:s},height:o,width:i}}var ue=e=>e.node===document.documentElement?{top:window.pageYOffset,left:window.pageXOffset}:{top:e.node.scrollTop,left:e.node.scrollLeft};function fe(e){let n=l.containers[e.containerId];if(!n||!n.geometry||!n.scroll||!e.geometry)return!1;let t=Math.max(0,Math.min(1,e.config.viewFactor)),o=e.config.viewOffset,i=e.geometry,r={top:i.bounds.top+i.height*t,right:i.bounds.right-i.width*t,bottom:i.bounds.bottom-i.height*t,left:i.bounds.left+i.width*t},s={top:n.geometry.bounds.top+n.scroll.top+o.top,right:n.geometry.bounds.right+n.scroll.left-o.right,bottom:n.geometry.bounds.bottom+n.scroll.top-o.bottom,left:n.geometry.bounds.left+n.scroll.left+o.left};return r.top<s.bottom&&r.right>s.left&&r.bottom>s.top&&r.left<s.right||e.styles.position==="fixed"}function K(e,n=!1){let t=n?e.config.duration+e.config.delay:e.config.duration,o=0;e.timer&&(o=Date.now()-e.timer.start,clearTimeout(e.timer.clock)),(e.revealed?e.config.beforeReveal:e.config.beforeReset)(e.node),e.timer={start:Date.now(),clock:setTimeout(()=>{(e.revealed?e.config.afterReveal:e.config.afterReset)(e.node),e.timer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&W(e.node)},t-o)}}function me(e,n){let t=e.styles;e.revealed=e.seen=!0,p(e.node,k(t.inline.generated,t.opacity.computed,t.transform.final,n?t.transition.delayed:t.transition.instant)),K(e,n)}function be(e){let n=e.styles;e.revealed=!1,p(e.node,k(n.inline.generated,n.opacity.generated,n.transform.initial,n.transition.instant)),K(e)}function M(e,n={}){let t=n.pristine||G,o=e.config.useDelay,i=o==="always"||o==="onload"&&t||o==="once"&&!e.seen;if(n.reveal||e.visible&&!e.revealed)return me(e,i);if(n.reset||!e.visible&&e.revealed&&e.config.reset)return be(e)}function U(e,n){let t=[],o=[],i=[];return e.members.forEach((r,s)=>{l.elements[r]?.[n]&&o.push(s)}),o.length&&e.members.forEach((r,s)=>{let a=l.elements[r];a&&!a[n]&&(s<o[0]?t:i).push(s)}),{head:t,body:o,foot:i}}function I(e,n,t,o){let i=t<0?"head":"foot",r=l.elements[e.members[n+t]];e.blocked[i]=!0,setTimeout(()=>{e.blocked[i]=!1,r&&Z(r,o)},e.interval)}function Z(e,n=G){if(!e.visible&&e.revealed&&e.config.reset)return M(e,{reset:!0});let t=e.sequence&&l.sequences[e.sequence.id];if(!t||!e.sequence)return;let o=e.sequence.index,i=U(t,"visible"),r=U(t,"revealed");if(!r.body.length){let a=i.body[0],c=l.elements[t.members[a]];if(c)return I(t,a,-1,n),I(t,a,1,n),M(c,{reveal:!0,pristine:n})}let s=a=>a[a.length-1];if(!t.blocked.head&&o===s(r.head)&&o>=(i.body[0]??1/0))return I(t,o,-1,n),M(e,{reveal:!0,pristine:n});if(!t.blocked.foot&&o===r.foot[0]&&o<=(s(i.body)??-1/0))return I(t,o,1,n),M(e,{reveal:!0,pristine:n})}function ge(){R=0;let e=Q;Q=!1;for(let t of Object.values(l.containers))(e||!t.geometry)&&(t.geometry=V(t.node,!0)),t.scroll=ue(t);let n=Object.values(l.elements);for(let t of n)(e||!t.geometry)&&(t.geometry=V(t.node)),t.visible=fe(t);for(let t of n)t.sequence?Z(t):M(t);G=!1}function y(e){let n=e?e.type:"init";(n==="init"||n==="resize")&&(Q=!0),R||(R=requestAnimationFrame(ge))}var S=e=>e.node===document.documentElement?window:e.node;function _(){let e=new Set(Array.from(document.querySelectorAll("[data-sr-id]")).map(o=>parseInt(o.getAttribute("data-sr-id")||"",10)));for(let o of Object.values(l.elements))e.has(o.id)||delete l.elements[o.id];let n=new Set,t=new Set;for(let o of Object.values(l.elements))n.add(o.containerId),o.sequence&&t.add(o.sequence.id);for(let o of Object.values(l.containers))n.has(o.id)||(S(o).removeEventListener("scroll",y),S(o).removeEventListener("resize",y),delete l.containers[o.id]);for(let o of Object.values(l.sequences))t.has(o.id)||delete l.sequences[o.id]}function ee(){O=null,_();let e=Y();for(let n of Object.values(l.elements)){let t=n.styles;e?(n.visible=n.revealed=n.seen=!0,p(n.node,k(t.inline.generated,t.opacity.computed,t.transform.final,"transition: none;"))):n.visible?(n.revealed=!0,p(n.node,k(t.inline.generated,t.opacity.computed,t.transform.final))):(n.revealed=!1,p(n.node,k(t.inline.generated,t.opacity.generated,t.transform.initial)))}if(!e){for(let n of Object.values(l.containers))S(n).addEventListener("scroll",y),S(n).addEventListener("resize",y);y()}}function te(e,n={},t=!1){if(!v)return;let o=[],i=n.interval||0,r,s;try{if(i){let c=Math.abs(i);if(isNaN(c))throw new RangeError("Invalid sequence interval.");r={id:H(),interval:Math.max(c,16),members:[],blocked:{head:!1,foot:!1}}}let a=j(e);if(!a.length)throw new Error("Invalid reveal target.");s=[];for(let c of a){let h=c.getAttribute("data-sr-id"),b=h!==null?l.elements[Number(h)]:void 0,u=b?q({},b):{id:H(),node:c,seen:!1,revealed:!1,visible:!1};b&&p(c,b.styles.inline.computed);let g=q({},b?b.config:v,n);if(!g.mobile&&$()||!g.desktop&&!$()){b&&W(c);continue}let w=j(g.container)[0];if(!w)throw new Error("Invalid container.");if(!w.contains(c))continue;let d=[...o,...Object.values(l.containers)].find(f=>f.node===w)?.id;d===void 0&&(d=H(),o.push({id:d,node:w})),u.config=g,u.containerId=d,u.styles=le(u),r&&(u.sequence={id:r.id,index:r.members.length},r.members.push(u.id)),s.push(u)}for(let c of s)l.elements[c.id]=c,c.node.setAttribute("data-sr-id",String(c.id))}catch(a){return P("Reveal failed.",a.message)}for(let a of o)l.containers[a.id]=a;r&&(l.sequences[r.id]=r),t||(l.history.push({target:e,options:n}),O&&clearTimeout(O),O=setTimeout(ee,0))}function W(e){let n=!1;for(let t of j(e)){let o=t.getAttribute("data-sr-id");if(o===null)continue;n=!0;let i=l.elements[Number(o)];i&&(i.timer&&clearTimeout(i.timer.clock),p(i.node,i.styles.inline.generated),delete l.elements[i.id]),t.removeAttribute("data-sr-id")}n&&_()}function ve(){for(let e of Object.values(l.elements))p(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id");for(let e of Object.values(l.containers))S(e).removeEventListener("scroll",y),S(e).removeEventListener("resize",y);R&&cancelAnimationFrame(R),R=0,l={containers:{},elements:{},history:[],sequences:{}}}function pe(){for(let e of l.history)te(e.target,e.options,!0);ee()}var N=()=>(D()&&document.documentElement.classList.remove("sr"),{reveal(){},clean(){},destroy(){},sync(){},defaults:{},version:J,noop:!0});function ne(){if(!D())return!1;let e=document.documentElement.style;return("transform"in e||"WebkitTransform"in e)&&("transition"in e||"WebkitTransition"in e)}function ye(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",()=>{document.body.style.height="100%"},{once:!0})}function he(e={}){if(!D()||!ne())return N();let n;try{if(n=q({},v??ce(),e),!j(n.container)[0])throw new Error("Invalid container.")}catch(t){return P("Invalid configuration.",t.message),N()}return v=n,!v.mobile&&$()||!v.desktop&&!$()?(P("This device is disabled.",`desktop: ${v.desktop}`,`mobile: ${v.mobile}`),N()):(ye(),T||(T={reveal:(t,o)=>te(t,o),clean:W,destroy:ve,sync:pe,get defaults(){return v},version:J,noop:!1},Object.defineProperty(T,"delegate",{value:y})),T)}var B=he;B.isSupported=ne;Object.defineProperty(B,"debug",{get:()=>F,set:e=>{typeof e=="boolean"&&(F=e)}});var oe=B;globalThis.ScrollReveal=oe;})();
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});function Y(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var J="4.0.9",D=()=>typeof window<"u"&&typeof document<"u",C=e=>e!==null&&typeof e=="object"&&Object.prototype.toString.call(e)==="[object Object]";function q(e,...n){for(let t of n)if(C(t))for(let o of Object.keys(t)){let i=t[o];C(i)?(C(e[o])||(e[o]={}),q(e[o],i)):e[o]=i;}return e}function j(e){if(typeof e=="string")try{return Array.from(document.querySelectorAll(e))}catch{return []}return e instanceof Element?[e]:e&&typeof e.length=="number"?Array.from(e).filter(n=>n instanceof Element):[]}var $=(e=navigator.userAgent)=>/Android|iPhone|iPad|iPod/i.test(e),F=false;function P(e,...n){F&&typeof console<"u"&&console.log(`%cScrollReveal: ${e}${n.map(t=>`
|
|
2
|
+
\u2014 ${t}`).join("")}`,"color: #ea654b;");}var k=()=>[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];function oe(e,n){let t=[];for(let o=0;o<4;o++)for(let i=0;i<4;i++){let r=0;for(let s=0;s<4;s++)r+=e[i+4*s]*n[4*o+s];t[i+4*o]=r;}return t}function ie(e){let n=/matrix(3d)?\(([^)]+)\)/.exec(e||"");if(!n)return k();let t=n[2].split(", ").map(parseFloat);if(t.length===16)return t;let o=k();return [o[0],o[1],o[4],o[5],o[12],o[13]]=t,o}function z(e,n){let t=Math.PI/180*n,o=Math.cos(t),i=Math.sin(t),r=k(),[s,a,c,h]=e==="x"?[5,10,6,9]:e==="y"?[0,10,8,2]:[0,5,1,4];return r[s]=r[a]=o,r[c]=i,r[h]=-i,r}function re(e,n){let t=k();return t[e==="X"?12:13]=n,t}function se(e){let n=k();return n[0]=n[5]=e,n}function p(e,n){for(let t of n.split(";")){let o=t.indexOf(":");if(o<1)continue;let i=t.slice(0,o).trim(),r=t.slice(o+1).trim();i&&r&&e.style.setProperty(i,r);}}function ae(e){let{node:n,config:t}=e,o=window.getComputedStyle(n),i=(n.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[],r=i.map(d=>d.trim()),s=`${r.join("; ")};`,a=i.some(d=>/visibility\s?:\s?visible/i.test(d))?s:`${[...r,"visibility: visible"].join("; ")};`,c=parseFloat(o.opacity),h=t.opacity!==null&&!isNaN(parseFloat(String(t.opacity)))?parseFloat(String(t.opacity)):c,b=c!==h?{computed:`opacity: ${c};`,generated:`opacity: ${h};`}:{computed:"",generated:""},u=[];if(parseFloat(t.distance)){let d=t.origin==="top"||t.origin==="bottom"?"Y":"X",f=t.distance;(t.origin==="top"||t.origin==="left")&&(f=f.startsWith("-")?f.slice(1):`-${f}`);let S=f.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g)||[],m=Number(S[0]),A=S[1],L;if(A==="em")L=parseInt(o.fontSize,10)*m;else if(A==="px")L=m;else if(A==="%"){let X=n.getBoundingClientRect();L=(d==="Y"?X.height:X.width)*m/100;}else throw new RangeError("Unrecognized or missing distance unit.");u.push(re(d,L));}t.rotate.x&&u.push(z("x",t.rotate.x)),t.rotate.y&&u.push(z("y",t.rotate.y)),t.rotate.z&&u.push(z("z",t.rotate.z)),t.scale!==1&&u.push(se(t.scale===0?2e-4:t.scale));let g={initial:"",final:""};if(u.length){let d=ie(o.transform);g={initial:`transform: matrix3d(${u.reduce(oe,d).join(", ")});`,final:`transform: matrix3d(${d.join(", ")});`};}let w={delayed:"",instant:""};if(b.generated||g.initial){let d=m=>`${m/1e3}s`,f=[],S=m=>({delayed:`${m} ${d(t.duration)} ${t.easing} ${d(t.delay)}`,instant:`${m} ${d(t.duration)} ${t.easing} 0s`});o.transition&&!/all 0s|none 0s/.test(o.transition)&&f.push({delayed:o.transition,instant:o.transition}),b.generated&&f.push(S("opacity")),g.initial&&f.push(S("transform")),w={delayed:`transition: ${f.map(m=>m.delayed).join(", ")};`,instant:`transition: ${f.map(m=>m.instant).join(", ")};`};}return {inline:{computed:s,generated:a},opacity:b,position:o.position,transform:g,transition:w}}var x=(...e)=>e.filter(n=>n!=="").join(" "),le=()=>({delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:false,container:document.documentElement,desktop:true,mobile:true,reset:false,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:()=>{},afterReveal:()=>{},beforeReset:()=>{},beforeReveal:()=>{}}),v=null,T=null,l={containers:{},elements:{},history:[],sequences:{}},G=true,O=null,R=0,Q=false,ce=0,H=()=>ce++;function V(e,n=false){let t=e,o=n?t.clientHeight:t.offsetHeight,i=n?t.clientWidth:t.offsetWidth,r=0,s=0,a=t;for(;a;)isNaN(a.offsetTop)||(r+=a.offsetTop),isNaN(a.offsetLeft)||(s+=a.offsetLeft),a=a.offsetParent;return {bounds:{top:r,right:s+i,bottom:r+o,left:s},height:o,width:i}}var de=e=>e.node===document.documentElement?{top:window.pageYOffset,left:window.pageXOffset}:{top:e.node.scrollTop,left:e.node.scrollLeft};function ue(e){let n=l.containers[e.containerId];if(!n||!n.geometry||!n.scroll||!e.geometry)return false;let t=Math.max(0,Math.min(1,e.config.viewFactor)),o=e.config.viewOffset,i=e.geometry,r={top:i.bounds.top+i.height*t,right:i.bounds.right-i.width*t,bottom:i.bounds.bottom-i.height*t,left:i.bounds.left+i.width*t},s={top:n.geometry.bounds.top+n.scroll.top+o.top,right:n.geometry.bounds.right+n.scroll.left-o.right,bottom:n.geometry.bounds.bottom+n.scroll.top-o.bottom,left:n.geometry.bounds.left+n.scroll.left+o.left};return r.top<s.bottom&&r.right>s.left&&r.bottom>s.top&&r.left<s.right||e.styles.position==="fixed"}function K(e,n=false){let t=n?e.config.duration+e.config.delay:e.config.duration,o=0;e.timer&&(o=Date.now()-e.timer.start,clearTimeout(e.timer.clock)),(e.revealed?e.config.beforeReveal:e.config.beforeReset)(e.node),e.timer={start:Date.now(),clock:setTimeout(()=>{(e.revealed?e.config.afterReveal:e.config.afterReset)(e.node),e.timer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&W(e.node);},t-o)};}function fe(e,n){let t=e.styles;e.revealed=e.seen=true,p(e.node,x(t.inline.generated,t.opacity.computed,t.transform.final,n?t.transition.delayed:t.transition.instant)),K(e,n);}function me(e){let n=e.styles;e.revealed=false,p(e.node,x(n.inline.generated,n.opacity.generated,n.transform.initial,n.transition.instant)),K(e);}function M(e,n={}){let t=n.pristine||G,o=e.config.useDelay,i=o==="always"||o==="onload"&&t||o==="once"&&!e.seen;if(n.reveal||e.visible&&!e.revealed)return fe(e,i);if(n.reset||!e.visible&&e.revealed&&e.config.reset)return me(e)}function U(e,n){let t=[],o=[],i=[];return e.members.forEach((r,s)=>{l.elements[r]?.[n]&&o.push(s);}),o.length&&e.members.forEach((r,s)=>{let a=l.elements[r];a&&!a[n]&&(s<o[0]?t:i).push(s);}),{head:t,body:o,foot:i}}function I(e,n,t,o){let i=t<0?"head":"foot",r=l.elements[e.members[n+t]];e.blocked[i]=true,setTimeout(()=>{e.blocked[i]=false,r&&Z(r,o);},e.interval);}function Z(e,n=G){if(!e.visible&&e.revealed&&e.config.reset)return M(e,{reset:true});let t=e.sequence&&l.sequences[e.sequence.id];if(!t||!e.sequence)return;let o=e.sequence.index,i=U(t,"visible"),r=U(t,"revealed");if(!r.body.length){let a=i.body[0],c=l.elements[t.members[a]];if(c)return I(t,a,-1,n),I(t,a,1,n),M(c,{reveal:true,pristine:n})}let s=a=>a[a.length-1];if(!t.blocked.head&&o===s(r.head)&&o>=(i.body[0]??1/0))return I(t,o,-1,n),M(e,{reveal:true,pristine:n});if(!t.blocked.foot&&o===r.foot[0]&&o<=(s(i.body)??-1/0))return I(t,o,1,n),M(e,{reveal:true,pristine:n})}function be(){R=0;let e=Q;Q=false;for(let t of Object.values(l.containers))(e||!t.geometry)&&(t.geometry=V(t.node,true)),t.scroll=de(t);let n=Object.values(l.elements);for(let t of n)(e||!t.geometry)&&(t.geometry=V(t.node)),t.visible=ue(t);for(let t of n)t.sequence?Z(t):M(t);G=false;}function y(e){let n=e?e.type:"init";(n==="init"||n==="resize")&&(Q=true),R||(R=requestAnimationFrame(be));}var E=e=>e.node===document.documentElement?window:e.node;function _(){let e=new Set(Array.from(document.querySelectorAll("[data-sr-id]")).map(o=>parseInt(o.getAttribute("data-sr-id")||"",10)));for(let o of Object.values(l.elements))e.has(o.id)||delete l.elements[o.id];let n=new Set,t=new Set;for(let o of Object.values(l.elements))n.add(o.containerId),o.sequence&&t.add(o.sequence.id);for(let o of Object.values(l.containers))n.has(o.id)||(E(o).removeEventListener("scroll",y),E(o).removeEventListener("resize",y),delete l.containers[o.id]);for(let o of Object.values(l.sequences))t.has(o.id)||delete l.sequences[o.id];}function ee(){O=null,_();let e=Y();for(let n of Object.values(l.elements)){let t=n.styles;e?(n.visible=n.revealed=n.seen=true,p(n.node,x(t.inline.generated,t.opacity.computed,t.transform.final,"transition: none;"))):n.visible?(n.revealed=true,p(n.node,x(t.inline.generated,t.opacity.computed,t.transform.final))):(n.revealed=false,p(n.node,x(t.inline.generated,t.opacity.generated,t.transform.initial)));}if(!e){for(let n of Object.values(l.containers))E(n).addEventListener("scroll",y),E(n).addEventListener("resize",y);y();}}function te(e,n={},t=false){if(!v)return;let o=[],i=n.interval||0,r,s;try{if(i){let c=Math.abs(i);if(isNaN(c))throw new RangeError("Invalid sequence interval.");r={id:H(),interval:Math.max(c,16),members:[],blocked:{head:!1,foot:!1}};}let a=j(e);if(!a.length)throw new Error("Invalid reveal target.");s=[];for(let c of a){let h=c.getAttribute("data-sr-id"),b=h!==null?l.elements[Number(h)]:void 0,u=b?q({},b):{id:H(),node:c,seen:!1,revealed:!1,visible:!1};b&&p(c,b.styles.inline.computed);let g=q({},b?b.config:v,n);if(!g.mobile&&$()||!g.desktop&&!$()){b&&W(c);continue}let w=j(g.container)[0];if(!w)throw new Error("Invalid container.");if(!w.contains(c))continue;let d=[...o,...Object.values(l.containers)].find(f=>f.node===w)?.id;d===void 0&&(d=H(),o.push({id:d,node:w})),u.config=g,u.containerId=d,u.styles=ae(u),r&&(u.sequence={id:r.id,index:r.members.length},r.members.push(u.id)),s.push(u);}for(let c of s)l.elements[c.id]=c,c.node.setAttribute("data-sr-id",String(c.id));}catch(a){return P("Reveal failed.",a.message)}for(let a of o)l.containers[a.id]=a;r&&(l.sequences[r.id]=r),t||(l.history.push({target:e,options:n}),O&&clearTimeout(O),O=setTimeout(ee,0));}function W(e){let n=false;for(let t of j(e)){let o=t.getAttribute("data-sr-id");if(o===null)continue;n=true;let i=l.elements[Number(o)];i&&(i.timer&&clearTimeout(i.timer.clock),p(i.node,i.styles.inline.generated),delete l.elements[i.id]),t.removeAttribute("data-sr-id");}n&&_();}function ge(){for(let e of Object.values(l.elements))p(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id");for(let e of Object.values(l.containers))E(e).removeEventListener("scroll",y),E(e).removeEventListener("resize",y);R&&cancelAnimationFrame(R),R=0,l={containers:{},elements:{},history:[],sequences:{}};}function ve(){for(let e of l.history)te(e.target,e.options,true);ee();}var N=()=>(D()&&document.documentElement.classList.remove("sr"),{reveal(){},clean(){},destroy(){},sync(){},defaults:{},version:J,noop:true});function ne(){if(!D())return false;let e=document.documentElement.style;return ("transform"in e||"WebkitTransform"in e)&&("transition"in e||"WebkitTransition"in e)}function pe(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",()=>{document.body.style.height="100%";},{once:true});}function ye(e={}){if(!D()||!ne())return N();let n;try{if(n=q({},v??le(),e),!j(n.container)[0])throw new Error("Invalid container.")}catch(t){return P("Invalid configuration.",t.message),N()}return v=n,!v.mobile&&$()||!v.desktop&&!$()?(P("This device is disabled.",`desktop: ${v.desktop}`,`mobile: ${v.mobile}`),N()):(pe(),T||(T={reveal:(t,o)=>te(t,o),clean:W,destroy:ge,sync:ve,get defaults(){return v},version:J,noop:false},Object.defineProperty(T,"delegate",{value:y})),T)}var B=ye;B.isSupported=ne;Object.defineProperty(B,"debug",{get:()=>F,set:e=>{typeof e=="boolean"&&(F=e);}});var Re=B;exports.ScrollReveal=B;exports.default=Re;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
type ScrollRevealTarget = string | Element | ArrayLike<Element>;
|
|
2
|
+
interface ScrollRevealOptions {
|
|
3
|
+
delay?: number;
|
|
4
|
+
/** A length with a unit: `'20px'`, `'2em'`, `'50%'`. */
|
|
5
|
+
distance?: string;
|
|
6
|
+
duration?: number;
|
|
7
|
+
easing?: string;
|
|
8
|
+
/** Ms between members of a sequence. Only read from `reveal()` options. */
|
|
9
|
+
interval?: number;
|
|
10
|
+
/** Starting opacity; `null` leaves opacity alone. */
|
|
11
|
+
opacity?: number | null;
|
|
12
|
+
origin?: 'top' | 'right' | 'bottom' | 'left';
|
|
13
|
+
rotate?: {
|
|
14
|
+
x?: number;
|
|
15
|
+
y?: number;
|
|
16
|
+
z?: number;
|
|
17
|
+
};
|
|
18
|
+
scale?: number;
|
|
19
|
+
cleanup?: boolean;
|
|
20
|
+
container?: string | Element;
|
|
21
|
+
desktop?: boolean;
|
|
22
|
+
mobile?: boolean;
|
|
23
|
+
reset?: boolean;
|
|
24
|
+
useDelay?: 'always' | 'once' | 'onload';
|
|
25
|
+
viewFactor?: number;
|
|
26
|
+
viewOffset?: {
|
|
27
|
+
top?: number;
|
|
28
|
+
right?: number;
|
|
29
|
+
bottom?: number;
|
|
30
|
+
left?: number;
|
|
31
|
+
};
|
|
32
|
+
afterReset?: (el: Element) => void;
|
|
33
|
+
afterReveal?: (el: Element) => void;
|
|
34
|
+
beforeReset?: (el: Element) => void;
|
|
35
|
+
beforeReveal?: (el: Element) => void;
|
|
36
|
+
}
|
|
37
|
+
interface ScrollRevealInstance {
|
|
38
|
+
reveal(target: ScrollRevealTarget, options?: ScrollRevealOptions): void;
|
|
39
|
+
clean(target: ScrollRevealTarget): void;
|
|
40
|
+
destroy(): void;
|
|
41
|
+
sync(): void;
|
|
42
|
+
readonly defaults: Required<ScrollRevealOptions>;
|
|
43
|
+
readonly version: string;
|
|
44
|
+
readonly noop: boolean;
|
|
45
|
+
}
|
|
46
|
+
interface ScrollRevealStatic {
|
|
47
|
+
(options?: ScrollRevealOptions): ScrollRevealInstance;
|
|
48
|
+
new (options?: ScrollRevealOptions): ScrollRevealInstance;
|
|
49
|
+
isSupported(): boolean;
|
|
50
|
+
debug: boolean;
|
|
51
|
+
}
|
|
52
|
+
declare const ScrollReveal: ScrollRevealStatic;
|
|
53
|
+
|
|
54
|
+
export { ScrollReveal, type ScrollRevealInstance, type ScrollRevealOptions, type ScrollRevealStatic, type ScrollRevealTarget, ScrollReveal as default };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
type ScrollRevealTarget = string | Element | ArrayLike<Element>;
|
|
2
|
+
interface ScrollRevealOptions {
|
|
3
|
+
delay?: number;
|
|
4
|
+
/** A length with a unit: `'20px'`, `'2em'`, `'50%'`. */
|
|
5
|
+
distance?: string;
|
|
6
|
+
duration?: number;
|
|
7
|
+
easing?: string;
|
|
8
|
+
/** Ms between members of a sequence. Only read from `reveal()` options. */
|
|
9
|
+
interval?: number;
|
|
10
|
+
/** Starting opacity; `null` leaves opacity alone. */
|
|
11
|
+
opacity?: number | null;
|
|
12
|
+
origin?: 'top' | 'right' | 'bottom' | 'left';
|
|
13
|
+
rotate?: {
|
|
14
|
+
x?: number;
|
|
15
|
+
y?: number;
|
|
16
|
+
z?: number;
|
|
17
|
+
};
|
|
18
|
+
scale?: number;
|
|
19
|
+
cleanup?: boolean;
|
|
20
|
+
container?: string | Element;
|
|
21
|
+
desktop?: boolean;
|
|
22
|
+
mobile?: boolean;
|
|
23
|
+
reset?: boolean;
|
|
24
|
+
useDelay?: 'always' | 'once' | 'onload';
|
|
25
|
+
viewFactor?: number;
|
|
26
|
+
viewOffset?: {
|
|
27
|
+
top?: number;
|
|
28
|
+
right?: number;
|
|
29
|
+
bottom?: number;
|
|
30
|
+
left?: number;
|
|
31
|
+
};
|
|
32
|
+
afterReset?: (el: Element) => void;
|
|
33
|
+
afterReveal?: (el: Element) => void;
|
|
34
|
+
beforeReset?: (el: Element) => void;
|
|
35
|
+
beforeReveal?: (el: Element) => void;
|
|
36
|
+
}
|
|
37
|
+
interface ScrollRevealInstance {
|
|
38
|
+
reveal(target: ScrollRevealTarget, options?: ScrollRevealOptions): void;
|
|
39
|
+
clean(target: ScrollRevealTarget): void;
|
|
40
|
+
destroy(): void;
|
|
41
|
+
sync(): void;
|
|
42
|
+
readonly defaults: Required<ScrollRevealOptions>;
|
|
43
|
+
readonly version: string;
|
|
44
|
+
readonly noop: boolean;
|
|
45
|
+
}
|
|
46
|
+
interface ScrollRevealStatic {
|
|
47
|
+
(options?: ScrollRevealOptions): ScrollRevealInstance;
|
|
48
|
+
new (options?: ScrollRevealOptions): ScrollRevealInstance;
|
|
49
|
+
isSupported(): boolean;
|
|
50
|
+
debug: boolean;
|
|
51
|
+
}
|
|
52
|
+
declare const ScrollReveal: ScrollRevealStatic;
|
|
53
|
+
|
|
54
|
+
export { ScrollReveal, type ScrollRevealInstance, type ScrollRevealOptions, type ScrollRevealStatic, type ScrollRevealTarget, ScrollReveal as default };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function Y(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var J="4.0.9",D=()=>typeof window<"u"&&typeof document<"u",C=e=>e!==null&&typeof e=="object"&&Object.prototype.toString.call(e)==="[object Object]";function q(e,...n){for(let t of n)if(C(t))for(let o of Object.keys(t)){let i=t[o];C(i)?(C(e[o])||(e[o]={}),q(e[o],i)):e[o]=i;}return e}function j(e){if(typeof e=="string")try{return Array.from(document.querySelectorAll(e))}catch{return []}return e instanceof Element?[e]:e&&typeof e.length=="number"?Array.from(e).filter(n=>n instanceof Element):[]}var $=(e=navigator.userAgent)=>/Android|iPhone|iPad|iPod/i.test(e),F=false;function P(e,...n){F&&typeof console<"u"&&console.log(`%cScrollReveal: ${e}${n.map(t=>`
|
|
2
|
+
\u2014 ${t}`).join("")}`,"color: #ea654b;");}var k=()=>[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];function oe(e,n){let t=[];for(let o=0;o<4;o++)for(let i=0;i<4;i++){let r=0;for(let s=0;s<4;s++)r+=e[i+4*s]*n[4*o+s];t[i+4*o]=r;}return t}function ie(e){let n=/matrix(3d)?\(([^)]+)\)/.exec(e||"");if(!n)return k();let t=n[2].split(", ").map(parseFloat);if(t.length===16)return t;let o=k();return [o[0],o[1],o[4],o[5],o[12],o[13]]=t,o}function z(e,n){let t=Math.PI/180*n,o=Math.cos(t),i=Math.sin(t),r=k(),[s,a,c,h]=e==="x"?[5,10,6,9]:e==="y"?[0,10,8,2]:[0,5,1,4];return r[s]=r[a]=o,r[c]=i,r[h]=-i,r}function re(e,n){let t=k();return t[e==="X"?12:13]=n,t}function se(e){let n=k();return n[0]=n[5]=e,n}function p(e,n){for(let t of n.split(";")){let o=t.indexOf(":");if(o<1)continue;let i=t.slice(0,o).trim(),r=t.slice(o+1).trim();i&&r&&e.style.setProperty(i,r);}}function ae(e){let{node:n,config:t}=e,o=window.getComputedStyle(n),i=(n.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[],r=i.map(d=>d.trim()),s=`${r.join("; ")};`,a=i.some(d=>/visibility\s?:\s?visible/i.test(d))?s:`${[...r,"visibility: visible"].join("; ")};`,c=parseFloat(o.opacity),h=t.opacity!==null&&!isNaN(parseFloat(String(t.opacity)))?parseFloat(String(t.opacity)):c,b=c!==h?{computed:`opacity: ${c};`,generated:`opacity: ${h};`}:{computed:"",generated:""},u=[];if(parseFloat(t.distance)){let d=t.origin==="top"||t.origin==="bottom"?"Y":"X",f=t.distance;(t.origin==="top"||t.origin==="left")&&(f=f.startsWith("-")?f.slice(1):`-${f}`);let S=f.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g)||[],m=Number(S[0]),A=S[1],L;if(A==="em")L=parseInt(o.fontSize,10)*m;else if(A==="px")L=m;else if(A==="%"){let X=n.getBoundingClientRect();L=(d==="Y"?X.height:X.width)*m/100;}else throw new RangeError("Unrecognized or missing distance unit.");u.push(re(d,L));}t.rotate.x&&u.push(z("x",t.rotate.x)),t.rotate.y&&u.push(z("y",t.rotate.y)),t.rotate.z&&u.push(z("z",t.rotate.z)),t.scale!==1&&u.push(se(t.scale===0?2e-4:t.scale));let g={initial:"",final:""};if(u.length){let d=ie(o.transform);g={initial:`transform: matrix3d(${u.reduce(oe,d).join(", ")});`,final:`transform: matrix3d(${d.join(", ")});`};}let w={delayed:"",instant:""};if(b.generated||g.initial){let d=m=>`${m/1e3}s`,f=[],S=m=>({delayed:`${m} ${d(t.duration)} ${t.easing} ${d(t.delay)}`,instant:`${m} ${d(t.duration)} ${t.easing} 0s`});o.transition&&!/all 0s|none 0s/.test(o.transition)&&f.push({delayed:o.transition,instant:o.transition}),b.generated&&f.push(S("opacity")),g.initial&&f.push(S("transform")),w={delayed:`transition: ${f.map(m=>m.delayed).join(", ")};`,instant:`transition: ${f.map(m=>m.instant).join(", ")};`};}return {inline:{computed:s,generated:a},opacity:b,position:o.position,transform:g,transition:w}}var x=(...e)=>e.filter(n=>n!=="").join(" "),le=()=>({delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:false,container:document.documentElement,desktop:true,mobile:true,reset:false,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:()=>{},afterReveal:()=>{},beforeReset:()=>{},beforeReveal:()=>{}}),v=null,T=null,l={containers:{},elements:{},history:[],sequences:{}},G=true,O=null,R=0,Q=false,ce=0,H=()=>ce++;function V(e,n=false){let t=e,o=n?t.clientHeight:t.offsetHeight,i=n?t.clientWidth:t.offsetWidth,r=0,s=0,a=t;for(;a;)isNaN(a.offsetTop)||(r+=a.offsetTop),isNaN(a.offsetLeft)||(s+=a.offsetLeft),a=a.offsetParent;return {bounds:{top:r,right:s+i,bottom:r+o,left:s},height:o,width:i}}var de=e=>e.node===document.documentElement?{top:window.pageYOffset,left:window.pageXOffset}:{top:e.node.scrollTop,left:e.node.scrollLeft};function ue(e){let n=l.containers[e.containerId];if(!n||!n.geometry||!n.scroll||!e.geometry)return false;let t=Math.max(0,Math.min(1,e.config.viewFactor)),o=e.config.viewOffset,i=e.geometry,r={top:i.bounds.top+i.height*t,right:i.bounds.right-i.width*t,bottom:i.bounds.bottom-i.height*t,left:i.bounds.left+i.width*t},s={top:n.geometry.bounds.top+n.scroll.top+o.top,right:n.geometry.bounds.right+n.scroll.left-o.right,bottom:n.geometry.bounds.bottom+n.scroll.top-o.bottom,left:n.geometry.bounds.left+n.scroll.left+o.left};return r.top<s.bottom&&r.right>s.left&&r.bottom>s.top&&r.left<s.right||e.styles.position==="fixed"}function K(e,n=false){let t=n?e.config.duration+e.config.delay:e.config.duration,o=0;e.timer&&(o=Date.now()-e.timer.start,clearTimeout(e.timer.clock)),(e.revealed?e.config.beforeReveal:e.config.beforeReset)(e.node),e.timer={start:Date.now(),clock:setTimeout(()=>{(e.revealed?e.config.afterReveal:e.config.afterReset)(e.node),e.timer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&W(e.node);},t-o)};}function fe(e,n){let t=e.styles;e.revealed=e.seen=true,p(e.node,x(t.inline.generated,t.opacity.computed,t.transform.final,n?t.transition.delayed:t.transition.instant)),K(e,n);}function me(e){let n=e.styles;e.revealed=false,p(e.node,x(n.inline.generated,n.opacity.generated,n.transform.initial,n.transition.instant)),K(e);}function M(e,n={}){let t=n.pristine||G,o=e.config.useDelay,i=o==="always"||o==="onload"&&t||o==="once"&&!e.seen;if(n.reveal||e.visible&&!e.revealed)return fe(e,i);if(n.reset||!e.visible&&e.revealed&&e.config.reset)return me(e)}function U(e,n){let t=[],o=[],i=[];return e.members.forEach((r,s)=>{l.elements[r]?.[n]&&o.push(s);}),o.length&&e.members.forEach((r,s)=>{let a=l.elements[r];a&&!a[n]&&(s<o[0]?t:i).push(s);}),{head:t,body:o,foot:i}}function I(e,n,t,o){let i=t<0?"head":"foot",r=l.elements[e.members[n+t]];e.blocked[i]=true,setTimeout(()=>{e.blocked[i]=false,r&&Z(r,o);},e.interval);}function Z(e,n=G){if(!e.visible&&e.revealed&&e.config.reset)return M(e,{reset:true});let t=e.sequence&&l.sequences[e.sequence.id];if(!t||!e.sequence)return;let o=e.sequence.index,i=U(t,"visible"),r=U(t,"revealed");if(!r.body.length){let a=i.body[0],c=l.elements[t.members[a]];if(c)return I(t,a,-1,n),I(t,a,1,n),M(c,{reveal:true,pristine:n})}let s=a=>a[a.length-1];if(!t.blocked.head&&o===s(r.head)&&o>=(i.body[0]??1/0))return I(t,o,-1,n),M(e,{reveal:true,pristine:n});if(!t.blocked.foot&&o===r.foot[0]&&o<=(s(i.body)??-1/0))return I(t,o,1,n),M(e,{reveal:true,pristine:n})}function be(){R=0;let e=Q;Q=false;for(let t of Object.values(l.containers))(e||!t.geometry)&&(t.geometry=V(t.node,true)),t.scroll=de(t);let n=Object.values(l.elements);for(let t of n)(e||!t.geometry)&&(t.geometry=V(t.node)),t.visible=ue(t);for(let t of n)t.sequence?Z(t):M(t);G=false;}function y(e){let n=e?e.type:"init";(n==="init"||n==="resize")&&(Q=true),R||(R=requestAnimationFrame(be));}var E=e=>e.node===document.documentElement?window:e.node;function _(){let e=new Set(Array.from(document.querySelectorAll("[data-sr-id]")).map(o=>parseInt(o.getAttribute("data-sr-id")||"",10)));for(let o of Object.values(l.elements))e.has(o.id)||delete l.elements[o.id];let n=new Set,t=new Set;for(let o of Object.values(l.elements))n.add(o.containerId),o.sequence&&t.add(o.sequence.id);for(let o of Object.values(l.containers))n.has(o.id)||(E(o).removeEventListener("scroll",y),E(o).removeEventListener("resize",y),delete l.containers[o.id]);for(let o of Object.values(l.sequences))t.has(o.id)||delete l.sequences[o.id];}function ee(){O=null,_();let e=Y();for(let n of Object.values(l.elements)){let t=n.styles;e?(n.visible=n.revealed=n.seen=true,p(n.node,x(t.inline.generated,t.opacity.computed,t.transform.final,"transition: none;"))):n.visible?(n.revealed=true,p(n.node,x(t.inline.generated,t.opacity.computed,t.transform.final))):(n.revealed=false,p(n.node,x(t.inline.generated,t.opacity.generated,t.transform.initial)));}if(!e){for(let n of Object.values(l.containers))E(n).addEventListener("scroll",y),E(n).addEventListener("resize",y);y();}}function te(e,n={},t=false){if(!v)return;let o=[],i=n.interval||0,r,s;try{if(i){let c=Math.abs(i);if(isNaN(c))throw new RangeError("Invalid sequence interval.");r={id:H(),interval:Math.max(c,16),members:[],blocked:{head:!1,foot:!1}};}let a=j(e);if(!a.length)throw new Error("Invalid reveal target.");s=[];for(let c of a){let h=c.getAttribute("data-sr-id"),b=h!==null?l.elements[Number(h)]:void 0,u=b?q({},b):{id:H(),node:c,seen:!1,revealed:!1,visible:!1};b&&p(c,b.styles.inline.computed);let g=q({},b?b.config:v,n);if(!g.mobile&&$()||!g.desktop&&!$()){b&&W(c);continue}let w=j(g.container)[0];if(!w)throw new Error("Invalid container.");if(!w.contains(c))continue;let d=[...o,...Object.values(l.containers)].find(f=>f.node===w)?.id;d===void 0&&(d=H(),o.push({id:d,node:w})),u.config=g,u.containerId=d,u.styles=ae(u),r&&(u.sequence={id:r.id,index:r.members.length},r.members.push(u.id)),s.push(u);}for(let c of s)l.elements[c.id]=c,c.node.setAttribute("data-sr-id",String(c.id));}catch(a){return P("Reveal failed.",a.message)}for(let a of o)l.containers[a.id]=a;r&&(l.sequences[r.id]=r),t||(l.history.push({target:e,options:n}),O&&clearTimeout(O),O=setTimeout(ee,0));}function W(e){let n=false;for(let t of j(e)){let o=t.getAttribute("data-sr-id");if(o===null)continue;n=true;let i=l.elements[Number(o)];i&&(i.timer&&clearTimeout(i.timer.clock),p(i.node,i.styles.inline.generated),delete l.elements[i.id]),t.removeAttribute("data-sr-id");}n&&_();}function ge(){for(let e of Object.values(l.elements))p(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id");for(let e of Object.values(l.containers))E(e).removeEventListener("scroll",y),E(e).removeEventListener("resize",y);R&&cancelAnimationFrame(R),R=0,l={containers:{},elements:{},history:[],sequences:{}};}function ve(){for(let e of l.history)te(e.target,e.options,true);ee();}var N=()=>(D()&&document.documentElement.classList.remove("sr"),{reveal(){},clean(){},destroy(){},sync(){},defaults:{},version:J,noop:true});function ne(){if(!D())return false;let e=document.documentElement.style;return ("transform"in e||"WebkitTransform"in e)&&("transition"in e||"WebkitTransition"in e)}function pe(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",()=>{document.body.style.height="100%";},{once:true});}function ye(e={}){if(!D()||!ne())return N();let n;try{if(n=q({},v??le(),e),!j(n.container)[0])throw new Error("Invalid container.")}catch(t){return P("Invalid configuration.",t.message),N()}return v=n,!v.mobile&&$()||!v.desktop&&!$()?(P("This device is disabled.",`desktop: ${v.desktop}`,`mobile: ${v.mobile}`),N()):(pe(),T||(T={reveal:(t,o)=>te(t,o),clean:W,destroy:ge,sync:ve,get defaults(){return v},version:J,noop:false},Object.defineProperty(T,"delegate",{value:y})),T)}var B=ye;B.isSupported=ne;Object.defineProperty(B,"debug",{get:()=>F,set:e=>{typeof e=="boolean"&&(F=e);}});var Re=B;export{B as ScrollReveal,Re as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svg-scroll-draw",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.12.0",
|
|
4
4
|
"description": "Scroll-driven animation for the web — draw SVG paths, reveal elements, pin sections, scrub video. Zero dependencies, native CSS fast path, works with React, Vue, Svelte, Solid, Angular, Astro and vanilla JS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svg",
|
|
@@ -59,7 +59,10 @@
|
|
|
59
59
|
"typescript",
|
|
60
60
|
"aos",
|
|
61
61
|
"animate-on-scroll",
|
|
62
|
-
"data-aos"
|
|
62
|
+
"data-aos",
|
|
63
|
+
"scrollreveal",
|
|
64
|
+
"scrollreveal-alternative",
|
|
65
|
+
"scroll-reveal-mit"
|
|
63
66
|
],
|
|
64
67
|
"homepage": "https://svg-scroll-draw.vercel.app",
|
|
65
68
|
"repository": {
|
|
@@ -145,6 +148,9 @@
|
|
|
145
148
|
],
|
|
146
149
|
"aos": [
|
|
147
150
|
"./dist/aos/index.d.ts"
|
|
151
|
+
],
|
|
152
|
+
"scrollreveal": [
|
|
153
|
+
"./dist/scrollreveal/index.d.ts"
|
|
148
154
|
]
|
|
149
155
|
}
|
|
150
156
|
},
|
|
@@ -374,6 +380,16 @@
|
|
|
374
380
|
"default": "./dist/aos/index.cjs"
|
|
375
381
|
}
|
|
376
382
|
},
|
|
383
|
+
"./scrollreveal": {
|
|
384
|
+
"import": {
|
|
385
|
+
"types": "./dist/scrollreveal/index.d.mts",
|
|
386
|
+
"default": "./dist/scrollreveal/index.mjs"
|
|
387
|
+
},
|
|
388
|
+
"require": {
|
|
389
|
+
"types": "./dist/scrollreveal/index.d.ts",
|
|
390
|
+
"default": "./dist/scrollreveal/index.cjs"
|
|
391
|
+
}
|
|
392
|
+
},
|
|
377
393
|
"./package.json": "./package.json"
|
|
378
394
|
},
|
|
379
395
|
"scripts": {
|
|
@@ -393,9 +409,10 @@
|
|
|
393
409
|
"devDependencies": {
|
|
394
410
|
"@playwright/test": "^1.62.1",
|
|
395
411
|
"@types/react": "^18.0.0",
|
|
396
|
-
"esbuild": "^0.27.7",
|
|
397
412
|
"@vitest/coverage-v8": "^2.0.0",
|
|
413
|
+
"esbuild": "^0.27.7",
|
|
398
414
|
"jsdom": "^25.0.0",
|
|
415
|
+
"scrollreveal": "^4.0.9",
|
|
399
416
|
"solid-js": "^1.9.13",
|
|
400
417
|
"tsup": "^8.0.0",
|
|
401
418
|
"typescript": "^5.0.0",
|
|
@@ -406,7 +423,8 @@
|
|
|
406
423
|
"./dist/web-component/*",
|
|
407
424
|
"./dist/cdn/*",
|
|
408
425
|
"./src/web-component/*",
|
|
409
|
-
"./src/cdn.ts"
|
|
426
|
+
"./src/cdn.ts",
|
|
427
|
+
"./src/scrollreveal/cdn.ts"
|
|
410
428
|
],
|
|
411
429
|
"engines": {
|
|
412
430
|
"node": ">=18"
|