@ssgoi/core 7.0.1 → 7.0.2

package/dist/index.cjs

@@ -27,7 +27,7 @@
         transform: scaleY(${s==="hidden"?0:1});
         transform-origin: ${o==="left"?"top":"bottom"} center;
         will-change: transform;
-      `}c.push(p),l.appendChild(p)}return e.appendChild(l),{container:l,blinds:c}}const ze=(e={})=>{const t=e.blindCount??He,n=e.direction??Ne,i=e.blindColor??We,s=e.physics??ke;return{prepare:async({from:o,to:r})=>{const l=await o,c=await r;l.style.zIndex="1000";const a=St(l,t,n,i,"hidden","left");c.style.position="relative",c.style.zIndex="0";const p=St(c,t,n,i,"closed","right");return{fromEl:l,fromBlinds:a.blinds,fromContainer:a.container,toBlinds:p.blinds,toContainer:p.container}},animation:({fromEl:o,fromBlinds:r,fromContainer:l,toBlinds:c,toContainer:a})=>{const p=r.map(f=>new m.WebAnimation({element:f,integrator:w.from(s),style:y=>({transform:n==="horizontal"?`scaleX(${y})`:`scaleY(${y})`})})),u=c.map((f,y)=>new m.WebAnimation({element:f,integrator:w.from(s),style:(g,S)=>({transform:n==="horizontal"?`scaleX(${S})`:`scaleY(${S})`}),onComplete:y===c.length-1?()=>{a.remove(),l.remove(),o.style.zIndex="",o.style.position=""}:void 0})),d=new m.MultiAnimation(p,{mode:"parallel"}),h=new m.MultiAnimation(u,{mode:"parallel"});return new m.MultiAnimation([d,h],{mode:"sequence"})}}};function Ue(e={}){const{type:t="horizontal"}=e;return ze({direction:t})}const Ve={spring:{stiffness:250,damping:23,doubleSpring:.7}},L=.5;function Xe(e){const t=e==="enter"?-100:100,n=e==="enter"?100:-100;return{out:{willChange:"transform, opacity",startStyle:{},animate:i=>({transform:`translate3d(${t*i}%, 0, 0)`,opacity:`${L+(1-L)*(1-i)}`})},in:{willChange:"transform, opacity",startStyle:{transform:`translate3d(${n}%, 0, 0)`,opacity:`${L}`},animate:i=>({transform:`translate3d(${n*(1-i)}%, 0, 0)`,opacity:`${L+(1-L)*i}`})}}}function Be(){return{physics:Ve,build:Xe}}const Ze={spring:{stiffness:270,damping:25,doubleSpring:{stiffness:600,damping:50}}};function Ge(e){const t=e==="enter"?-20:100,n=e==="enter"?100:-20;return{out:{willChange:"transform",startStyle:{},animate:i=>({transform:`translate3d(${t*i}%, 0, 0)`})},in:{willChange:"transform",startStyle:{transform:`translate3d(${n}%, 0, 0)`},animate:i=>({transform:`translate3d(${n*(1-i)}%, 0, 0)`})}}}function je(){return{physics:Ze,build:Ge}}const qe={parallax:je(),crossfade:Be()},I="0",kt="1",R="2",Ke="parallax";function xt(e,t){e.style.willChange=t.willChange,e.style.backfaceVisibility="hidden",e.style.contain="layout paint";for(const[n,i]of Object.entries(t.startStyle))e.style[n]=i}const Je=(e={})=>{const t=qe[e.type??Ke],n=t.physics;return{prepare:({from:i,to:s,context:o})=>{const r=o.direction==="forward"?"enter":"exit",l=t.build(r),c=r==="enter"?I:R,a=r==="enter"?R:I;return i.then(p=>{xt(p,l.out),p.style.pointerEvents="none",p.style.zIndex=c}),s.then(p=>{xt(p,l.in),p.style.position="relative",p.style.zIndex=a}),{}},animation:({from:i,to:s,context:o})=>{const r=o.direction==="forward"?"enter":"exit",l=t.build(r),c=r==="enter"?R:I,a=new m.WebAnimation({element:i,integrator:w.from(n),style:u=>l.out.animate(u),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform="",i.style.opacity="",i.style.pointerEvents="",i.style.zIndex=""}}),p=new m.WebAnimation({element:s,integrator:w.from(n),style:u=>l.in.animate(u),onComplete:()=>{s.style.willChange="auto",s.style.backfaceVisibility="",s.style.contain="",s.style.transform="",s.style.opacity="",s.style.position==="relative"&&(s.style.position=""),s.style.zIndex===c&&(s.style.zIndex="")}});for(const u of[a,p]){const d=u.onComplete;u.onComplete=()=>{d==null||d(),u.releaseFill()}}return new m.MultiAnimation([a,p],{mode:"parallel"})}}};function Qe(e){return e==="slide"||e==="crossfade"?"crossfade":"parallax"}function tn(e={}){const t=e.type,n=Qe(t);return Je({type:n})}const en={spring:{stiffness:180,damping:20,doubleSpring:!0}},nn={spring:{stiffness:170,damping:20,doubleSpring:!0}},sn=(e={})=>{const t=e.physics??nn,n=e.physics??en;return{prepare:({to:i})=>(i.then(s=>{s.style.opacity="0",s.style.willChange="opacity"}),{}),animation:({from:i,to:s})=>{const o=new m.WebAnimation({element:i,integrator:w.from(n),style:(l,c)=>({opacity:c}),onComplete:()=>{i.style.willChange="auto",i.style.opacity=""}}),r=new m.WebAnimation({element:s,integrator:w.from(t),style:l=>({opacity:l}),onComplete:()=>{s.style.willChange="auto",s.style.opacity=""}});return new m.MultiAnimation([o,r],{mode:"sequence"})}}};function on(e={}){return sn()}const j={scaleDown:{stiffness:20,damping:7},translate:{stiffness:15,damping:7},scaleUp:{stiffness:20,damping:7}},D={scaleDown:0,translate:.2,scaleUp:.8},rn=.8,an="white",Ct=1e3/60,ln=600;function cn(e){const{items:t,from:n,to:i,recordFrame:s}=e,o=Ct/1e3,r=Math.abs(i-n),l=t.map(a=>({item:a,integrator:new U({stiffness:a.spring.stiffness,damping:a.spring.damping}),state:{position:n,velocity:0},started:!1,settled:!1,settleTime:0}));for(let a=0;a<l.length;a++)(a===0||l[a].item.offset===0)&&(l[a].started=!0);s(0);let c=0;for(let a=1;a<=ln;a++){const p=a*Ct;c=p;for(const u of l)!u.started||u.settled||(u.state=u.integrator.step(u.state,i,o),u.integrator.isSettled(u.state,i)?(u.settleTime+=o,u.settleTime>=m.SETTLE_THRESHOLD&&(u.state={position:i,velocity:0},u.settled=!0)):u.settleTime=0,u.item.tick(u.state.position));for(let u=1;u<l.length;u++){const d=l[u];if(d.started)continue;const h=l[u-1];if(!h.started)continue;(r===0?1:Math.abs(h.state.position-n)/r)>=d.item.offset&&(d.started=!0)}if(s(p),l.every(u=>u.settled))return p}return c}function q(e,t){return e!=null&&e.spring?{stiffness:e.spring.stiffness,damping:e.spring.damping}:t}function $t(e){const{rect:t,scale:n,direction:i,override:s}=e,o=i==="out"?{scale:1,translateY:-t.top}:{scale:n,translateY:-t.top+t.height},r=q(s,j.scaleDown),l=q(s,j.translate),c=q(s,j.scaleUp),a=i==="out"?1:0,p=i==="out"?0:1,u=i==="out"?[{spring:r,offset:D.scaleDown,tick:f=>{const y=1-f;o.scale=1-(1-n)*y}},{spring:l,offset:D.translate,tick:f=>{const y=1-f;o.translateY=-t.top-t.height*y}},{spring:c,offset:D.scaleUp,tick:f=>{const y=1-f;o.scale=n+(1-n)*y}}]:[{spring:r,offset:D.scaleDown,tick:f=>{o.scale=1-(1-n)*f}},{spring:l,offset:D.translate,tick:f=>{o.translateY=-t.top+t.height*(1-f)}},{spring:c,offset:D.scaleUp,tick:f=>{o.scale=n+(1-n)*f}}],d=[],h=cn({items:u,from:a,to:p,recordFrame:f=>d.push({time:f,scale:o.scale,translateY:o.translateY})});return{snapshots:d,totalDuration:h}}function pn(e,t){if(e.length===0)return{time:0,scale:1,translateY:0};if(e.length===1||t<=0)return e[0];if(t>=1)return e[e.length-1];const n=t*(e.length-1),i=Math.floor(n),s=Math.ceil(n);if(i===s)return e[i];const o=e[i],r=e[s],l=n-i;return{time:o.time+(r.time-o.time)*l,scale:o.scale+(r.scale-o.scale)*l,translateY:o.translateY+(r.translateY-o.translateY)*l}}const un=[[1,1],[-1,1],[1,-1],[-1,-1]];function dn(e,t){const s=(o,r,l)=>{const c=document.createElement("div");Object.assign(c.style,{position:"fixed",pointerEvents:"none",zIndex:"9999",width:"15px",height:"15px",...o});const a=document.createElement("div");Object.assign(a.style,{position:"absolute",width:"15px",height:"1px",backgroundColor:e,[l]:"0",[r]:"0"});const p=document.createElement("div");return Object.assign(p.style,{position:"absolute",width:"1px",height:"15px",backgroundColor:e,[l]:"0",[r]:"0"}),c.appendChild(a),c.appendChild(p),c};return{topLeft:s({top:`${t.top-1}px`,left:`${t.left-1}px`},"left","top"),topRight:s({top:`${t.top-1}px`,left:`${t.left+t.width-15+1}px`},"right","top"),bottomLeft:s({top:`${t.top+t.height-15+1}px`,left:`${t.left-1}px`},"left","bottom"),bottomRight:s({top:`${t.top+t.height-15+1}px`,left:`${t.left+t.width-15+1}px`},"right","bottom")}}function Et(e,t){const n=t.left+t.width/2,i=t.top+t.height/2;e.style.transformOrigin=`${n}px ${i}px`}function At(e,t){e.style.clipPath=`polygon(
+      `}c.push(p),l.appendChild(p)}return e.appendChild(l),{container:l,blinds:c}}const ze=(e={})=>{const t=e.blindCount??He,n=e.direction??Ne,i=e.blindColor??We,s=e.physics??ke;return{prepare:async({from:o,to:r})=>{const l=await o,c=await r;l.style.zIndex="1000";const a=St(l,t,n,i,"hidden","left");c.style.position="relative",c.style.zIndex="0";const p=St(c,t,n,i,"closed","right");return{fromEl:l,fromBlinds:a.blinds,fromContainer:a.container,toBlinds:p.blinds,toContainer:p.container}},animation:({fromEl:o,fromBlinds:r,fromContainer:l,toBlinds:c,toContainer:a})=>{const p=r.map(f=>new m.WebAnimation({element:f,integrator:w.from(s),style:y=>({transform:n==="horizontal"?`scaleX(${y})`:`scaleY(${y})`})})),u=c.map((f,y)=>new m.WebAnimation({element:f,integrator:w.from(s),style:(g,S)=>({transform:n==="horizontal"?`scaleX(${S})`:`scaleY(${S})`}),onComplete:y===c.length-1?()=>{a.remove(),l.remove(),o.style.zIndex="",o.style.position=""}:void 0})),d=new m.MultiAnimation(p,{mode:"parallel"}),h=new m.MultiAnimation(u,{mode:"parallel"});return new m.MultiAnimation([d,h],{mode:"sequence"})}}};function Ue(e={}){const{type:t="horizontal"}=e;return ze({direction:t})}const Ve={spring:{stiffness:250,damping:23,doubleSpring:.7}},L=.5;function Xe(e){const t=e==="enter"?-100:100,n=e==="enter"?100:-100;return{out:{willChange:"transform, opacity",startStyle:{},animate:i=>({transform:`translate3d(${t*i}%, 0, 0)`,opacity:`${L+(1-L)*(1-i)}`})},in:{willChange:"transform, opacity",startStyle:{transform:`translate3d(${n}%, 0, 0)`,opacity:`${L}`},animate:i=>({transform:`translate3d(${n*(1-i)}%, 0, 0)`,opacity:`${L+(1-L)*i}`})}}}function Be(){return{physics:Ve,build:Xe}}const Ze={spring:{stiffness:230,damping:25,doubleSpring:{stiffness:600,damping:50}}};function Ge(e){const t=e==="enter"?-20:100,n=e==="enter"?100:-20;return{out:{willChange:"transform",startStyle:{},animate:i=>({transform:`translate3d(${t*i}%, 0, 0)`})},in:{willChange:"transform",startStyle:{transform:`translate3d(${n}%, 0, 0)`},animate:i=>({transform:`translate3d(${n*(1-i)}%, 0, 0)`})}}}function je(){return{physics:Ze,build:Ge}}const qe={parallax:je(),crossfade:Be()},I="0",kt="1",R="2",Ke="parallax";function xt(e,t){e.style.willChange=t.willChange,e.style.backfaceVisibility="hidden",e.style.contain="layout paint";for(const[n,i]of Object.entries(t.startStyle))e.style[n]=i}const Je=(e={})=>{const t=qe[e.type??Ke],n=t.physics;return{prepare:({from:i,to:s,context:o})=>{const r=o.direction==="forward"?"enter":"exit",l=t.build(r),c=r==="enter"?I:R,a=r==="enter"?R:I;return i.then(p=>{xt(p,l.out),p.style.pointerEvents="none",p.style.zIndex=c}),s.then(p=>{xt(p,l.in),p.style.position="relative",p.style.zIndex=a}),{}},animation:({from:i,to:s,context:o})=>{const r=o.direction==="forward"?"enter":"exit",l=t.build(r),c=r==="enter"?R:I,a=new m.WebAnimation({element:i,integrator:w.from(n),style:u=>l.out.animate(u),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform="",i.style.opacity="",i.style.pointerEvents="",i.style.zIndex=""}}),p=new m.WebAnimation({element:s,integrator:w.from(n),style:u=>l.in.animate(u),onComplete:()=>{s.style.willChange="auto",s.style.backfaceVisibility="",s.style.contain="",s.style.transform="",s.style.opacity="",s.style.position==="relative"&&(s.style.position=""),s.style.zIndex===c&&(s.style.zIndex="")}});for(const u of[a,p]){const d=u.onComplete;u.onComplete=()=>{d==null||d(),u.releaseFill()}}return new m.MultiAnimation([a,p],{mode:"parallel"})}}};function Qe(e){return e==="slide"||e==="crossfade"?"crossfade":"parallax"}function tn(e={}){const t=e.type,n=Qe(t);return Je({type:n})}const en={spring:{stiffness:180,damping:20,doubleSpring:!0}},nn={spring:{stiffness:170,damping:20,doubleSpring:!0}},sn=(e={})=>{const t=e.physics??nn,n=e.physics??en;return{prepare:({to:i})=>(i.then(s=>{s.style.opacity="0",s.style.willChange="opacity"}),{}),animation:({from:i,to:s})=>{const o=new m.WebAnimation({element:i,integrator:w.from(n),style:(l,c)=>({opacity:c}),onComplete:()=>{i.style.willChange="auto",i.style.opacity=""}}),r=new m.WebAnimation({element:s,integrator:w.from(t),style:l=>({opacity:l}),onComplete:()=>{s.style.willChange="auto",s.style.opacity=""}});return new m.MultiAnimation([o,r],{mode:"sequence"})}}};function on(e={}){return sn()}const j={scaleDown:{stiffness:20,damping:7},translate:{stiffness:15,damping:7},scaleUp:{stiffness:20,damping:7}},D={scaleDown:0,translate:.2,scaleUp:.8},rn=.8,an="white",Ct=1e3/60,ln=600;function cn(e){const{items:t,from:n,to:i,recordFrame:s}=e,o=Ct/1e3,r=Math.abs(i-n),l=t.map(a=>({item:a,integrator:new U({stiffness:a.spring.stiffness,damping:a.spring.damping}),state:{position:n,velocity:0},started:!1,settled:!1,settleTime:0}));for(let a=0;a<l.length;a++)(a===0||l[a].item.offset===0)&&(l[a].started=!0);s(0);let c=0;for(let a=1;a<=ln;a++){const p=a*Ct;c=p;for(const u of l)!u.started||u.settled||(u.state=u.integrator.step(u.state,i,o),u.integrator.isSettled(u.state,i)?(u.settleTime+=o,u.settleTime>=m.SETTLE_THRESHOLD&&(u.state={position:i,velocity:0},u.settled=!0)):u.settleTime=0,u.item.tick(u.state.position));for(let u=1;u<l.length;u++){const d=l[u];if(d.started)continue;const h=l[u-1];if(!h.started)continue;(r===0?1:Math.abs(h.state.position-n)/r)>=d.item.offset&&(d.started=!0)}if(s(p),l.every(u=>u.settled))return p}return c}function q(e,t){return e!=null&&e.spring?{stiffness:e.spring.stiffness,damping:e.spring.damping}:t}function $t(e){const{rect:t,scale:n,direction:i,override:s}=e,o=i==="out"?{scale:1,translateY:-t.top}:{scale:n,translateY:-t.top+t.height},r=q(s,j.scaleDown),l=q(s,j.translate),c=q(s,j.scaleUp),a=i==="out"?1:0,p=i==="out"?0:1,u=i==="out"?[{spring:r,offset:D.scaleDown,tick:f=>{const y=1-f;o.scale=1-(1-n)*y}},{spring:l,offset:D.translate,tick:f=>{const y=1-f;o.translateY=-t.top-t.height*y}},{spring:c,offset:D.scaleUp,tick:f=>{const y=1-f;o.scale=n+(1-n)*y}}]:[{spring:r,offset:D.scaleDown,tick:f=>{o.scale=1-(1-n)*f}},{spring:l,offset:D.translate,tick:f=>{o.translateY=-t.top+t.height*(1-f)}},{spring:c,offset:D.scaleUp,tick:f=>{o.scale=n+(1-n)*f}}],d=[],h=cn({items:u,from:a,to:p,recordFrame:f=>d.push({time:f,scale:o.scale,translateY:o.translateY})});return{snapshots:d,totalDuration:h}}function pn(e,t){if(e.length===0)return{time:0,scale:1,translateY:0};if(e.length===1||t<=0)return e[0];if(t>=1)return e[e.length-1];const n=t*(e.length-1),i=Math.floor(n),s=Math.ceil(n);if(i===s)return e[i];const o=e[i],r=e[s],l=n-i;return{time:o.time+(r.time-o.time)*l,scale:o.scale+(r.scale-o.scale)*l,translateY:o.translateY+(r.translateY-o.translateY)*l}}const un=[[1,1],[-1,1],[1,-1],[-1,-1]];function dn(e,t){const s=(o,r,l)=>{const c=document.createElement("div");Object.assign(c.style,{position:"fixed",pointerEvents:"none",zIndex:"9999",width:"15px",height:"15px",...o});const a=document.createElement("div");Object.assign(a.style,{position:"absolute",width:"15px",height:"1px",backgroundColor:e,[l]:"0",[r]:"0"});const p=document.createElement("div");return Object.assign(p.style,{position:"absolute",width:"1px",height:"15px",backgroundColor:e,[l]:"0",[r]:"0"}),c.appendChild(a),c.appendChild(p),c};return{topLeft:s({top:`${t.top-1}px`,left:`${t.left-1}px`},"left","top"),topRight:s({top:`${t.top-1}px`,left:`${t.left+t.width-15+1}px`},"right","top"),bottomLeft:s({top:`${t.top+t.height-15+1}px`,left:`${t.left-1}px`},"left","bottom"),bottomRight:s({top:`${t.top+t.height-15+1}px`,left:`${t.left+t.width-15+1}px`},"right","bottom")}}function Et(e,t){const n=t.left+t.width/2,i=t.top+t.height/2;e.style.transformOrigin=`${n}px ${i}px`}function At(e,t){e.style.clipPath=`polygon(
     ${t.left}px ${t.top}px,
     ${t.left+t.width}px ${t.top}px,
     ${t.left+t.width}px ${t.top+t.height}px,

package/dist/index.js

@@ -677,7 +677,7 @@ function Ge() {
 }
 const je = {
   spring: {
-    stiffness: 270,
+    stiffness: 230,
     damping: 25,
     doubleSpring: {
       stiffness: 600,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/core",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Core animation engine for SSGOI - Native app-like page transitions with spring physics",
   "private": false,
   "type": "module",