svg-scroll-draw 0.1.0

package/dist/cdn/svg-scroll-draw.global.js

@@ -0,0 +1 @@
+"use strict";var SvgScrollDraw=(()=>{var g=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var n in t)g(e,n,{get:t[n],enumerable:!0})},C=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of N(t))!R.call(e,s)&&s!==n&&g(e,s,{get:()=>t[s],enumerable:!(i=z(t,s))||i.enumerable});return e};var B=e=>C(g({},"__esModule",{value:!0}),e);var j={};V(j,{scrollDraw:()=>_});var b={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function h(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[n="top",i="bottom"]=t;return{element:n,viewport:i}}function T(e,t,n,i){switch(i){case"top":return e+n;case"center":return e+n+t/2;case"bottom":return e+n+t;default:return e+n}}function A(e,t){switch(e){case"top":return 0;case"center":return t/2;case"bottom":return t;default:return t}}function M(e,t,n){return Math.min(n,Math.max(t,e))}function x(e,t,n,i){return n===t?0:M((e-t)/(n-t)*i,0,1)}function I(e,t,n,i,s){let a=T(e.top,e.height,t,i.element)-A(i.viewport,n),c=T(e.top,e.height,t,s.element)-A(s.viewport,n);return{tStart:a,tEnd:c}}function k(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t)}function P(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?k("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&k("Element has a fill \u2014 it may obscure the stroke animation.",e)}function O(e,t={}){if(typeof window>"u")return{destroy:()=>{}};let{selector:n="path, polyline, line, polygon",speed:i=1,fade:s=!1,easing:a="linear",trigger:c={},onComplete:G}=t,L=typeof a=="function"?a:b[a]??b.linear,$=h(c.start??"top bottom"),F=h(c.end??"bottom top"),p=Array.from(e.querySelectorAll(n)),l=[],y=0,E=0,f=!1,u=0,d=!1;function v(){let r=e.getBoundingClientRect(),o=I({top:r.top,height:r.height},window.scrollY,window.innerHeight,$,F);y=o.tStart,E=o.tEnd}p.forEach(r=>{P(r);let o=r.getTotalLength();l.push(o),r.style.strokeDasharray=`${o}`,r.style.strokeDashoffset=`${o}`,s&&(r.style.opacity="0")}),v();function S(){if(!d)return;let r=L(x(window.scrollY,y,E,i));p.forEach((o,q)=>{o.style.strokeDashoffset=`${l[q]*(1-r)}`,s&&(o.style.opacity=`${r}`)}),r>=1&&!f?(f=!0,G?.()):r<1&&(f=!1),u=requestAnimationFrame(S)}let D=new IntersectionObserver(r=>{r.forEach(o=>{d=o.isIntersecting,d?u=requestAnimationFrame(S):cancelAnimationFrame(u)})});D.observe(e);let w;function m(){clearTimeout(w),w=setTimeout(()=>{p.forEach((r,o)=>{l[o]=r.getTotalLength(),r.style.strokeDasharray=`${l[o]}`}),v()},150)}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),D.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(w)}}}function _(e,t){if(typeof window>"u")return{destroy:()=>{}};let n=typeof e=="string"?document.querySelector(e):e;return n?O(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}return B(j);})();

package/dist/index.cjs

@@ -0,0 +1 @@
+'use strict';var g={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function b(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[n="top",i="bottom"]=t;return {element:n,viewport:i}}function D(e,t,n,i){switch(i){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function T(e,t){switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function q(e,t,n){return Math.min(n,Math.max(t,e))}function A(e,t,n,i){return n===t?0:q((e-t)/(n-t)*i,0,1)}function x(e,t,n,i,s){let a=D(e.top,e.height,t,i.element)-T(i.viewport,n),c=D(e.top,e.height,t,s.element)-T(s.viewport,n);return {tStart:a,tEnd:c}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function z(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function k(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon",speed:i=1,fade:s=false,easing:a="linear",trigger:c={},onComplete:O}=t,G=typeof a=="function"?a:g[a]??g.linear,L=b(c.start??"top bottom"),$=b(c.end??"bottom top"),p=Array.from(e.querySelectorAll(n)),l=[],h=0,y=0,f=false,u=0,d=false;function E(){let r=e.getBoundingClientRect(),o=x({top:r.top,height:r.height},window.scrollY,window.innerHeight,L,$);h=o.tStart,y=o.tEnd;}p.forEach(r=>{z(r);let o=r.getTotalLength();l.push(o),r.style.strokeDasharray=`${o}`,r.style.strokeDashoffset=`${o}`,s&&(r.style.opacity="0");}),E();function v(){if(!d)return;let r=G(A(window.scrollY,h,y,i));p.forEach((o,F)=>{o.style.strokeDashoffset=`${l[F]*(1-r)}`,s&&(o.style.opacity=`${r}`);}),r>=1&&!f?(f=true,O?.()):r<1&&(f=false),u=requestAnimationFrame(v);}let S=new IntersectionObserver(r=>{r.forEach(o=>{d=o.isIntersecting,d?u=requestAnimationFrame(v):cancelAnimationFrame(u);});});S.observe(e);let w;function m(){clearTimeout(w),w=setTimeout(()=>{p.forEach((r,o)=>{l[o]=r.getTotalLength(),r.style.strokeDasharray=`${l[o]}`;}),E();},150);}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),S.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(w);}}}function B(e,t){if(typeof window>"u")return {destroy:()=>{}};let n=typeof e=="string"?document.querySelector(e):e;return n?k(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}exports.scrollDraw=B;

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    onComplete?: () => void;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+}
+
+declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
+
+export { type ScrollDrawInstance, type ScrollDrawOptions, scrollDraw };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    onComplete?: () => void;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+}
+
+declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
+
+export { type ScrollDrawInstance, type ScrollDrawOptions, scrollDraw };

package/dist/index.mjs

@@ -0,0 +1 @@
+var g={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function b(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[n="top",i="bottom"]=t;return {element:n,viewport:i}}function D(e,t,n,i){switch(i){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function T(e,t){switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function q(e,t,n){return Math.min(n,Math.max(t,e))}function A(e,t,n,i){return n===t?0:q((e-t)/(n-t)*i,0,1)}function x(e,t,n,i,s){let a=D(e.top,e.height,t,i.element)-T(i.viewport,n),c=D(e.top,e.height,t,s.element)-T(s.viewport,n);return {tStart:a,tEnd:c}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function z(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function k(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon",speed:i=1,fade:s=false,easing:a="linear",trigger:c={},onComplete:O}=t,G=typeof a=="function"?a:g[a]??g.linear,L=b(c.start??"top bottom"),$=b(c.end??"bottom top"),p=Array.from(e.querySelectorAll(n)),l=[],h=0,y=0,f=false,u=0,d=false;function E(){let r=e.getBoundingClientRect(),o=x({top:r.top,height:r.height},window.scrollY,window.innerHeight,L,$);h=o.tStart,y=o.tEnd;}p.forEach(r=>{z(r);let o=r.getTotalLength();l.push(o),r.style.strokeDasharray=`${o}`,r.style.strokeDashoffset=`${o}`,s&&(r.style.opacity="0");}),E();function v(){if(!d)return;let r=G(A(window.scrollY,h,y,i));p.forEach((o,F)=>{o.style.strokeDashoffset=`${l[F]*(1-r)}`,s&&(o.style.opacity=`${r}`);}),r>=1&&!f?(f=true,O?.()):r<1&&(f=false),u=requestAnimationFrame(v);}let S=new IntersectionObserver(r=>{r.forEach(o=>{d=o.isIntersecting,d?u=requestAnimationFrame(v):cancelAnimationFrame(u);});});S.observe(e);let w;function m(){clearTimeout(w),w=setTimeout(()=>{p.forEach((r,o)=>{l[o]=r.getTotalLength(),r.style.strokeDasharray=`${l[o]}`;}),E();},150);}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),S.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(w);}}}function B(e,t){if(typeof window>"u")return {destroy:()=>{}};let n=typeof e=="string"?document.querySelector(e):e;return n?k(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}export{B as scrollDraw};

package/dist/react/index.cjs

@@ -0,0 +1 @@
+'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var b={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function w(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[r="top",i="bottom"]=t;return {element:r,viewport:i}}function D(e,t,r,i){switch(i){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function T(e,t){switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function $(e,t,r){return Math.min(r,Math.max(t,e))}function A(e,t,r,i){return r===t?0:$((e-t)/(r-t)*i,0,1)}function k(e,t,r,i,s){let a=D(e.top,e.height,t,i.element)-T(i.viewport,r),c=D(e.top,e.height,t,s.element)-T(s.viewport,r);return {tStart:a,tEnd:c}}function x(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function F(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?x("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&x("Element has a fill \u2014 it may obscure the stroke animation.",e);}function R(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon",speed:i=1,fade:s=false,easing:a="linear",trigger:c={},onComplete:I}=t,L=typeof a=="function"?a:b[a]??b.linear,N=w(c.start??"top bottom"),G=w(c.end??"bottom top"),p=Array.from(e.querySelectorAll(r)),l=[],h=0,y=0,f=false,u=0,g=false;function E(){let n=e.getBoundingClientRect(),o=k({top:n.top,height:n.height},window.scrollY,window.innerHeight,N,G);h=o.tStart,y=o.tEnd;}p.forEach(n=>{F(n);let o=n.getTotalLength();l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=`${o}`,s&&(n.style.opacity="0");}),E();function v(){if(!g)return;let n=L(A(window.scrollY,h,y,i));p.forEach((o,O)=>{o.style.strokeDashoffset=`${l[O]*(1-n)}`,s&&(o.style.opacity=`${n}`);}),n>=1&&!f?(f=true,I?.()):n<1&&(f=false),u=requestAnimationFrame(v);}let S=new IntersectionObserver(n=>{n.forEach(o=>{g=o.isIntersecting,g?u=requestAnimationFrame(v):cancelAnimationFrame(u);});});S.observe(e);let d;function m(){clearTimeout(d),d=setTimeout(()=>{p.forEach((n,o)=>{l[o]=n.getTotalLength(),n.style.strokeDasharray=`${l[o]}`;}),E();},150);}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),S.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(d);}}}function K({children:e,className:t,style:r,...i}){let s=react.useRef(null);return react.useEffect(()=>{if(!s.current)return;let a=R(s.current,i);return ()=>a.destroy()},[]),jsxRuntime.jsx("div",{ref:s,className:t,style:r,children:e})}exports.ScrollDraw=K;

package/dist/react/index.d.mts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    onComplete?: () => void;
+}
+
+type ScrollDrawProps = ScrollDrawOptions & {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function ScrollDraw({ children, className, style, ...options }: ScrollDrawProps): react_jsx_runtime.JSX.Element;
+
+export { ScrollDraw };

package/dist/react/index.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    onComplete?: () => void;
+}
+
+type ScrollDrawProps = ScrollDrawOptions & {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function ScrollDraw({ children, className, style, ...options }: ScrollDrawProps): react_jsx_runtime.JSX.Element;
+
+export { ScrollDraw };

package/dist/react/index.mjs

@@ -0,0 +1 @@
+import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var b={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function w(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[r="top",i="bottom"]=t;return {element:r,viewport:i}}function D(e,t,r,i){switch(i){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function T(e,t){switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function $(e,t,r){return Math.min(r,Math.max(t,e))}function A(e,t,r,i){return r===t?0:$((e-t)/(r-t)*i,0,1)}function k(e,t,r,i,s){let a=D(e.top,e.height,t,i.element)-T(i.viewport,r),c=D(e.top,e.height,t,s.element)-T(s.viewport,r);return {tStart:a,tEnd:c}}function x(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function F(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?x("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&x("Element has a fill \u2014 it may obscure the stroke animation.",e);}function R(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon",speed:i=1,fade:s=false,easing:a="linear",trigger:c={},onComplete:I}=t,L=typeof a=="function"?a:b[a]??b.linear,N=w(c.start??"top bottom"),G=w(c.end??"bottom top"),p=Array.from(e.querySelectorAll(r)),l=[],h=0,y=0,f=false,u=0,g=false;function E(){let n=e.getBoundingClientRect(),o=k({top:n.top,height:n.height},window.scrollY,window.innerHeight,N,G);h=o.tStart,y=o.tEnd;}p.forEach(n=>{F(n);let o=n.getTotalLength();l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=`${o}`,s&&(n.style.opacity="0");}),E();function v(){if(!g)return;let n=L(A(window.scrollY,h,y,i));p.forEach((o,O)=>{o.style.strokeDashoffset=`${l[O]*(1-n)}`,s&&(o.style.opacity=`${n}`);}),n>=1&&!f?(f=true,I?.()):n<1&&(f=false),u=requestAnimationFrame(v);}let S=new IntersectionObserver(n=>{n.forEach(o=>{g=o.isIntersecting,g?u=requestAnimationFrame(v):cancelAnimationFrame(u);});});S.observe(e);let d;function m(){clearTimeout(d),d=setTimeout(()=>{p.forEach((n,o)=>{l[o]=n.getTotalLength(),n.style.strokeDasharray=`${l[o]}`;}),E();},150);}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),S.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(d);}}}function K({children:e,className:t,style:r,...i}){let s=useRef(null);return useEffect(()=>{if(!s.current)return;let a=R(s.current,i);return ()=>a.destroy()},[]),jsx("div",{ref:s,className:t,style:r,children:e})}export{K as ScrollDraw};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "svg-scroll-draw",
+  "version": "0.1.0",
+  "description": "Scroll-driven SVG path drawing animation library",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.mjs",
+      "require": "./dist/react/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "npm run build && npm run test"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^2.0.0",
+    "jsdom": "^25.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "vitest": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true }
+  }
+}