svg-scroll-draw 2.11.0 → 2.13.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 +68 -0
- package/dist/cdn/scrollreveal.global.js +2 -0
- package/dist/cdn/vivus.global.js +1 -0
- package/dist/scrollreveal/index.cjs +2 -0
- package/dist/scrollreveal/index.d.mts +54 -0
- package/dist/scrollreveal/index.d.ts +54 -0
- package/dist/scrollreveal/index.mjs +2 -0
- package/dist/vivus/index.cjs +2 -0
- package/dist/vivus/index.d.mts +100 -0
- package/dist/vivus/index.d.ts +100 -0
- package/dist/vivus/index.mjs +2 -0
- package/package.json +41 -4
- package/dist/aos/index.d.mts +0 -53
- package/dist/aos/index.d.ts +0 -53
- package/dist/cinematic/index.d.mts +0 -72
- package/dist/cinematic/index.d.ts +0 -72
- package/dist/devtools/index.d.mts +0 -12
- package/dist/devtools/index.d.ts +0 -12
- package/dist/text/index.d.mts +0 -52
- package/dist/text/index.d.ts +0 -52
package/README.md
CHANGED
|
@@ -31,6 +31,8 @@
|
|
|
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. |
|
|
35
|
+
| `Vivus` | `svg-scroll-draw/vivus` | Drop-in replacement for vivus 0.4: same `new Vivus()` API and output. |
|
|
34
36
|
|
|
35
37
|
All APIs return the same instance object: `{ destroy, replay, pause, resume, seek, getProgress }`.
|
|
36
38
|
|
|
@@ -397,6 +399,68 @@ Differences, on purpose:
|
|
|
397
399
|
|
|
398
400
|
---
|
|
399
401
|
|
|
402
|
+
## ScrollReveal drop-in — MIT instead of GPL
|
|
403
|
+
|
|
404
|
+
On [ScrollReveal](https://scrollrevealjs.org)? It is GPL-3.0 (with a paid licence for commercial work)
|
|
405
|
+
and has not shipped since 4.0.9. `svg-scroll-draw/scrollreveal` is an independent, MIT-licensed
|
|
406
|
+
implementation of the same API, so the move is an import change. 4.5 KB gzipped, against 5.6 KB.
|
|
407
|
+
|
|
408
|
+
```diff
|
|
409
|
+
- import ScrollReveal from 'scrollreveal';
|
|
410
|
+
+ import ScrollReveal from 'svg-scroll-draw/scrollreveal';
|
|
411
|
+
|
|
412
|
+
ScrollReveal({ distance: '40px', duration: 800 }).reveal('.card', { interval: 80 });
|
|
413
|
+
```
|
|
414
|
+
|
|
415
|
+
No bundler? `<script src="https://unpkg.com/svg-scroll-draw/dist/cdn/scrollreveal.global.js"></script>`
|
|
416
|
+
defines `window.ScrollReveal` as the function, like ScrollReveal's own file. With CommonJS,
|
|
417
|
+
`require('svg-scroll-draw/scrollreveal').default` is the function.
|
|
418
|
+
|
|
419
|
+
Every option behaves as in 4.0.9 — `distance` / `origin`, `opacity`, `scale`, `rotate`, `duration`,
|
|
420
|
+
`delay`, `easing`, `interval` sequences, `reset`, `useDelay`, `viewFactor`, `viewOffset`,
|
|
421
|
+
`container`, `mobile` / `desktop`, `cleanup` and the four callbacks — as do `reveal`, `clean`, `sync`,
|
|
422
|
+
`destroy`, `data-sr-id` and the `sr` class on `<html>` for FOUC-hiding CSS. The browser suite runs
|
|
423
|
+
ScrollReveal 4.0.9 beside it in Chromium, Firefox and WebKit and fails if any element's inline `style`
|
|
424
|
+
differs by a character at any scroll stop, or if any callback fires differently.
|
|
425
|
+
|
|
426
|
+
Differences, on purpose:
|
|
427
|
+
|
|
428
|
+
- Nothing happens on import. ScrollReveal adds the `sr` class and `body { height: 100% }` as soon as its
|
|
429
|
+
script loads; this does both on the first `ScrollReveal()` call, keeping the import SSR-safe.
|
|
430
|
+
- `prefers-reduced-motion: reduce` shows every element in its final state, with no transition.
|
|
431
|
+
|
|
432
|
+
---
|
|
433
|
+
|
|
434
|
+
## vivus drop-in — keep your `new Vivus()` code
|
|
435
|
+
|
|
436
|
+
On [vivus](https://github.com/maxwellito/vivus)? It has not shipped since 0.4.6 (April 2021).
|
|
437
|
+
`svg-scroll-draw/vivus` runs the same API, so the move is an import change. 3.9 KB gzipped, against
|
|
438
|
+
4.1 KB.
|
|
439
|
+
|
|
440
|
+
```diff
|
|
441
|
+
- import Vivus from 'vivus';
|
|
442
|
+
+ import Vivus from 'svg-scroll-draw/vivus';
|
|
443
|
+
|
|
444
|
+
new Vivus('my-svg', { type: 'oneByOne', duration: 200 }, () => console.log('drawn'));
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
No bundler? `<script src="https://unpkg.com/svg-scroll-draw/dist/cdn/vivus.global.js"></script>`
|
|
448
|
+
defines `window.Vivus`. With CommonJS, `require('svg-scroll-draw/vivus').default` is the class.
|
|
449
|
+
|
|
450
|
+
Every option, every animation type (`delayed`, `sync`, `async`, `nsync`, `oneByOne`, `scenario`,
|
|
451
|
+
`scenario-sync`), the `start` modes, `file` and `<object>` loading, the `data-start` / `data-duration` /
|
|
452
|
+
`data-delay` / `data-async` / `data-ignore` attributes, `Vivus.EASE` and the other timing functions, and
|
|
453
|
+
`play` / `stop` / `reset` / `finish` / `setFrameProgress` / `getStatus` / `destroy` / `recalc` behave as
|
|
454
|
+
in 0.4.6. Shapes become `<path>`s with the same `d` strings, and dashes get the same values: the browser
|
|
455
|
+
suite runs vivus 0.4.6 beside it across nine configurations and requires the SVG markup to match exactly
|
|
456
|
+
at every point of the animation. Like vivus, the clock is the animation frame.
|
|
457
|
+
|
|
458
|
+
One difference, on purpose: under `prefers-reduced-motion: reduce`, `play()` jumps to the end and still
|
|
459
|
+
fires its callbacks. When you want the stroke to follow the scroll instead of a clock, use
|
|
460
|
+
[`scrollDraw`](#scrolldraw--svg-path-drawing-v1-api-unchanged) from the same package.
|
|
461
|
+
|
|
462
|
+
---
|
|
463
|
+
|
|
400
464
|
## Instance API
|
|
401
465
|
|
|
402
466
|
Every function returns the same instance object:
|
|
@@ -488,6 +552,8 @@ devtools.highlight('#my-element'); // outline for 2 seconds
|
|
|
488
552
|
| `svg-scroll-draw/cinematic` | `Cinematic` |
|
|
489
553
|
| `svg-scroll-draw/devtools` | `devtools` (dev-only) |
|
|
490
554
|
| `svg-scroll-draw/aos` | `AOS` (default), `init`, `refresh`, `refreshHard`, `destroy` |
|
|
555
|
+
| `svg-scroll-draw/scrollreveal` | `ScrollReveal` (default and named) |
|
|
556
|
+
| `svg-scroll-draw/vivus` | `Vivus` (default and named) |
|
|
491
557
|
|
|
492
558
|
---
|
|
493
559
|
|
|
@@ -500,6 +566,8 @@ devtools.highlight('#my-element'); // outline for 2 seconds
|
|
|
500
566
|
| `svg-scroll-draw/reveal` | 4.5 KB |
|
|
501
567
|
| `svg-scroll-draw/text` | 2.5 KB |
|
|
502
568
|
| `svg-scroll-draw/video` | 2.0 KB |
|
|
569
|
+
| `svg-scroll-draw/scrollreveal` | 4.5 KB |
|
|
570
|
+
| `svg-scroll-draw/vivus` | 3.9 KB |
|
|
503
571
|
| `svg-scroll-draw/aos` (styles included) | 3.0 KB |
|
|
504
572
|
| `svg-scroll-draw/snap` | 1.7 KB |
|
|
505
573
|
| `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 @@
|
|
|
1
|
+
"use strict";(()=>{function g(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}function m(r,...t){}var E=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],L=["inViewport","manual","autostart"];function u(r,t){let e=parseInt(r,10);return e>=0?e:t}function V(r){if(typeof window>"u")return!1;let t=window,e=i=>typeof t[i]=="function"&&r instanceof t[i];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var y=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],$=["line","ellipse","circle","polygon","polyline","rect"],S="http://www.w3.org/2000/svg";function v(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let i=[];for(let s=0;s<t.length;s+=2)i.push(`${t[s]},${t[s+1]}`);t=i}let e=`M${t[0]}`;for(let i=1;i<t.length;i++)t[i].indexOf(",")!==-1&&(e+=`L${t[i]}`);return e}function b(r,t,e,i){let s=parseFloat(e)||0,a=parseFloat(i)||0,n=parseFloat(r)||0,o=parseFloat(t)||0,l=n-s,h=n+s;return`M${l},${o}A${s},${a} 0,1,1 ${h},${o}A${s},${a} 0,1,1 ${l},${o}`}var x={line:r=>`M${r.x1||0},${r.y1||0}L${r.x2||0},${r.y2||0}`,rect(r){let t=parseFloat(r.x)||0,e=parseFloat(r.y)||0,i=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,n=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?n:a,0),i/2),n=Math.min(Math.max(n<0?a:n,0),s/2);let o=`A ${a},${n},0,0,1,`;return`M ${t+a},${e} L ${t+i-a},${e} ${o}${t+i},${e+n} L ${t+i},${e+s-n} ${o}${t+i-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-n} L ${t},${e+n} ${o}${t+a},${e}`}return`M${t} ${e} L${t+i} ${e} L${t+i} ${e+s} L${t} ${e+s} Z`},polyline:v,polygon:r=>`${v(r)}Z`,ellipse:r=>b(r.cx,r.cy,r.rx,r.ry),circle:r=>b(r.cx,r.cy,r.r,r.r)};function A(r){for(let t of Array.from(r.querySelectorAll($.join(",")))){let e={};for(let{name:a,value:n}of Array.from(t.attributes)){if(y.indexOf(a)!==-1&&n.indexOf("%")!==-1)throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");e[a]=n}let i=x[t.tagName.toLowerCase()](e),s=document.createElementNS(S,"path");for(let{name:a,value:n}of Array.from(t.attributes))y.indexOf(a)===-1&&s.setAttribute(a,n);s.setAttribute("d",i),t.parentNode?.replaceChild(s,t)}}var c=class c{constructor(t,e,i){this.isReady=!1;this.type="delayed";this.start="inViewport";this.duration=120;this.delay=null;this.dashGap=1;this.forceRender=!1;this.reverseStack=!1;this.selfDestroy=!1;this.ignoreInvisible=!1;this.animTimingFunction=c.LINEAR;this.pathTimingFunction=c.LINEAR;this.callback=()=>{};this.map=[];this.frameLength=0;this.currentFrame=0;this.delayUnit=0;this.speed=1;this.handle=null;this.instanceCallback=null;this.mustRecalcScale=null;this.viewportListener=null;this.setElement(t,e),this.setOptions(e),this.setCallback(i),this.isReady&&this.init()}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let i=t;if(typeof i=="string"){let s=document.getElementById(i);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');i=s}if(this.parentEl=i,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let n=a.querySelector("svg");if(!n)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=n,n.setAttribute("width","100%"),n.setAttribute("height","100%"),this.parentEl.appendChild(n),this.isReady=!0,this.init()}),s.open("GET",e.file),s.send();return}if(V(i)){this.el=i,this.isReady=!0;return}if(i instanceof HTMLObjectElement){let s=i,a=n=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&n)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");o&&(s.getAttribute("built-by-vivus")&&(this.parentEl.insertBefore(o,s),this.parentEl.removeChild(s),o.setAttribute("width","100%"),o.setAttribute("height","100%")),this.el=o,this.isReady=!0,this.init())};a(),this.isReady||s.addEventListener("load",a);return}throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}setOptions(t){if(t!==void 0&&(t===null||t.constructor!==Object))throw new Error('Vivus [constructor]: "options" parameter must be an object');let e=t||{};if(e.type&&E.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&L.indexOf(e.start)===-1)throw new Error(`Vivus [constructor]: ${e.start} is not an existing \`start\` option`);this.type=e.type||"delayed",this.start=e.start||"inViewport";let i=navigator.userAgent,s=i.indexOf("MSIE")!==-1||i.indexOf("Trident/")!==-1||i.indexOf("Edge/")!==-1;if(this.duration=u(e.duration,120),this.delay=u(e.delay,null),this.dashGap=u(e.dashGap,1),this.forceRender=Object.prototype.hasOwnProperty.call(e,"forceRender")?!!e.forceRender:s,this.reverseStack=!!e.reverseStack,this.selfDestroy=!!e.selfDestroy,this.onReady=e.onReady,this.map=[],this.ignoreInvisible=Object.prototype.hasOwnProperty.call(e,"ignoreInvisible")?!!e.ignoreInvisible:!1,this.animTimingFunction=e.animTimingFunction||c.LINEAR,this.pathTimingFunction=e.pathTimingFunction||c.LINEAR,this.delay!==null&&this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")}setCallback(t){if(t&&typeof t!="function")throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||(()=>{})}mapping(){let t=0,e=0,i=0,s=!1,a=Array.from(this.el.querySelectorAll("path"));a.forEach((n,o)=>{if(this.isInvisible(n))return;let l={el:n,length:0,startAt:0,duration:0,isResizeSensitive:!1},h=1;if(n.getAttribute("vector-effect")==="non-scaling-stroke"){let d=n.getBoundingClientRect(),f=n.getBBox();h=Math.max(d.width/f.width,d.height/f.height),l.isResizeSensitive=!0,s=!0}if(l.length=Math.ceil(n.getTotalLength()*h),isNaN(l.length)){m("vivus: cannot retrieve a path element length",n);return}this.map.push(l),n.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,n.style.strokeDashoffset=String(l.length+this.dashGap),l.length+=this.dashGap,e+=l.length,this.renderPath(o)}),s&&m("vivus: this SVG contains non-scaling-strokes. Call instance.recalc() when the SVG is resized."),e=e===0?1:e,this.delay=this.delay===null?this.duration/3:this.delay,this.delayUnit=this.delay/(a.length>1?a.length-1:1),this.reverseStack&&this.map.reverse(),this.map.forEach((n,o)=>{let l=()=>{let h={};for(let{name:d,value:f}of Array.from(n.el.attributes))h[d]=f;return h};switch(this.type){case"delayed":n.startAt=this.delayUnit*o,n.duration=this.duration-this.delay;break;case"oneByOne":n.startAt=i/e*this.duration,n.duration=n.length/e*this.duration;break;case"sync":case"async":case"nsync":n.startAt=0,n.duration=this.duration;break;case"scenario-sync":{let h=l();n.startAt=t+(u(h["data-delay"],this.delayUnit)||0),n.duration=u(h["data-duration"],this.duration),t=h["data-async"]!==void 0?n.startAt:n.startAt+n.duration,this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}case"scenario":{let h=l();n.startAt=u(h["data-start"],this.delayUnit)||0,n.duration=u(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}}i+=n.length,this.frameLength=this.frameLength||this.duration})}recalc(){this.mustRecalcScale||(this.mustRecalcScale=requestAnimationFrame(()=>this.performLineRecalc()))}performLineRecalc(){for(let t of this.map){if(!t.isResizeSensitive)continue;let e=t.el.getBoundingClientRect(),i=t.el.getBBox(),s=Math.max(e.width/i.width,e.height/i.height);t.length=Math.ceil(t.el.getTotalLength()*s),t.el.style.strokeDasharray=`${t.length} ${t.length+this.dashGap*2}`}this.trace(),this.mustRecalcScale=null}draw(){if(this.currentFrame+=this.speed,this.currentFrame<=0)this.stop(),this.reset();else if(this.currentFrame>=this.frameLength)this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy();else{this.trace(),this.handle=requestAnimationFrame(()=>this.draw());return}this.finished()}finished(){if(this.callback(this),this.instanceCallback){let t=this.instanceCallback;this.instanceCallback=null,t(this)}}trace(){let t=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength;this.map.forEach((e,i)=>{let s=this.pathTimingFunction(Math.max(0,Math.min(1,(t-e.startAt)/e.duration)));e.progress!==s&&(e.progress=s,e.el.style.strokeDashoffset=String(Math.floor(e.length*(1-s))),this.renderPath(i))})}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let i=e.el.cloneNode(!0);e.el.parentNode?.replaceChild(i,e.el),e.el=i}init(){this.frameLength=0,this.currentFrame=0,this.map=[],A(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this)}starter(){if(this.start==="manual")return;if(this.start==="autostart"){this.play();return}let t=()=>{this.isInViewport(this.parentEl,1)&&(this.play(),window.removeEventListener("scroll",t),this.viewportListener=null)};this.viewportListener=t,window.addEventListener("scroll",t),t()}getStatus(){return this.currentFrame===0?"start":this.currentFrame===this.frameLength?"end":"progress"}reset(){return this.setFrameProgress(0)}finish(){return this.setFrameProgress(1)}setFrameProgress(t){let e=Math.min(1,Math.max(0,t));return this.currentFrame=Math.round(this.frameLength*e),this.trace(),this}play(t,e){this.instanceCallback=null;let i=t;if(i&&typeof i=="function")this.instanceCallback=i,i=void 0;else if(i&&typeof i!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=i||1,g()?(this.stop(),this.currentFrame=this.speed<0?0:this.frameLength,this.trace(),this.speed>0&&this.selfDestroy&&this.destroy(),this.finished(),this):(this.handle||this.draw(),this)}stop(){return this.handle&&(cancelAnimationFrame(this.handle),this.handle=null),this}destroy(){this.stop(),this.viewportListener&&(window.removeEventListener("scroll",this.viewportListener),this.viewportListener=null),this.map.forEach((t,e)=>{t.el.style.strokeDashoffset="",t.el.style.strokeDasharray="",this.renderPath(e)})}isInvisible(t){let e=t.getAttribute("data-ignore");if(e!==null)return e!=="false";if(this.ignoreInvisible){let i=t.getBoundingClientRect();return!i.width&&!i.height}return!1}isInViewport(t,e=0){let i=window.pageYOffset||document.documentElement.scrollTop,s=i+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),n=i+a.top;return n+a.height*(e||0)<=s&&n+a.height>=i}};c.LINEAR=t=>t,c.EASE=t=>-Math.cos(t*Math.PI)/2+.5,c.EASE_OUT=t=>1-Math.pow(1-t,3),c.EASE_IN=t=>Math.pow(t,3),c.EASE_OUT_BOUNCE=t=>{let e=-Math.cos(t*(.5*Math.PI))+1,i=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(i*(2.5*Math.PI)))+1;return 1-s+a*s};var p=c,w=p;globalThis.Vivus=w;})();
|
|
@@ -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};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});function g(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var w=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function m(r,...t){w&&console.warn(`[svg-scroll-draw] ${r}`,...t);}var E=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],L=["inViewport","manual","autostart"];function u(r,t){let e=parseInt(r,10);return e>=0?e:t}function V(r){if(typeof window>"u")return false;let t=window,e=i=>typeof t[i]=="function"&&r instanceof t[i];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var y=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],$=["line","ellipse","circle","polygon","polyline","rect"],x="http://www.w3.org/2000/svg";function v(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let i=[];for(let s=0;s<t.length;s+=2)i.push(`${t[s]},${t[s+1]}`);t=i;}let e=`M${t[0]}`;for(let i=1;i<t.length;i++)t[i].indexOf(",")!==-1&&(e+=`L${t[i]}`);return e}function b(r,t,e,i){let s=parseFloat(e)||0,a=parseFloat(i)||0,n=parseFloat(r)||0,o=parseFloat(t)||0,l=n-s,h=n+s;return `M${l},${o}A${s},${a} 0,1,1 ${h},${o}A${s},${a} 0,1,1 ${l},${o}`}var A={line:r=>`M${r.x1||0},${r.y1||0}L${r.x2||0},${r.y2||0}`,rect(r){let t=parseFloat(r.x)||0,e=parseFloat(r.y)||0,i=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,n=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?n:a,0),i/2),n=Math.min(Math.max(n<0?a:n,0),s/2);let o=`A ${a},${n},0,0,1,`;return `M ${t+a},${e} L ${t+i-a},${e} ${o}${t+i},${e+n} L ${t+i},${e+s-n} ${o}${t+i-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-n} L ${t},${e+n} ${o}${t+a},${e}`}return `M${t} ${e} L${t+i} ${e} L${t+i} ${e+s} L${t} ${e+s} Z`},polyline:v,polygon:r=>`${v(r)}Z`,ellipse:r=>b(r.cx,r.cy,r.rx,r.ry),circle:r=>b(r.cx,r.cy,r.r,r.r)};function R(r){for(let t of Array.from(r.querySelectorAll($.join(",")))){let e={};for(let{name:a,value:n}of Array.from(t.attributes)){if(y.indexOf(a)!==-1&&n.indexOf("%")!==-1)throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");e[a]=n;}let i=A[t.tagName.toLowerCase()](e),s=document.createElementNS(x,"path");for(let{name:a,value:n}of Array.from(t.attributes))y.indexOf(a)===-1&&s.setAttribute(a,n);s.setAttribute("d",i),t.parentNode?.replaceChild(s,t);}}var c=class c{constructor(t,e,i){this.isReady=false;this.type="delayed";this.start="inViewport";this.duration=120;this.delay=null;this.dashGap=1;this.forceRender=false;this.reverseStack=false;this.selfDestroy=false;this.ignoreInvisible=false;this.animTimingFunction=c.LINEAR;this.pathTimingFunction=c.LINEAR;this.callback=()=>{};this.map=[];this.frameLength=0;this.currentFrame=0;this.delayUnit=0;this.speed=1;this.handle=null;this.instanceCallback=null;this.mustRecalcScale=null;this.viewportListener=null;this.setElement(t,e),this.setOptions(e),this.setCallback(i),this.isReady&&this.init();}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let i=t;if(typeof i=="string"){let s=document.getElementById(i);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');i=s;}if(this.parentEl=i,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let n=a.querySelector("svg");if(!n)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=n,n.setAttribute("width","100%"),n.setAttribute("height","100%"),this.parentEl.appendChild(n),this.isReady=true,this.init();}),s.open("GET",e.file),s.send();return}if(V(i)){this.el=i,this.isReady=true;return}if(i instanceof HTMLObjectElement){let s=i,a=n=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&n)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");o&&(s.getAttribute("built-by-vivus")&&(this.parentEl.insertBefore(o,s),this.parentEl.removeChild(s),o.setAttribute("width","100%"),o.setAttribute("height","100%")),this.el=o,this.isReady=true,this.init());};a(),this.isReady||s.addEventListener("load",a);return}throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}setOptions(t){if(t!==void 0&&(t===null||t.constructor!==Object))throw new Error('Vivus [constructor]: "options" parameter must be an object');let e=t||{};if(e.type&&E.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&L.indexOf(e.start)===-1)throw new Error(`Vivus [constructor]: ${e.start} is not an existing \`start\` option`);this.type=e.type||"delayed",this.start=e.start||"inViewport";let i=navigator.userAgent,s=i.indexOf("MSIE")!==-1||i.indexOf("Trident/")!==-1||i.indexOf("Edge/")!==-1;if(this.duration=u(e.duration,120),this.delay=u(e.delay,null),this.dashGap=u(e.dashGap,1),this.forceRender=Object.prototype.hasOwnProperty.call(e,"forceRender")?!!e.forceRender:s,this.reverseStack=!!e.reverseStack,this.selfDestroy=!!e.selfDestroy,this.onReady=e.onReady,this.map=[],this.ignoreInvisible=Object.prototype.hasOwnProperty.call(e,"ignoreInvisible")?!!e.ignoreInvisible:false,this.animTimingFunction=e.animTimingFunction||c.LINEAR,this.pathTimingFunction=e.pathTimingFunction||c.LINEAR,this.delay!==null&&this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")}setCallback(t){if(t&&typeof t!="function")throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||(()=>{});}mapping(){let t=0,e=0,i=0,s=false,a=Array.from(this.el.querySelectorAll("path"));a.forEach((n,o)=>{if(this.isInvisible(n))return;let l={el:n,length:0,startAt:0,duration:0,isResizeSensitive:false},h=1;if(n.getAttribute("vector-effect")==="non-scaling-stroke"){let d=n.getBoundingClientRect(),f=n.getBBox();h=Math.max(d.width/f.width,d.height/f.height),l.isResizeSensitive=true,s=true;}if(l.length=Math.ceil(n.getTotalLength()*h),isNaN(l.length)){m("vivus: cannot retrieve a path element length",n);return}this.map.push(l),n.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,n.style.strokeDashoffset=String(l.length+this.dashGap),l.length+=this.dashGap,e+=l.length,this.renderPath(o);}),s&&m("vivus: this SVG contains non-scaling-strokes. Call instance.recalc() when the SVG is resized."),e=e===0?1:e,this.delay=this.delay===null?this.duration/3:this.delay,this.delayUnit=this.delay/(a.length>1?a.length-1:1),this.reverseStack&&this.map.reverse(),this.map.forEach((n,o)=>{let l=()=>{let h={};for(let{name:d,value:f}of Array.from(n.el.attributes))h[d]=f;return h};switch(this.type){case "delayed":n.startAt=this.delayUnit*o,n.duration=this.duration-this.delay;break;case "oneByOne":n.startAt=i/e*this.duration,n.duration=n.length/e*this.duration;break;case "sync":case "async":case "nsync":n.startAt=0,n.duration=this.duration;break;case "scenario-sync":{let h=l();n.startAt=t+(u(h["data-delay"],this.delayUnit)||0),n.duration=u(h["data-duration"],this.duration),t=h["data-async"]!==void 0?n.startAt:n.startAt+n.duration,this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}case "scenario":{let h=l();n.startAt=u(h["data-start"],this.delayUnit)||0,n.duration=u(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}}i+=n.length,this.frameLength=this.frameLength||this.duration;});}recalc(){this.mustRecalcScale||(this.mustRecalcScale=requestAnimationFrame(()=>this.performLineRecalc()));}performLineRecalc(){for(let t of this.map){if(!t.isResizeSensitive)continue;let e=t.el.getBoundingClientRect(),i=t.el.getBBox(),s=Math.max(e.width/i.width,e.height/i.height);t.length=Math.ceil(t.el.getTotalLength()*s),t.el.style.strokeDasharray=`${t.length} ${t.length+this.dashGap*2}`;}this.trace(),this.mustRecalcScale=null;}draw(){if(this.currentFrame+=this.speed,this.currentFrame<=0)this.stop(),this.reset();else if(this.currentFrame>=this.frameLength)this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy();else {this.trace(),this.handle=requestAnimationFrame(()=>this.draw());return}this.finished();}finished(){if(this.callback(this),this.instanceCallback){let t=this.instanceCallback;this.instanceCallback=null,t(this);}}trace(){let t=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength;this.map.forEach((e,i)=>{let s=this.pathTimingFunction(Math.max(0,Math.min(1,(t-e.startAt)/e.duration)));e.progress!==s&&(e.progress=s,e.el.style.strokeDashoffset=String(Math.floor(e.length*(1-s))),this.renderPath(i));});}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let i=e.el.cloneNode(true);e.el.parentNode?.replaceChild(i,e.el),e.el=i;}init(){this.frameLength=0,this.currentFrame=0,this.map=[],R(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this);}starter(){if(this.start==="manual")return;if(this.start==="autostart"){this.play();return}let t=()=>{this.isInViewport(this.parentEl,1)&&(this.play(),window.removeEventListener("scroll",t),this.viewportListener=null);};this.viewportListener=t,window.addEventListener("scroll",t),t();}getStatus(){return this.currentFrame===0?"start":this.currentFrame===this.frameLength?"end":"progress"}reset(){return this.setFrameProgress(0)}finish(){return this.setFrameProgress(1)}setFrameProgress(t){let e=Math.min(1,Math.max(0,t));return this.currentFrame=Math.round(this.frameLength*e),this.trace(),this}play(t,e){this.instanceCallback=null;let i=t;if(i&&typeof i=="function")this.instanceCallback=i,i=void 0;else if(i&&typeof i!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=i||1,g()?(this.stop(),this.currentFrame=this.speed<0?0:this.frameLength,this.trace(),this.speed>0&&this.selfDestroy&&this.destroy(),this.finished(),this):(this.handle||this.draw(),this)}stop(){return this.handle&&(cancelAnimationFrame(this.handle),this.handle=null),this}destroy(){this.stop(),this.viewportListener&&(window.removeEventListener("scroll",this.viewportListener),this.viewportListener=null),this.map.forEach((t,e)=>{t.el.style.strokeDashoffset="",t.el.style.strokeDasharray="",this.renderPath(e);});}isInvisible(t){let e=t.getAttribute("data-ignore");if(e!==null)return e!=="false";if(this.ignoreInvisible){let i=t.getBoundingClientRect();return !i.width&&!i.height}return false}isInViewport(t,e=0){let i=window.pageYOffset||document.documentElement.scrollTop,s=i+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),n=i+a.top;return n+a.height*(e||0)<=s&&n+a.height>=i}};c.LINEAR=t=>t,c.EASE=t=>-Math.cos(t*Math.PI)/2+.5,c.EASE_OUT=t=>1-Math.pow(1-t,3),c.EASE_IN=t=>Math.pow(t,3),c.EASE_OUT_BOUNCE=t=>{let e=-Math.cos(t*(.5*Math.PI))+1,i=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(i*(2.5*Math.PI)))+1;return 1-s+a*s};var p=c,O=p;
|
|
2
|
+
exports.Vivus=p;exports.default=O;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
type VivusType = 'delayed' | 'sync' | 'async' | 'nsync' | 'oneByOne' | 'scenario' | 'scenario-sync';
|
|
2
|
+
type VivusStart = 'inViewport' | 'manual' | 'autostart';
|
|
3
|
+
type VivusTiming = (x: number) => number;
|
|
4
|
+
type VivusCallback = (instance: Vivus) => void;
|
|
5
|
+
interface VivusOptions {
|
|
6
|
+
type?: VivusType;
|
|
7
|
+
/** Load the SVG from this URL into `element` instead of using markup. */
|
|
8
|
+
file?: string;
|
|
9
|
+
start?: VivusStart;
|
|
10
|
+
/** Animation length in frames. Default 120. */
|
|
11
|
+
duration?: number;
|
|
12
|
+
/** For `delayed`: frames between the first and last path starting. Default duration / 3. */
|
|
13
|
+
delay?: number;
|
|
14
|
+
/** Extra gap in the dash pattern, so the line start never shows early. Default 1. */
|
|
15
|
+
dashGap?: number;
|
|
16
|
+
/** Clone-and-replace each path after every update (an old IE/Edge repaint hack). */
|
|
17
|
+
forceRender?: boolean;
|
|
18
|
+
reverseStack?: boolean;
|
|
19
|
+
selfDestroy?: boolean;
|
|
20
|
+
onReady?: VivusCallback;
|
|
21
|
+
ignoreInvisible?: boolean;
|
|
22
|
+
pathTimingFunction?: VivusTiming;
|
|
23
|
+
animTimingFunction?: VivusTiming;
|
|
24
|
+
}
|
|
25
|
+
interface PathRecord {
|
|
26
|
+
el: SVGPathElement;
|
|
27
|
+
length: number;
|
|
28
|
+
startAt: number;
|
|
29
|
+
duration: number;
|
|
30
|
+
isResizeSensitive: boolean;
|
|
31
|
+
progress?: number;
|
|
32
|
+
}
|
|
33
|
+
declare class Vivus {
|
|
34
|
+
static LINEAR: VivusTiming;
|
|
35
|
+
static EASE: VivusTiming;
|
|
36
|
+
static EASE_OUT: VivusTiming;
|
|
37
|
+
static EASE_IN: VivusTiming;
|
|
38
|
+
static EASE_OUT_BOUNCE: VivusTiming;
|
|
39
|
+
el: Element;
|
|
40
|
+
parentEl: Element;
|
|
41
|
+
isReady: boolean;
|
|
42
|
+
type: VivusType;
|
|
43
|
+
start: VivusStart;
|
|
44
|
+
duration: number;
|
|
45
|
+
delay: number | null;
|
|
46
|
+
dashGap: number;
|
|
47
|
+
forceRender: boolean;
|
|
48
|
+
reverseStack: boolean;
|
|
49
|
+
selfDestroy: boolean;
|
|
50
|
+
ignoreInvisible: boolean;
|
|
51
|
+
onReady?: VivusCallback;
|
|
52
|
+
animTimingFunction: VivusTiming;
|
|
53
|
+
pathTimingFunction: VivusTiming;
|
|
54
|
+
callback: VivusCallback;
|
|
55
|
+
map: PathRecord[];
|
|
56
|
+
frameLength: number;
|
|
57
|
+
currentFrame: number;
|
|
58
|
+
delayUnit: number;
|
|
59
|
+
speed: number;
|
|
60
|
+
handle: number | null;
|
|
61
|
+
private instanceCallback;
|
|
62
|
+
private mustRecalcScale;
|
|
63
|
+
private viewportListener;
|
|
64
|
+
constructor(element: string | Element, options?: VivusOptions, callback?: VivusCallback);
|
|
65
|
+
private setElement;
|
|
66
|
+
private setOptions;
|
|
67
|
+
private setCallback;
|
|
68
|
+
/** Measure every path, set its dashes, and work out when each one draws. */
|
|
69
|
+
mapping(): void;
|
|
70
|
+
/** Re-measure `vector-effect: non-scaling-stroke` paths on the next frame (after a resize). */
|
|
71
|
+
recalc(): void;
|
|
72
|
+
performLineRecalc(): void;
|
|
73
|
+
/** One frame: advance by `speed`, render, and finish at either end. */
|
|
74
|
+
draw(): void;
|
|
75
|
+
private finished;
|
|
76
|
+
/** Render the current frame to every path's dash offset. */
|
|
77
|
+
trace(): void;
|
|
78
|
+
renderPath(index: number): void;
|
|
79
|
+
init(): void;
|
|
80
|
+
private starter;
|
|
81
|
+
/** `'start'`, `'progress'` or `'end'`. */
|
|
82
|
+
getStatus(): 'start' | 'progress' | 'end';
|
|
83
|
+
reset(): this;
|
|
84
|
+
finish(): this;
|
|
85
|
+
/** Jump to a point (0–1) and render it. */
|
|
86
|
+
setFrameProgress(progress: number): this;
|
|
87
|
+
/**
|
|
88
|
+
* Animate at `speed` frames per frame (negative plays backwards). The callback
|
|
89
|
+
* may be given alone, as the first argument.
|
|
90
|
+
*/
|
|
91
|
+
play(speed?: number | VivusCallback, callback?: VivusCallback): this;
|
|
92
|
+
stop(): this;
|
|
93
|
+
/** Stop and remove every dash style vivus set. */
|
|
94
|
+
destroy(): void;
|
|
95
|
+
isInvisible(el: Element): boolean;
|
|
96
|
+
/** Whether `el` is in view; with `h` = 1 its whole height must fit above the fold. */
|
|
97
|
+
isInViewport(el: Element, h?: number): boolean;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
export { Vivus, type VivusCallback, type VivusOptions, type VivusStart, type VivusTiming, type VivusType, Vivus as default };
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
type VivusType = 'delayed' | 'sync' | 'async' | 'nsync' | 'oneByOne' | 'scenario' | 'scenario-sync';
|
|
2
|
+
type VivusStart = 'inViewport' | 'manual' | 'autostart';
|
|
3
|
+
type VivusTiming = (x: number) => number;
|
|
4
|
+
type VivusCallback = (instance: Vivus) => void;
|
|
5
|
+
interface VivusOptions {
|
|
6
|
+
type?: VivusType;
|
|
7
|
+
/** Load the SVG from this URL into `element` instead of using markup. */
|
|
8
|
+
file?: string;
|
|
9
|
+
start?: VivusStart;
|
|
10
|
+
/** Animation length in frames. Default 120. */
|
|
11
|
+
duration?: number;
|
|
12
|
+
/** For `delayed`: frames between the first and last path starting. Default duration / 3. */
|
|
13
|
+
delay?: number;
|
|
14
|
+
/** Extra gap in the dash pattern, so the line start never shows early. Default 1. */
|
|
15
|
+
dashGap?: number;
|
|
16
|
+
/** Clone-and-replace each path after every update (an old IE/Edge repaint hack). */
|
|
17
|
+
forceRender?: boolean;
|
|
18
|
+
reverseStack?: boolean;
|
|
19
|
+
selfDestroy?: boolean;
|
|
20
|
+
onReady?: VivusCallback;
|
|
21
|
+
ignoreInvisible?: boolean;
|
|
22
|
+
pathTimingFunction?: VivusTiming;
|
|
23
|
+
animTimingFunction?: VivusTiming;
|
|
24
|
+
}
|
|
25
|
+
interface PathRecord {
|
|
26
|
+
el: SVGPathElement;
|
|
27
|
+
length: number;
|
|
28
|
+
startAt: number;
|
|
29
|
+
duration: number;
|
|
30
|
+
isResizeSensitive: boolean;
|
|
31
|
+
progress?: number;
|
|
32
|
+
}
|
|
33
|
+
declare class Vivus {
|
|
34
|
+
static LINEAR: VivusTiming;
|
|
35
|
+
static EASE: VivusTiming;
|
|
36
|
+
static EASE_OUT: VivusTiming;
|
|
37
|
+
static EASE_IN: VivusTiming;
|
|
38
|
+
static EASE_OUT_BOUNCE: VivusTiming;
|
|
39
|
+
el: Element;
|
|
40
|
+
parentEl: Element;
|
|
41
|
+
isReady: boolean;
|
|
42
|
+
type: VivusType;
|
|
43
|
+
start: VivusStart;
|
|
44
|
+
duration: number;
|
|
45
|
+
delay: number | null;
|
|
46
|
+
dashGap: number;
|
|
47
|
+
forceRender: boolean;
|
|
48
|
+
reverseStack: boolean;
|
|
49
|
+
selfDestroy: boolean;
|
|
50
|
+
ignoreInvisible: boolean;
|
|
51
|
+
onReady?: VivusCallback;
|
|
52
|
+
animTimingFunction: VivusTiming;
|
|
53
|
+
pathTimingFunction: VivusTiming;
|
|
54
|
+
callback: VivusCallback;
|
|
55
|
+
map: PathRecord[];
|
|
56
|
+
frameLength: number;
|
|
57
|
+
currentFrame: number;
|
|
58
|
+
delayUnit: number;
|
|
59
|
+
speed: number;
|
|
60
|
+
handle: number | null;
|
|
61
|
+
private instanceCallback;
|
|
62
|
+
private mustRecalcScale;
|
|
63
|
+
private viewportListener;
|
|
64
|
+
constructor(element: string | Element, options?: VivusOptions, callback?: VivusCallback);
|
|
65
|
+
private setElement;
|
|
66
|
+
private setOptions;
|
|
67
|
+
private setCallback;
|
|
68
|
+
/** Measure every path, set its dashes, and work out when each one draws. */
|
|
69
|
+
mapping(): void;
|
|
70
|
+
/** Re-measure `vector-effect: non-scaling-stroke` paths on the next frame (after a resize). */
|
|
71
|
+
recalc(): void;
|
|
72
|
+
performLineRecalc(): void;
|
|
73
|
+
/** One frame: advance by `speed`, render, and finish at either end. */
|
|
74
|
+
draw(): void;
|
|
75
|
+
private finished;
|
|
76
|
+
/** Render the current frame to every path's dash offset. */
|
|
77
|
+
trace(): void;
|
|
78
|
+
renderPath(index: number): void;
|
|
79
|
+
init(): void;
|
|
80
|
+
private starter;
|
|
81
|
+
/** `'start'`, `'progress'` or `'end'`. */
|
|
82
|
+
getStatus(): 'start' | 'progress' | 'end';
|
|
83
|
+
reset(): this;
|
|
84
|
+
finish(): this;
|
|
85
|
+
/** Jump to a point (0–1) and render it. */
|
|
86
|
+
setFrameProgress(progress: number): this;
|
|
87
|
+
/**
|
|
88
|
+
* Animate at `speed` frames per frame (negative plays backwards). The callback
|
|
89
|
+
* may be given alone, as the first argument.
|
|
90
|
+
*/
|
|
91
|
+
play(speed?: number | VivusCallback, callback?: VivusCallback): this;
|
|
92
|
+
stop(): this;
|
|
93
|
+
/** Stop and remove every dash style vivus set. */
|
|
94
|
+
destroy(): void;
|
|
95
|
+
isInvisible(el: Element): boolean;
|
|
96
|
+
/** Whether `el` is in view; with `h` = 1 its whole height must fit above the fold. */
|
|
97
|
+
isInViewport(el: Element, h?: number): boolean;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
export { Vivus, type VivusCallback, type VivusOptions, type VivusStart, type VivusTiming, type VivusType, Vivus as default };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function g(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var w=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function m(r,...t){w&&console.warn(`[svg-scroll-draw] ${r}`,...t);}var E=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],L=["inViewport","manual","autostart"];function u(r,t){let e=parseInt(r,10);return e>=0?e:t}function V(r){if(typeof window>"u")return false;let t=window,e=i=>typeof t[i]=="function"&&r instanceof t[i];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var y=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],$=["line","ellipse","circle","polygon","polyline","rect"],x="http://www.w3.org/2000/svg";function v(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let i=[];for(let s=0;s<t.length;s+=2)i.push(`${t[s]},${t[s+1]}`);t=i;}let e=`M${t[0]}`;for(let i=1;i<t.length;i++)t[i].indexOf(",")!==-1&&(e+=`L${t[i]}`);return e}function b(r,t,e,i){let s=parseFloat(e)||0,a=parseFloat(i)||0,n=parseFloat(r)||0,o=parseFloat(t)||0,l=n-s,h=n+s;return `M${l},${o}A${s},${a} 0,1,1 ${h},${o}A${s},${a} 0,1,1 ${l},${o}`}var A={line:r=>`M${r.x1||0},${r.y1||0}L${r.x2||0},${r.y2||0}`,rect(r){let t=parseFloat(r.x)||0,e=parseFloat(r.y)||0,i=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,n=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?n:a,0),i/2),n=Math.min(Math.max(n<0?a:n,0),s/2);let o=`A ${a},${n},0,0,1,`;return `M ${t+a},${e} L ${t+i-a},${e} ${o}${t+i},${e+n} L ${t+i},${e+s-n} ${o}${t+i-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-n} L ${t},${e+n} ${o}${t+a},${e}`}return `M${t} ${e} L${t+i} ${e} L${t+i} ${e+s} L${t} ${e+s} Z`},polyline:v,polygon:r=>`${v(r)}Z`,ellipse:r=>b(r.cx,r.cy,r.rx,r.ry),circle:r=>b(r.cx,r.cy,r.r,r.r)};function R(r){for(let t of Array.from(r.querySelectorAll($.join(",")))){let e={};for(let{name:a,value:n}of Array.from(t.attributes)){if(y.indexOf(a)!==-1&&n.indexOf("%")!==-1)throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");e[a]=n;}let i=A[t.tagName.toLowerCase()](e),s=document.createElementNS(x,"path");for(let{name:a,value:n}of Array.from(t.attributes))y.indexOf(a)===-1&&s.setAttribute(a,n);s.setAttribute("d",i),t.parentNode?.replaceChild(s,t);}}var c=class c{constructor(t,e,i){this.isReady=false;this.type="delayed";this.start="inViewport";this.duration=120;this.delay=null;this.dashGap=1;this.forceRender=false;this.reverseStack=false;this.selfDestroy=false;this.ignoreInvisible=false;this.animTimingFunction=c.LINEAR;this.pathTimingFunction=c.LINEAR;this.callback=()=>{};this.map=[];this.frameLength=0;this.currentFrame=0;this.delayUnit=0;this.speed=1;this.handle=null;this.instanceCallback=null;this.mustRecalcScale=null;this.viewportListener=null;this.setElement(t,e),this.setOptions(e),this.setCallback(i),this.isReady&&this.init();}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let i=t;if(typeof i=="string"){let s=document.getElementById(i);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');i=s;}if(this.parentEl=i,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let n=a.querySelector("svg");if(!n)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=n,n.setAttribute("width","100%"),n.setAttribute("height","100%"),this.parentEl.appendChild(n),this.isReady=true,this.init();}),s.open("GET",e.file),s.send();return}if(V(i)){this.el=i,this.isReady=true;return}if(i instanceof HTMLObjectElement){let s=i,a=n=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&n)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");o&&(s.getAttribute("built-by-vivus")&&(this.parentEl.insertBefore(o,s),this.parentEl.removeChild(s),o.setAttribute("width","100%"),o.setAttribute("height","100%")),this.el=o,this.isReady=true,this.init());};a(),this.isReady||s.addEventListener("load",a);return}throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}setOptions(t){if(t!==void 0&&(t===null||t.constructor!==Object))throw new Error('Vivus [constructor]: "options" parameter must be an object');let e=t||{};if(e.type&&E.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&L.indexOf(e.start)===-1)throw new Error(`Vivus [constructor]: ${e.start} is not an existing \`start\` option`);this.type=e.type||"delayed",this.start=e.start||"inViewport";let i=navigator.userAgent,s=i.indexOf("MSIE")!==-1||i.indexOf("Trident/")!==-1||i.indexOf("Edge/")!==-1;if(this.duration=u(e.duration,120),this.delay=u(e.delay,null),this.dashGap=u(e.dashGap,1),this.forceRender=Object.prototype.hasOwnProperty.call(e,"forceRender")?!!e.forceRender:s,this.reverseStack=!!e.reverseStack,this.selfDestroy=!!e.selfDestroy,this.onReady=e.onReady,this.map=[],this.ignoreInvisible=Object.prototype.hasOwnProperty.call(e,"ignoreInvisible")?!!e.ignoreInvisible:false,this.animTimingFunction=e.animTimingFunction||c.LINEAR,this.pathTimingFunction=e.pathTimingFunction||c.LINEAR,this.delay!==null&&this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")}setCallback(t){if(t&&typeof t!="function")throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||(()=>{});}mapping(){let t=0,e=0,i=0,s=false,a=Array.from(this.el.querySelectorAll("path"));a.forEach((n,o)=>{if(this.isInvisible(n))return;let l={el:n,length:0,startAt:0,duration:0,isResizeSensitive:false},h=1;if(n.getAttribute("vector-effect")==="non-scaling-stroke"){let d=n.getBoundingClientRect(),f=n.getBBox();h=Math.max(d.width/f.width,d.height/f.height),l.isResizeSensitive=true,s=true;}if(l.length=Math.ceil(n.getTotalLength()*h),isNaN(l.length)){m("vivus: cannot retrieve a path element length",n);return}this.map.push(l),n.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,n.style.strokeDashoffset=String(l.length+this.dashGap),l.length+=this.dashGap,e+=l.length,this.renderPath(o);}),s&&m("vivus: this SVG contains non-scaling-strokes. Call instance.recalc() when the SVG is resized."),e=e===0?1:e,this.delay=this.delay===null?this.duration/3:this.delay,this.delayUnit=this.delay/(a.length>1?a.length-1:1),this.reverseStack&&this.map.reverse(),this.map.forEach((n,o)=>{let l=()=>{let h={};for(let{name:d,value:f}of Array.from(n.el.attributes))h[d]=f;return h};switch(this.type){case "delayed":n.startAt=this.delayUnit*o,n.duration=this.duration-this.delay;break;case "oneByOne":n.startAt=i/e*this.duration,n.duration=n.length/e*this.duration;break;case "sync":case "async":case "nsync":n.startAt=0,n.duration=this.duration;break;case "scenario-sync":{let h=l();n.startAt=t+(u(h["data-delay"],this.delayUnit)||0),n.duration=u(h["data-duration"],this.duration),t=h["data-async"]!==void 0?n.startAt:n.startAt+n.duration,this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}case "scenario":{let h=l();n.startAt=u(h["data-start"],this.delayUnit)||0,n.duration=u(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}}i+=n.length,this.frameLength=this.frameLength||this.duration;});}recalc(){this.mustRecalcScale||(this.mustRecalcScale=requestAnimationFrame(()=>this.performLineRecalc()));}performLineRecalc(){for(let t of this.map){if(!t.isResizeSensitive)continue;let e=t.el.getBoundingClientRect(),i=t.el.getBBox(),s=Math.max(e.width/i.width,e.height/i.height);t.length=Math.ceil(t.el.getTotalLength()*s),t.el.style.strokeDasharray=`${t.length} ${t.length+this.dashGap*2}`;}this.trace(),this.mustRecalcScale=null;}draw(){if(this.currentFrame+=this.speed,this.currentFrame<=0)this.stop(),this.reset();else if(this.currentFrame>=this.frameLength)this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy();else {this.trace(),this.handle=requestAnimationFrame(()=>this.draw());return}this.finished();}finished(){if(this.callback(this),this.instanceCallback){let t=this.instanceCallback;this.instanceCallback=null,t(this);}}trace(){let t=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength;this.map.forEach((e,i)=>{let s=this.pathTimingFunction(Math.max(0,Math.min(1,(t-e.startAt)/e.duration)));e.progress!==s&&(e.progress=s,e.el.style.strokeDashoffset=String(Math.floor(e.length*(1-s))),this.renderPath(i));});}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let i=e.el.cloneNode(true);e.el.parentNode?.replaceChild(i,e.el),e.el=i;}init(){this.frameLength=0,this.currentFrame=0,this.map=[],R(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this);}starter(){if(this.start==="manual")return;if(this.start==="autostart"){this.play();return}let t=()=>{this.isInViewport(this.parentEl,1)&&(this.play(),window.removeEventListener("scroll",t),this.viewportListener=null);};this.viewportListener=t,window.addEventListener("scroll",t),t();}getStatus(){return this.currentFrame===0?"start":this.currentFrame===this.frameLength?"end":"progress"}reset(){return this.setFrameProgress(0)}finish(){return this.setFrameProgress(1)}setFrameProgress(t){let e=Math.min(1,Math.max(0,t));return this.currentFrame=Math.round(this.frameLength*e),this.trace(),this}play(t,e){this.instanceCallback=null;let i=t;if(i&&typeof i=="function")this.instanceCallback=i,i=void 0;else if(i&&typeof i!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=i||1,g()?(this.stop(),this.currentFrame=this.speed<0?0:this.frameLength,this.trace(),this.speed>0&&this.selfDestroy&&this.destroy(),this.finished(),this):(this.handle||this.draw(),this)}stop(){return this.handle&&(cancelAnimationFrame(this.handle),this.handle=null),this}destroy(){this.stop(),this.viewportListener&&(window.removeEventListener("scroll",this.viewportListener),this.viewportListener=null),this.map.forEach((t,e)=>{t.el.style.strokeDashoffset="",t.el.style.strokeDasharray="",this.renderPath(e);});}isInvisible(t){let e=t.getAttribute("data-ignore");if(e!==null)return e!=="false";if(this.ignoreInvisible){let i=t.getBoundingClientRect();return !i.width&&!i.height}return false}isInViewport(t,e=0){let i=window.pageYOffset||document.documentElement.scrollTop,s=i+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),n=i+a.top;return n+a.height*(e||0)<=s&&n+a.height>=i}};c.LINEAR=t=>t,c.EASE=t=>-Math.cos(t*Math.PI)/2+.5,c.EASE_OUT=t=>1-Math.pow(1-t,3),c.EASE_IN=t=>Math.pow(t,3),c.EASE_OUT_BOUNCE=t=>{let e=-Math.cos(t*(.5*Math.PI))+1,i=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(i*(2.5*Math.PI)))+1;return 1-s+a*s};var p=c,O=p;
|
|
2
|
+
export{p as Vivus,O as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svg-scroll-draw",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.13.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,14 @@
|
|
|
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",
|
|
66
|
+
"vivus",
|
|
67
|
+
"vivus-alternative",
|
|
68
|
+
"svg-line-drawing",
|
|
69
|
+
"line-drawing"
|
|
63
70
|
],
|
|
64
71
|
"homepage": "https://svg-scroll-draw.vercel.app",
|
|
65
72
|
"repository": {
|
|
@@ -145,6 +152,12 @@
|
|
|
145
152
|
],
|
|
146
153
|
"aos": [
|
|
147
154
|
"./dist/aos/index.d.ts"
|
|
155
|
+
],
|
|
156
|
+
"scrollreveal": [
|
|
157
|
+
"./dist/scrollreveal/index.d.ts"
|
|
158
|
+
],
|
|
159
|
+
"vivus": [
|
|
160
|
+
"./dist/vivus/index.d.ts"
|
|
148
161
|
]
|
|
149
162
|
}
|
|
150
163
|
},
|
|
@@ -374,6 +387,26 @@
|
|
|
374
387
|
"default": "./dist/aos/index.cjs"
|
|
375
388
|
}
|
|
376
389
|
},
|
|
390
|
+
"./scrollreveal": {
|
|
391
|
+
"import": {
|
|
392
|
+
"types": "./dist/scrollreveal/index.d.mts",
|
|
393
|
+
"default": "./dist/scrollreveal/index.mjs"
|
|
394
|
+
},
|
|
395
|
+
"require": {
|
|
396
|
+
"types": "./dist/scrollreveal/index.d.ts",
|
|
397
|
+
"default": "./dist/scrollreveal/index.cjs"
|
|
398
|
+
}
|
|
399
|
+
},
|
|
400
|
+
"./vivus": {
|
|
401
|
+
"import": {
|
|
402
|
+
"types": "./dist/vivus/index.d.mts",
|
|
403
|
+
"default": "./dist/vivus/index.mjs"
|
|
404
|
+
},
|
|
405
|
+
"require": {
|
|
406
|
+
"types": "./dist/vivus/index.d.ts",
|
|
407
|
+
"default": "./dist/vivus/index.cjs"
|
|
408
|
+
}
|
|
409
|
+
},
|
|
377
410
|
"./package.json": "./package.json"
|
|
378
411
|
},
|
|
379
412
|
"scripts": {
|
|
@@ -393,20 +426,24 @@
|
|
|
393
426
|
"devDependencies": {
|
|
394
427
|
"@playwright/test": "^1.62.1",
|
|
395
428
|
"@types/react": "^18.0.0",
|
|
396
|
-
"esbuild": "^0.27.7",
|
|
397
429
|
"@vitest/coverage-v8": "^2.0.0",
|
|
430
|
+
"esbuild": "^0.27.7",
|
|
398
431
|
"jsdom": "^25.0.0",
|
|
432
|
+
"scrollreveal": "^4.0.9",
|
|
399
433
|
"solid-js": "^1.9.13",
|
|
400
434
|
"tsup": "^8.0.0",
|
|
401
435
|
"typescript": "^5.0.0",
|
|
402
436
|
"vitest": "^2.0.0",
|
|
437
|
+
"vivus": "^0.4.6",
|
|
403
438
|
"vue": "^3.5.34"
|
|
404
439
|
},
|
|
405
440
|
"sideEffects": [
|
|
406
441
|
"./dist/web-component/*",
|
|
407
442
|
"./dist/cdn/*",
|
|
408
443
|
"./src/web-component/*",
|
|
409
|
-
"./src/cdn.ts"
|
|
444
|
+
"./src/cdn.ts",
|
|
445
|
+
"./src/scrollreveal/cdn.ts",
|
|
446
|
+
"./src/vivus/cdn.ts"
|
|
410
447
|
],
|
|
411
448
|
"engines": {
|
|
412
449
|
"node": ">=18"
|
package/dist/aos/index.d.mts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
type AOSAnchorPlacement = 'top-bottom' | 'top-center' | 'top-top' | 'center-bottom' | 'center-center' | 'center-top' | 'bottom-bottom' | 'bottom-center' | 'bottom-top';
|
|
2
|
-
interface AOSOptions {
|
|
3
|
-
/** Px from the trigger point before the animation starts. Default 120. */
|
|
4
|
-
offset?: number;
|
|
5
|
-
/** Ms to wait before animating in. Default 0. */
|
|
6
|
-
delay?: number;
|
|
7
|
-
/** Animation length in ms. Default 400. */
|
|
8
|
-
duration?: number;
|
|
9
|
-
/** An AOS easing name (`'ease-out-back'`…) or any CSS timing function. Default `'ease'`. */
|
|
10
|
-
easing?: string;
|
|
11
|
-
/** Animate only the first time the element scrolls in. Default false. */
|
|
12
|
-
once?: boolean;
|
|
13
|
-
/** Animate out again when the element scrolls past the top. Default false. */
|
|
14
|
-
mirror?: boolean;
|
|
15
|
-
/** Which edge of the element meets which edge of the window. Default `'top-bottom'`. */
|
|
16
|
-
anchorPlacement?: AOSAnchorPlacement;
|
|
17
|
-
/** Skip animations entirely: a boolean, a predicate, or a viewport class. */
|
|
18
|
-
disable?: boolean | 'phone' | 'tablet' | 'mobile' | (() => boolean);
|
|
19
|
-
/** Document event that starts AOS. Default `'DOMContentLoaded'`. */
|
|
20
|
-
startEvent?: string;
|
|
21
|
-
/** Do not watch the DOM for new `[data-aos]` elements. Default false. */
|
|
22
|
-
disableMutationObserver?: boolean;
|
|
23
|
-
/** Class added at init. Default `'aos-init'`. */
|
|
24
|
-
initClassName?: string;
|
|
25
|
-
/** Class added while animated in. Default `'aos-animate'`. */
|
|
26
|
-
animatedClassName?: string;
|
|
27
|
-
/** Also add the `data-aos` value as classes (for animate.css-style sets). Default false. */
|
|
28
|
-
useClassNames?: boolean;
|
|
29
|
-
/** Accepted for compatibility; scroll handling is batched per frame instead. */
|
|
30
|
-
throttleDelay?: number;
|
|
31
|
-
/** Accepted for compatibility; resize handling is debounced internally. */
|
|
32
|
-
debounceDelay?: number;
|
|
33
|
-
}
|
|
34
|
-
/** Start animating every `[data-aos]` element. Same options as AOS. */
|
|
35
|
-
declare function init(options?: AOSOptions): HTMLElement[];
|
|
36
|
-
/** Recalculate every trigger position (after a layout change). */
|
|
37
|
-
declare function refresh(): void;
|
|
38
|
-
/** Find `[data-aos]` elements again (after adding or removing some), then refresh. */
|
|
39
|
-
declare function refreshHard(): void;
|
|
40
|
-
/**
|
|
41
|
-
* Stop listening and remove the injected stylesheet. Not in AOS — added for
|
|
42
|
-
* single-page apps that unmount the page AOS was started on. Elements keep
|
|
43
|
-
* whatever classes they have.
|
|
44
|
-
*/
|
|
45
|
-
declare function destroy(): void;
|
|
46
|
-
declare const AOS: {
|
|
47
|
-
init: typeof init;
|
|
48
|
-
refresh: typeof refresh;
|
|
49
|
-
refreshHard: typeof refreshHard;
|
|
50
|
-
destroy: typeof destroy;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export { type AOSAnchorPlacement, type AOSOptions, AOS as default, destroy, init, refresh, refreshHard };
|
package/dist/aos/index.d.ts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
type AOSAnchorPlacement = 'top-bottom' | 'top-center' | 'top-top' | 'center-bottom' | 'center-center' | 'center-top' | 'bottom-bottom' | 'bottom-center' | 'bottom-top';
|
|
2
|
-
interface AOSOptions {
|
|
3
|
-
/** Px from the trigger point before the animation starts. Default 120. */
|
|
4
|
-
offset?: number;
|
|
5
|
-
/** Ms to wait before animating in. Default 0. */
|
|
6
|
-
delay?: number;
|
|
7
|
-
/** Animation length in ms. Default 400. */
|
|
8
|
-
duration?: number;
|
|
9
|
-
/** An AOS easing name (`'ease-out-back'`…) or any CSS timing function. Default `'ease'`. */
|
|
10
|
-
easing?: string;
|
|
11
|
-
/** Animate only the first time the element scrolls in. Default false. */
|
|
12
|
-
once?: boolean;
|
|
13
|
-
/** Animate out again when the element scrolls past the top. Default false. */
|
|
14
|
-
mirror?: boolean;
|
|
15
|
-
/** Which edge of the element meets which edge of the window. Default `'top-bottom'`. */
|
|
16
|
-
anchorPlacement?: AOSAnchorPlacement;
|
|
17
|
-
/** Skip animations entirely: a boolean, a predicate, or a viewport class. */
|
|
18
|
-
disable?: boolean | 'phone' | 'tablet' | 'mobile' | (() => boolean);
|
|
19
|
-
/** Document event that starts AOS. Default `'DOMContentLoaded'`. */
|
|
20
|
-
startEvent?: string;
|
|
21
|
-
/** Do not watch the DOM for new `[data-aos]` elements. Default false. */
|
|
22
|
-
disableMutationObserver?: boolean;
|
|
23
|
-
/** Class added at init. Default `'aos-init'`. */
|
|
24
|
-
initClassName?: string;
|
|
25
|
-
/** Class added while animated in. Default `'aos-animate'`. */
|
|
26
|
-
animatedClassName?: string;
|
|
27
|
-
/** Also add the `data-aos` value as classes (for animate.css-style sets). Default false. */
|
|
28
|
-
useClassNames?: boolean;
|
|
29
|
-
/** Accepted for compatibility; scroll handling is batched per frame instead. */
|
|
30
|
-
throttleDelay?: number;
|
|
31
|
-
/** Accepted for compatibility; resize handling is debounced internally. */
|
|
32
|
-
debounceDelay?: number;
|
|
33
|
-
}
|
|
34
|
-
/** Start animating every `[data-aos]` element. Same options as AOS. */
|
|
35
|
-
declare function init(options?: AOSOptions): HTMLElement[];
|
|
36
|
-
/** Recalculate every trigger position (after a layout change). */
|
|
37
|
-
declare function refresh(): void;
|
|
38
|
-
/** Find `[data-aos]` elements again (after adding or removing some), then refresh. */
|
|
39
|
-
declare function refreshHard(): void;
|
|
40
|
-
/**
|
|
41
|
-
* Stop listening and remove the injected stylesheet. Not in AOS — added for
|
|
42
|
-
* single-page apps that unmount the page AOS was started on. Elements keep
|
|
43
|
-
* whatever classes they have.
|
|
44
|
-
*/
|
|
45
|
-
declare function destroy(): void;
|
|
46
|
-
declare const AOS: {
|
|
47
|
-
init: typeof init;
|
|
48
|
-
refresh: typeof refresh;
|
|
49
|
-
refreshHard: typeof refreshHard;
|
|
50
|
-
destroy: typeof destroy;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export { type AOSAnchorPlacement, type AOSOptions, AOS as default, destroy, init, refresh, refreshHard };
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
type StoryEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
|
|
2
|
-
/** A traced path that strokes itself on across a scroll range. */
|
|
3
|
-
interface DrawAnimation {
|
|
4
|
-
type: 'draw';
|
|
5
|
-
/** DOM id the runtime binds to (with leading '#'), e.g. "#path-3". */
|
|
6
|
-
target: string;
|
|
7
|
-
/** SVG path data, in canvas coordinates. */
|
|
8
|
-
d: string;
|
|
9
|
-
/** Pre-measured total path length (px). */
|
|
10
|
-
length: number;
|
|
11
|
-
/** Scroll progress where the draw begins, e.g. "20%". */
|
|
12
|
-
start: string;
|
|
13
|
-
/** Scroll progress where the draw completes, e.g. "50%". */
|
|
14
|
-
end: string;
|
|
15
|
-
stroke: string;
|
|
16
|
-
strokeWidth: number;
|
|
17
|
-
easing: StoryEasing;
|
|
18
|
-
}
|
|
19
|
-
/** Any layer fading opacity across a scroll range. */
|
|
20
|
-
interface FadeAnimation {
|
|
21
|
-
type: 'fade';
|
|
22
|
-
target: string;
|
|
23
|
-
start: string;
|
|
24
|
-
end: string;
|
|
25
|
-
from: number;
|
|
26
|
-
to: number;
|
|
27
|
-
}
|
|
28
|
-
type StoryAnimation = DrawAnimation | FadeAnimation;
|
|
29
|
-
interface StoryScene {
|
|
30
|
-
id: string;
|
|
31
|
-
/** Optional background layer (a product photo) as a data URL or remote URL. */
|
|
32
|
-
background?: string;
|
|
33
|
-
animations: StoryAnimation[];
|
|
34
|
-
}
|
|
35
|
-
interface Story {
|
|
36
|
-
version: 1;
|
|
37
|
-
/** Total scroll height of the experience, e.g. "400vh". */
|
|
38
|
-
totalHeight: string;
|
|
39
|
-
/** The authoring viewBox the coordinates are expressed in. */
|
|
40
|
-
canvas: {
|
|
41
|
-
width: number;
|
|
42
|
-
height: number;
|
|
43
|
-
};
|
|
44
|
-
scenes: StoryScene[];
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
interface CinematicOptions {
|
|
48
|
-
/** Mount point — a selector or element. Becomes the scroll wrapper. */
|
|
49
|
-
wrapper: string | HTMLElement;
|
|
50
|
-
}
|
|
51
|
-
interface CinematicInstance {
|
|
52
|
-
/** Stop the scroll loop and detach observers (built DOM is left in place). */
|
|
53
|
-
destroy: () => void;
|
|
54
|
-
/** Current global scroll progress through the story (0–1). */
|
|
55
|
-
getProgress: () => number;
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* The viral loader. Reads a Cinematic Story (authored in the Studio) and wires
|
|
59
|
-
* a scroll-scrubbed timeline: paths stroke themselves on and layers fade in as
|
|
60
|
-
* the user scrolls, all driven off the wrapper's scroll progress.
|
|
61
|
-
*
|
|
62
|
-
* import { Cinematic } from "svg-scroll-draw";
|
|
63
|
-
* import story from "./story.json";
|
|
64
|
-
* new Cinematic({ wrapper: "#app" }).loadStory(story);
|
|
65
|
-
*/
|
|
66
|
-
declare class Cinematic {
|
|
67
|
-
private mount;
|
|
68
|
-
constructor(options: CinematicOptions);
|
|
69
|
-
loadStory(story: Story): CinematicInstance;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export { Cinematic, type CinematicInstance, type CinematicOptions, type DrawAnimation, type FadeAnimation, type Story, type StoryAnimation, type StoryEasing, type StoryScene };
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
type StoryEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
|
|
2
|
-
/** A traced path that strokes itself on across a scroll range. */
|
|
3
|
-
interface DrawAnimation {
|
|
4
|
-
type: 'draw';
|
|
5
|
-
/** DOM id the runtime binds to (with leading '#'), e.g. "#path-3". */
|
|
6
|
-
target: string;
|
|
7
|
-
/** SVG path data, in canvas coordinates. */
|
|
8
|
-
d: string;
|
|
9
|
-
/** Pre-measured total path length (px). */
|
|
10
|
-
length: number;
|
|
11
|
-
/** Scroll progress where the draw begins, e.g. "20%". */
|
|
12
|
-
start: string;
|
|
13
|
-
/** Scroll progress where the draw completes, e.g. "50%". */
|
|
14
|
-
end: string;
|
|
15
|
-
stroke: string;
|
|
16
|
-
strokeWidth: number;
|
|
17
|
-
easing: StoryEasing;
|
|
18
|
-
}
|
|
19
|
-
/** Any layer fading opacity across a scroll range. */
|
|
20
|
-
interface FadeAnimation {
|
|
21
|
-
type: 'fade';
|
|
22
|
-
target: string;
|
|
23
|
-
start: string;
|
|
24
|
-
end: string;
|
|
25
|
-
from: number;
|
|
26
|
-
to: number;
|
|
27
|
-
}
|
|
28
|
-
type StoryAnimation = DrawAnimation | FadeAnimation;
|
|
29
|
-
interface StoryScene {
|
|
30
|
-
id: string;
|
|
31
|
-
/** Optional background layer (a product photo) as a data URL or remote URL. */
|
|
32
|
-
background?: string;
|
|
33
|
-
animations: StoryAnimation[];
|
|
34
|
-
}
|
|
35
|
-
interface Story {
|
|
36
|
-
version: 1;
|
|
37
|
-
/** Total scroll height of the experience, e.g. "400vh". */
|
|
38
|
-
totalHeight: string;
|
|
39
|
-
/** The authoring viewBox the coordinates are expressed in. */
|
|
40
|
-
canvas: {
|
|
41
|
-
width: number;
|
|
42
|
-
height: number;
|
|
43
|
-
};
|
|
44
|
-
scenes: StoryScene[];
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
interface CinematicOptions {
|
|
48
|
-
/** Mount point — a selector or element. Becomes the scroll wrapper. */
|
|
49
|
-
wrapper: string | HTMLElement;
|
|
50
|
-
}
|
|
51
|
-
interface CinematicInstance {
|
|
52
|
-
/** Stop the scroll loop and detach observers (built DOM is left in place). */
|
|
53
|
-
destroy: () => void;
|
|
54
|
-
/** Current global scroll progress through the story (0–1). */
|
|
55
|
-
getProgress: () => number;
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* The viral loader. Reads a Cinematic Story (authored in the Studio) and wires
|
|
59
|
-
* a scroll-scrubbed timeline: paths stroke themselves on and layers fade in as
|
|
60
|
-
* the user scrolls, all driven off the wrapper's scroll progress.
|
|
61
|
-
*
|
|
62
|
-
* import { Cinematic } from "svg-scroll-draw";
|
|
63
|
-
* import story from "./story.json";
|
|
64
|
-
* new Cinematic({ wrapper: "#app" }).loadStory(story);
|
|
65
|
-
*/
|
|
66
|
-
declare class Cinematic {
|
|
67
|
-
private mount;
|
|
68
|
-
constructor(options: CinematicOptions);
|
|
69
|
-
loadStory(story: Story): CinematicInstance;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export { Cinematic, type CinematicInstance, type CinematicOptions, type DrawAnimation, type FadeAnimation, type Story, type StoryAnimation, type StoryEasing, type StoryScene };
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
declare function enable(): void;
|
|
2
|
-
declare function disable(): void;
|
|
3
|
-
declare function toggle(): void;
|
|
4
|
-
declare function highlight(target: string | Element): void;
|
|
5
|
-
declare const devtools: {
|
|
6
|
-
enable: typeof enable;
|
|
7
|
-
disable: typeof disable;
|
|
8
|
-
toggle: typeof toggle;
|
|
9
|
-
highlight: typeof highlight;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export { devtools };
|
package/dist/devtools/index.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
declare function enable(): void;
|
|
2
|
-
declare function disable(): void;
|
|
3
|
-
declare function toggle(): void;
|
|
4
|
-
declare function highlight(target: string | Element): void;
|
|
5
|
-
declare const devtools: {
|
|
6
|
-
enable: typeof enable;
|
|
7
|
-
disable: typeof disable;
|
|
8
|
-
toggle: typeof toggle;
|
|
9
|
-
highlight: typeof highlight;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export { devtools };
|
package/dist/text/index.d.mts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
|
|
2
|
-
interface TriggerConfig {
|
|
3
|
-
start?: string;
|
|
4
|
-
end?: string;
|
|
5
|
-
}
|
|
6
|
-
interface ScrollDrawInstance {
|
|
7
|
-
destroy: () => void;
|
|
8
|
-
/** Reset and replay the animation from the beginning. */
|
|
9
|
-
replay: () => void;
|
|
10
|
-
/** Pause the animation at the current progress. */
|
|
11
|
-
pause: () => void;
|
|
12
|
-
/** Resume a paused animation. */
|
|
13
|
-
resume: () => void;
|
|
14
|
-
/** Jump to a specific progress value (0–1) and pause. */
|
|
15
|
-
seek: (progress: number) => void;
|
|
16
|
-
/** Returns current draw progress (0–1). */
|
|
17
|
-
getProgress: () => number;
|
|
18
|
-
/**
|
|
19
|
-
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
20
|
-
*
|
|
21
|
-
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
22
|
-
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
23
|
-
* change that leaves the document height alone, such as a tab switching, a
|
|
24
|
-
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
25
|
-
* after one of those.
|
|
26
|
-
*
|
|
27
|
-
* Optional on this shared type because several instances here are fan-outs over
|
|
28
|
-
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
29
|
-
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
30
|
-
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
31
|
-
*/
|
|
32
|
-
refresh?: () => void;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
interface ScrollTextOptions {
|
|
36
|
-
split?: 'chars' | 'words' | 'lines';
|
|
37
|
-
stagger?: number;
|
|
38
|
-
easing?: EasingName | ((t: number) => number);
|
|
39
|
-
from?: {
|
|
40
|
-
opacity?: number;
|
|
41
|
-
y?: number;
|
|
42
|
-
x?: number;
|
|
43
|
-
rotate?: number;
|
|
44
|
-
scale?: number;
|
|
45
|
-
};
|
|
46
|
-
trigger?: TriggerConfig;
|
|
47
|
-
once?: boolean;
|
|
48
|
-
onComplete?: () => void;
|
|
49
|
-
}
|
|
50
|
-
declare function scrollText(target: string | Element, options?: ScrollTextOptions): ScrollDrawInstance;
|
|
51
|
-
|
|
52
|
-
export { type ScrollTextOptions, scrollText };
|
package/dist/text/index.d.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
|
|
2
|
-
interface TriggerConfig {
|
|
3
|
-
start?: string;
|
|
4
|
-
end?: string;
|
|
5
|
-
}
|
|
6
|
-
interface ScrollDrawInstance {
|
|
7
|
-
destroy: () => void;
|
|
8
|
-
/** Reset and replay the animation from the beginning. */
|
|
9
|
-
replay: () => void;
|
|
10
|
-
/** Pause the animation at the current progress. */
|
|
11
|
-
pause: () => void;
|
|
12
|
-
/** Resume a paused animation. */
|
|
13
|
-
resume: () => void;
|
|
14
|
-
/** Jump to a specific progress value (0–1) and pause. */
|
|
15
|
-
seek: (progress: number) => void;
|
|
16
|
-
/** Returns current draw progress (0–1). */
|
|
17
|
-
getProgress: () => number;
|
|
18
|
-
/**
|
|
19
|
-
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
20
|
-
*
|
|
21
|
-
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
22
|
-
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
23
|
-
* change that leaves the document height alone, such as a tab switching, a
|
|
24
|
-
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
25
|
-
* after one of those.
|
|
26
|
-
*
|
|
27
|
-
* Optional on this shared type because several instances here are fan-outs over
|
|
28
|
-
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
29
|
-
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
30
|
-
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
31
|
-
*/
|
|
32
|
-
refresh?: () => void;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
interface ScrollTextOptions {
|
|
36
|
-
split?: 'chars' | 'words' | 'lines';
|
|
37
|
-
stagger?: number;
|
|
38
|
-
easing?: EasingName | ((t: number) => number);
|
|
39
|
-
from?: {
|
|
40
|
-
opacity?: number;
|
|
41
|
-
y?: number;
|
|
42
|
-
x?: number;
|
|
43
|
-
rotate?: number;
|
|
44
|
-
scale?: number;
|
|
45
|
-
};
|
|
46
|
-
trigger?: TriggerConfig;
|
|
47
|
-
once?: boolean;
|
|
48
|
-
onComplete?: () => void;
|
|
49
|
-
}
|
|
50
|
-
declare function scrollText(target: string | Element, options?: ScrollTextOptions): ScrollDrawInstance;
|
|
51
|
-
|
|
52
|
-
export { type ScrollTextOptions, scrollText };
|