svg-scroll-draw 2.19.1 → 2.20.0

package/README.md

@@ -640,7 +640,7 @@ devtools.highlight('#my-element'); // outline for 2 seconds
 | `svg-scroll-draw/aos` (styles included) | 3.1 KB |
 | `svg-scroll-draw/snap` | 1.9 KB |
 | `svg-scroll-draw/devtools` | 1.8 KB (dev only) |
-| `svg-scroll-draw/pin` | 1.4 KB |
+| `svg-scroll-draw/pin` | 1.6 KB |
 <!-- size-table:end -->
 
 Measured with `npm run size`: each entry plus the shared chunks it imports, minified, gzip level 9. Entries share their code through those chunks, so importing several costs less than the sum. For comparison, GSAP 3.15.0 core + ScrollTrigger is 45.3 KB gzipped, and 47.5 KB with DrawSVG. GSAP does far more than scroll animation; for the scroll effects this library covers, that is the size difference.

package/dist/pin/index.cjs

@@ -1 +1 @@
-'use strict';function T(t,r,p){return Math.min(p,Math.max(r,t))}var L=Symbol.for("svg-scroll-draw.registry");function z(){let t=globalThis;return t[L]||(t[L]=new Map)}function D(t,r){z().set(t,r);}function O(t){z().delete(t);}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 B(t,...r){W&&console.warn(`[svg-scroll-draw] ${t}`,...r);}var C={destroy:()=>{},refresh:()=>{},getProgress:()=>0};function Y(t,r={}){if(typeof window>"u")return C;let p=typeof t=="string"?document.querySelector(t):t;if(!p)return B("scrollPin: element not found:",t),C;let e=p,{top:c=0,scrollContainer:y,onEnter:V,onLeave:I,onEnterBack:M,onLeaveBack:$,onProgress:k}=r,A=typeof y=="string"?document.querySelector(y):y??null,o={position:e.style.position,top:e.style.top,bottom:e.style.bottom,left:e.style.left,width:e.style.width,boxSizing:e.style.boxSizing},n=document.createElement("div");n.setAttribute("data-ssd-pin-wrapper",""),n.style.cssText="position:relative;",e.parentNode?.insertBefore(n,e),n.appendChild(e);let m=0,g=0,b=0,a="before",v=0,h=0,w=false;function S(){m=n.offsetWidth,g=e.offsetHeight,b=r.pinDistance??window.innerHeight,n.style.height=`${g+b}px`;}function E(i){if(a===i)return;let s=a;if(a=i,i==="before")e.style.position=o.position,e.style.top=o.top,e.style.bottom=o.bottom,e.style.left=o.left,e.style.width=o.width,e.style.boxSizing=o.boxSizing,s==="pinned"&&$?.();else if(i==="pinned"){let _=n.getBoundingClientRect();e.style.position="fixed",e.style.top=`${c}px`,e.style.bottom="",e.style.left=`${_.left}px`,e.style.width=`${m}px`,e.style.boxSizing="border-box",s==="before"?V?.():s==="after"&&M?.();}else e.style.position="absolute",e.style.top="",e.style.bottom="0",e.style.left="0",e.style.width="100%",e.style.boxSizing="border-box",s==="pinned"&&I?.();}function N(){w=false;let i=n.getBoundingClientRect(),s=i.top,_=i.bottom,P=T((c-s)/b,0,1);v=P,k?.(P),s>c?E("before"):_-g<=c?E("after"):E("pinned");}function f(){w||(w=true,h=requestAnimationFrame(()=>N()));}function x(){S(),a==="pinned"&&(e.style.left=`${n.getBoundingClientRect().left}px`,e.style.width=`${m}px`),f();}let R=A??window;R.addEventListener("scroll",f,{passive:true});let l;function u(){clearTimeout(l),l=setTimeout(x,150);}window.addEventListener("resize",u),window.addEventListener("orientationchange",u);let d=null;return typeof ResizeObserver<"u"&&(d=new ResizeObserver(()=>{clearTimeout(l),l=setTimeout(x,100);}),d.observe(n),d.observe(document.documentElement),d.observe(e)),S(),f(),D(n,{type:"pin",getProgress:()=>v,getTrigger:()=>({tStart:0,tEnd:1})}),{destroy(){cancelAnimationFrame(h),clearTimeout(l),R.removeEventListener("scroll",f),window.removeEventListener("resize",u),window.removeEventListener("orientationchange",u),d?.disconnect(),e.style.position=o.position,e.style.top=o.top,e.style.bottom=o.bottom,e.style.left=o.left,e.style.width=o.width,e.style.boxSizing=o.boxSizing,n.parentNode?.insertBefore(e,n),n.remove(),O(n);},refresh(){x();},getProgress(){return v}}}exports.scrollPin=Y;
+'use strict';function z(t,s,a){return Math.min(a,Math.max(s,t))}var D=Symbol.for("svg-scroll-draw.registry");function O(){let t=globalThis;return t[D]||(t[D]=new Map)}function B(t,s){O().set(t,s);}function C(t){O().delete(t);}var F=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function S(t,...s){F&&console.warn(`[svg-scroll-draw] ${t}`,...s);}var V={destroy:()=>{},refresh:()=>{},getProgress:()=>0};function Q(t,s={}){if(typeof window>"u")return V;let a=typeof t=="string"?document.querySelector(t):t;if(!a)return S("scrollPin: element not found:",t),V;let e=a,{top:f=0,scrollContainer:g,onEnter:$,onLeave:H,onEnterBack:I,onLeaveBack:M,onProgress:k}=s,A=typeof g=="string"?document.querySelector(g):g??null,i={position:e.style.position,top:e.style.top,bottom:e.style.bottom,left:e.style.left,width:e.style.width,boxSizing:e.style.boxSizing},n=document.createElement("div");n.setAttribute("data-ssd-pin-wrapper",""),n.style.cssText="position:relative;",e.parentNode?.insertBefore(n,e),n.appendChild(e);let b=0,v=0,w=0,u="before",h=0,R=0,E=false,P=false;function N(){let o=s.pinDistance;if(o===void 0)return window.innerHeight;if(typeof o=="number")return o;let r=parseFloat(o),d=o.trim().slice(-2);if(r===r&&d==="px")return r;if(r===r&&d==="vh"){let l=document.createElement("div");l.style.cssText="position:fixed;height:100vh",document.body.appendChild(l);let q=l.offsetHeight||window.innerHeight;return l.remove(),r*q/100}return P||S("scrollPin: pinDistance is not a number, vh or px; using window.innerHeight:",o),P=true,window.innerHeight}function T(){b=n.offsetWidth,v=e.offsetHeight,w=N(),n.style.height=`${v+w}px`;}function x(o){if(u===o)return;let r=u;if(u=o,o==="before")e.style.position=i.position,e.style.top=i.top,e.style.bottom=i.bottom,e.style.left=i.left,e.style.width=i.width,e.style.boxSizing=i.boxSizing,r==="pinned"&&M?.();else if(o==="pinned"){let d=n.getBoundingClientRect();e.style.position="fixed",e.style.top=`${f}px`,e.style.bottom="",e.style.left=`${d.left}px`,e.style.width=`${b}px`,e.style.boxSizing="border-box",r==="before"?$?.():r==="after"&&I?.();}else e.style.position="absolute",e.style.top="",e.style.bottom="0",e.style.left="0",e.style.width="100%",e.style.boxSizing="border-box",r==="pinned"&&H?.();}function W(){E=false;let o=n.getBoundingClientRect(),r=o.top,d=o.bottom,l=z((f-r)/w,0,1);h=l,k?.(l),r>f?x("before"):d-v<=f?x("after"):x("pinned");}function m(){E||(E=true,R=requestAnimationFrame(()=>W()));}function _(){T(),u==="pinned"&&(e.style.left=`${n.getBoundingClientRect().left}px`,e.style.width=`${b}px`),m();}let L=A??window;L.addEventListener("scroll",m,{passive:true});let c;function y(){clearTimeout(c),c=setTimeout(_,150);}window.addEventListener("resize",y),window.addEventListener("orientationchange",y);let p=null;return typeof ResizeObserver<"u"&&(p=new ResizeObserver(()=>{clearTimeout(c),c=setTimeout(_,100);}),p.observe(n),p.observe(document.documentElement),p.observe(e)),T(),m(),B(n,{type:"pin",getProgress:()=>h,getTrigger:()=>({tStart:0,tEnd:1})}),{destroy(){cancelAnimationFrame(R),clearTimeout(c),L.removeEventListener("scroll",m),window.removeEventListener("resize",y),window.removeEventListener("orientationchange",y),p?.disconnect(),e.style.position=i.position,e.style.top=i.top,e.style.bottom=i.bottom,e.style.left=i.left,e.style.width=i.width,e.style.boxSizing=i.boxSizing,n.parentNode?.insertBefore(e,n),n.remove(),C(n);},refresh(){_();},getProgress(){return h}}}exports.scrollPin=Q;

package/dist/pin/index.d.mts

@@ -1,6 +1,12 @@
 interface ScrollPinOptions {
-    /** Extra pixels of scroll to stay pinned after the element hits its viewport position. Default: viewport height. */
-    pinDistance?: number;
+    /**
+     * How much scroll the element stays pinned for once it reaches `top`.
+     * A number is pixels and stays that; `'600px'` is 600. `'150vh'` is CSS's
+     * 150vh: it follows rotation and window resizes, but not a phone's address
+     * bar sliding in and out. Default: `window.innerHeight`, read again on every
+     * resize, address bar included.
+     */
+    pinDistance?: number | `${number}vh` | `${number}px`;
     /** Viewport Y position (px) where the element pins. Default: 0 (top of viewport). */
     top?: number;
     /** Custom scroll container (CSS selector or Element). Default: window. */

package/dist/pin/index.d.ts

@@ -1,6 +1,12 @@
 interface ScrollPinOptions {
-    /** Extra pixels of scroll to stay pinned after the element hits its viewport position. Default: viewport height. */
-    pinDistance?: number;
+    /**
+     * How much scroll the element stays pinned for once it reaches `top`.
+     * A number is pixels and stays that; `'600px'` is 600. `'150vh'` is CSS's
+     * 150vh: it follows rotation and window resizes, but not a phone's address
+     * bar sliding in and out. Default: `window.innerHeight`, read again on every
+     * resize, address bar included.
+     */
+    pinDistance?: number | `${number}vh` | `${number}px`;
     /** Viewport Y position (px) where the element pins. Default: 0 (top of viewport). */
     top?: number;
     /** Custom scroll container (CSS selector or Element). Default: window. */

package/dist/pin/index.mjs

@@ -1 +1 @@
-import {a as a$1}from'../chunk-4DOJSIEQ.mjs';import {a,b as b$1}from'../chunk-BCV4RAIX.mjs';import {b}from'../chunk-LFSU6LR3.mjs';var C={destroy:()=>{},refresh:()=>{},getProgress:()=>0};function _(l,x={}){if(typeof window>"u")return C;let E=typeof l=="string"?document.querySelector(l):l;if(!E)return b("scrollPin: element not found:",l),C;let e=E,{top:d=0,scrollContainer:a$2,onEnter:$,onLeave:k,onEnterBack:H,onLeaveBack:I,onProgress:q}=x,A=typeof a$2=="string"?document.querySelector(a$2):a$2??null,o={position:e.style.position,top:e.style.top,bottom:e.style.bottom,left:e.style.left,width:e.style.width,boxSizing:e.style.boxSizing},t=document.createElement("div");t.setAttribute("data-ssd-pin-wrapper",""),t.style.cssText="position:relative;",e.parentNode?.insertBefore(t,e),t.appendChild(e);let m=0,u=0,y=0,c="before",g=0,P=0,b$2=false;function S(){m=t.offsetWidth,u=e.offsetHeight,y=x.pinDistance??window.innerHeight,t.style.height=`${u+y}px`;}function v(n){if(c===n)return;let i=c;if(c=n,n==="before")e.style.position=o.position,e.style.top=o.top,e.style.bottom=o.bottom,e.style.left=o.left,e.style.width=o.width,e.style.boxSizing=o.boxSizing,i==="pinned"&&I?.();else if(n==="pinned"){let h=t.getBoundingClientRect();e.style.position="fixed",e.style.top=`${d}px`,e.style.bottom="",e.style.left=`${h.left}px`,e.style.width=`${m}px`,e.style.boxSizing="border-box",i==="before"?$?.():i==="after"&&H?.();}else e.style.position="absolute",e.style.top="",e.style.bottom="0",e.style.left="0",e.style.width="100%",e.style.boxSizing="border-box",i==="pinned"&&k?.();}function D(){b$2=false;let n=t.getBoundingClientRect(),i=n.top,h=n.bottom,T=a$1((d-i)/y,0,1);g=T,q?.(T),i>d?v("before"):h-u<=d?v("after"):v("pinned");}function p(){b$2||(b$2=true,P=requestAnimationFrame(()=>D()));}function w(){S(),c==="pinned"&&(e.style.left=`${t.getBoundingClientRect().left}px`,e.style.width=`${m}px`),p();}let z=A??window;z.addEventListener("scroll",p,{passive:true});let r;function f(){clearTimeout(r),r=setTimeout(w,150);}window.addEventListener("resize",f),window.addEventListener("orientationchange",f);let s=null;return typeof ResizeObserver<"u"&&(s=new ResizeObserver(()=>{clearTimeout(r),r=setTimeout(w,100);}),s.observe(t),s.observe(document.documentElement),s.observe(e)),S(),p(),a(t,{type:"pin",getProgress:()=>g,getTrigger:()=>({tStart:0,tEnd:1})}),{destroy(){cancelAnimationFrame(P),clearTimeout(r),z.removeEventListener("scroll",p),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),s?.disconnect(),e.style.position=o.position,e.style.top=o.top,e.style.bottom=o.bottom,e.style.left=o.left,e.style.width=o.width,e.style.boxSizing=o.boxSizing,t.parentNode?.insertBefore(e,t),t.remove(),b$1(t);},refresh(){w();},getProgress(){return g}}}export{_ as scrollPin};
+import {a as a$1}from'../chunk-4DOJSIEQ.mjs';import {a,b as b$1}from'../chunk-BCV4RAIX.mjs';import {b}from'../chunk-LFSU6LR3.mjs';var C={destroy:()=>{},refresh:()=>{},getProgress:()=>0};function V(c,P={}){if(typeof window>"u")return C;let S=typeof c=="string"?document.querySelector(c):c;if(!S)return b("scrollPin: element not found:",c),C;let e=S,{top:p=0,scrollContainer:m,onEnter:O,onLeave:k,onEnterBack:D,onLeaveBack:I,onProgress:q}=P,A=typeof m=="string"?document.querySelector(m):m??null,i={position:e.style.position,top:e.style.top,bottom:e.style.bottom,left:e.style.left,width:e.style.width,boxSizing:e.style.boxSizing},t=document.createElement("div");t.setAttribute("data-ssd-pin-wrapper",""),t.style.cssText="position:relative;",e.parentNode?.insertBefore(t,e),t.appendChild(e);let y=0,g=0,b$2=0,f="before",v=0,z=0,h=false,T=false;function F(){let n=P.pinDistance;if(n===void 0)return window.innerHeight;if(typeof n=="number")return n;let o=parseFloat(n),s=n.trim().slice(-2);if(o===o&&s==="px")return o;if(o===o&&s==="vh"){let r=document.createElement("div");r.style.cssText="position:fixed;height:100vh",document.body.appendChild(r);let W=r.offsetHeight||window.innerHeight;return r.remove(),o*W/100}return T||b("scrollPin: pinDistance is not a number, vh or px; using window.innerHeight:",n),T=true,window.innerHeight}function L(){y=t.offsetWidth,g=e.offsetHeight,b$2=F(),t.style.height=`${g+b$2}px`;}function w(n){if(f===n)return;let o=f;if(f=n,n==="before")e.style.position=i.position,e.style.top=i.top,e.style.bottom=i.bottom,e.style.left=i.left,e.style.width=i.width,e.style.boxSizing=i.boxSizing,o==="pinned"&&I?.();else if(n==="pinned"){let s=t.getBoundingClientRect();e.style.position="fixed",e.style.top=`${p}px`,e.style.bottom="",e.style.left=`${s.left}px`,e.style.width=`${y}px`,e.style.boxSizing="border-box",o==="before"?O?.():o==="after"&&D?.();}else e.style.position="absolute",e.style.top="",e.style.bottom="0",e.style.left="0",e.style.width="100%",e.style.boxSizing="border-box",o==="pinned"&&k?.();}function N(){h=false;let n=t.getBoundingClientRect(),o=n.top,s=n.bottom,r=a$1((p-o)/b$2,0,1);v=r,q?.(r),o>p?w("before"):s-g<=p?w("after"):w("pinned");}function a$2(){h||(h=true,z=requestAnimationFrame(()=>N()));}function x(){L(),f==="pinned"&&(e.style.left=`${t.getBoundingClientRect().left}px`,e.style.width=`${y}px`),a$2();}let B=A??window;B.addEventListener("scroll",a$2,{passive:true});let l;function u(){clearTimeout(l),l=setTimeout(x,150);}window.addEventListener("resize",u),window.addEventListener("orientationchange",u);let d=null;return typeof ResizeObserver<"u"&&(d=new ResizeObserver(()=>{clearTimeout(l),l=setTimeout(x,100);}),d.observe(t),d.observe(document.documentElement),d.observe(e)),L(),a$2(),a(t,{type:"pin",getProgress:()=>v,getTrigger:()=>({tStart:0,tEnd:1})}),{destroy(){cancelAnimationFrame(z),clearTimeout(l),B.removeEventListener("scroll",a$2),window.removeEventListener("resize",u),window.removeEventListener("orientationchange",u),d?.disconnect(),e.style.position=i.position,e.style.top=i.top,e.style.bottom=i.bottom,e.style.left=i.left,e.style.width=i.width,e.style.boxSizing=i.boxSizing,t.parentNode?.insertBefore(e,t),t.remove(),b$1(t);},refresh(){x();},getProgress(){return v}}}export{V as scrollPin};

package/dist/react/index.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { RefObject } from 'react';
 import { E as EasingName, T as TriggerConfig, a as ScrollDrawOptions } from '../types-MswK0erX.mjs';
 import { S as ScrollAnimateOptions } from '../engine-P8u6OK4m.mjs';
@@ -40,18 +39,18 @@ type ScrollDrawProps = ScrollDrawOptions & ElementAttrs & {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function ScrollDraw({ children, className, style, ...rest }: ScrollDrawProps): react_jsx_runtime.JSX.Element;
+declare function ScrollDraw({ children, className, style, ...rest }: ScrollDrawProps): React.JSX.Element;
 type ScrollAnimateProps = ScrollAnimateOptions & ElementAttrs & {
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
 };
-declare function ScrollAnimate({ children, className, style, ...rest }: ScrollAnimateProps): react_jsx_runtime.JSX.Element;
+declare function ScrollAnimate({ children, className, style, ...rest }: ScrollAnimateProps): React.JSX.Element;
 type ScrollCounterProps = ScrollCounterOptions & ElementAttrs & {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function ScrollCounter({ className, style, ...rest }: ScrollCounterProps): react_jsx_runtime.JSX.Element;
+declare function ScrollCounter({ className, style, ...rest }: ScrollCounterProps): React.JSX.Element;
 type ScrollVideoProps = ScrollVideoOptions & ElementAttrs & {
     src: string;
     className?: string;
@@ -59,7 +58,7 @@ type ScrollVideoProps = ScrollVideoOptions & ElementAttrs & {
     muted?: boolean;
     playsInline?: boolean;
 };
-declare function ScrollVideo({ src, className, style, muted, playsInline, ...rest }: ScrollVideoProps): react_jsx_runtime.JSX.Element;
+declare function ScrollVideo({ src, className, style, muted, playsInline, ...rest }: ScrollVideoProps): React.JSX.Element;
 type ScrollTextProps = ScrollTextOptions & ElementAttrs & {
     children: string;
     as?: keyof React.JSX.IntrinsicElements;

package/dist/react/index.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { RefObject } from 'react';
 import { E as EasingName, T as TriggerConfig, a as ScrollDrawOptions } from '../types-MswK0erX.js';
 import { S as ScrollAnimateOptions } from '../engine-DQyBzZDl.js';
@@ -40,18 +39,18 @@ type ScrollDrawProps = ScrollDrawOptions & ElementAttrs & {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function ScrollDraw({ children, className, style, ...rest }: ScrollDrawProps): react_jsx_runtime.JSX.Element;
+declare function ScrollDraw({ children, className, style, ...rest }: ScrollDrawProps): React.JSX.Element;
 type ScrollAnimateProps = ScrollAnimateOptions & ElementAttrs & {
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
 };
-declare function ScrollAnimate({ children, className, style, ...rest }: ScrollAnimateProps): react_jsx_runtime.JSX.Element;
+declare function ScrollAnimate({ children, className, style, ...rest }: ScrollAnimateProps): React.JSX.Element;
 type ScrollCounterProps = ScrollCounterOptions & ElementAttrs & {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function ScrollCounter({ className, style, ...rest }: ScrollCounterProps): react_jsx_runtime.JSX.Element;
+declare function ScrollCounter({ className, style, ...rest }: ScrollCounterProps): React.JSX.Element;
 type ScrollVideoProps = ScrollVideoOptions & ElementAttrs & {
     src: string;
     className?: string;
@@ -59,7 +58,7 @@ type ScrollVideoProps = ScrollVideoOptions & ElementAttrs & {
     muted?: boolean;
     playsInline?: boolean;
 };
-declare function ScrollVideo({ src, className, style, muted, playsInline, ...rest }: ScrollVideoProps): react_jsx_runtime.JSX.Element;
+declare function ScrollVideo({ src, className, style, muted, playsInline, ...rest }: ScrollVideoProps): React.JSX.Element;
 type ScrollTextProps = ScrollTextOptions & ElementAttrs & {
     children: string;
     as?: keyof React.JSX.IntrinsicElements;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "2.19.1",
+  "version": "2.20.0",
   "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",
   "keywords": [
     "svg",
@@ -472,7 +472,7 @@
     "@playwright/test": "^1.65.0",
     "@types/react": "^18.0.0",
     "@vitest/coverage-v8": "^2.0.0",
-    "esbuild": "^0.27.7",
+    "esbuild": "^0.28.2",
     "jsdom": "^25.0.0",
     "scrollreveal": "^4.0.9",
     "solid-js": "^1.9.13",