@ssgoi/core 6.6.11 → 6.6.12

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/dist/index.cjs CHANGED
@@ -27,7 +27,7 @@
27
27
  transform: scaleY(${s==="hidden"?0:1});
28
28
  transform-origin: ${o==="left"?"top":"bottom"} center;
29
29
  will-change: transform;
30
- `}a.push(u),l.appendChild(u)}return e.appendChild(l),{container:l,blinds:a}}const Be=(e={})=>{const t=e.blindCount??Ue,n=e.direction??Ve,i=e.blindColor??Xe,s=e.physics??ze;return{prepare:async({from:o,to:r})=>{const l=await o,a=await r;l.style.zIndex="1000";const c=Ct(l,t,n,i,"hidden","left");a.style.position="relative",a.style.zIndex="0";const u=Ct(a,t,n,i,"closed","right");return{fromEl:l,fromBlinds:c.blinds,fromContainer:c.container,toBlinds:u.blinds,toContainer:u.container}},animation:({fromEl:o,fromBlinds:r,fromContainer:l,toBlinds:a,toContainer:c})=>{const u=r.map(f=>new m.WebAnimation({element:f,integrator:w.from(s),style:h=>({transform:n==="horizontal"?`scaleX(${h})`:`scaleY(${h})`})})),p=a.map((f,h)=>new m.WebAnimation({element:f,integrator:w.from(s),style:(g,S)=>({transform:n==="horizontal"?`scaleX(${S})`:`scaleY(${S})`}),onComplete:h===a.length-1?()=>{c.remove(),l.remove(),o.style.zIndex="",o.style.position=""}:void 0})),d=new m.MultiAnimation(u,{mode:"parallel"}),y=new m.MultiAnimation(p,{mode:"parallel"});return new m.MultiAnimation([d,y],{mode:"sequence"})}}};function Ze(e){const{paths:t,type:n="horizontal"}=e;return _(t,()=>Be({direction:n}))}const Ge={spring:{stiffness:250,damping:23,doubleSpring:.7}},L=.5;function je(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 qe(){return{physics:Ge,build:je}}const Ke={spring:{stiffness:230,damping:25}};function Je(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 Qe(){return{physics:Ke,build:Je}}const tn={parallax:Qe(),crossfade:qe()},R="0",zt="1",O="2",en="parallax";function $t(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 nn=(e={})=>{const t=e.direction??"enter",n=tn[e.type??en],i=n.physics,s=n.build(t),o=t==="enter"?R:O,r=t==="enter"?O:R;return{prepare:({from:l,to:a})=>(l.then(c=>{$t(c,s.out),c.style.pointerEvents="none",c.style.zIndex=o}),a.then(c=>{$t(c,s.in),c.style.position="relative",c.style.zIndex=r}),{}),animation:({from:l,to:a})=>{const c=new m.WebAnimation({element:l,integrator:w.from(i),style:p=>s.out.animate(p),onComplete:()=>{l.style.willChange="auto",l.style.backfaceVisibility="",l.style.contain="",l.style.transform="",l.style.opacity="",l.style.pointerEvents="",l.style.zIndex=""}}),u=new m.WebAnimation({element:a,integrator:w.from(i),style:p=>s.in.animate(p),onComplete:()=>{a.style.willChange="auto",a.style.backfaceVisibility="",a.style.contain="",a.style.transform="",a.style.opacity="",a.style.position==="relative"&&(a.style.position=""),a.style.zIndex===r&&(a.style.zIndex="")}});for(const p of[c,u]){const d=p.onComplete;p.onComplete=()=>{d==null||d(),p.releaseFill()}}return new m.MultiAnimation([c,u],{mode:"parallel"})}}};function sn(e){return e==="slide"||e==="crossfade"?"crossfade":"parallax"}function on(e){const{enter:t,exit:n}=e,i=e.type,s=sn(i);return Ht({enter:t,exit:n},o=>nn({direction:o,type:s}))}const rn={spring:{stiffness:180,damping:20,doubleSpring:!0}},an={spring:{stiffness:170,damping:20,doubleSpring:!0}},ln=(e={})=>{const t=e.physics??an,n=e.physics??rn;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,a)=>({opacity:a}),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 cn(e){const{paths:t}=e;return _(t,()=>ln())}const q={scaleDown:{stiffness:20,damping:7},translate:{stiffness:15,damping:7},scaleUp:{stiffness:20,damping:7}},F={scaleDown:0,translate:.2,scaleUp:.8},pn=.8,un="white",Et=1e3/60,dn=600;function fn(e){const{items:t,from:n,to:i,recordFrame:s}=e,o=Et/1e3,r=Math.abs(i-n),l=t.map(c=>({item:c,integrator:new V({stiffness:c.spring.stiffness,damping:c.spring.damping}),state:{position:n,velocity:0},started:!1,settled:!1,settleTime:0}));for(let c=0;c<l.length;c++)(c===0||l[c].item.offset===0)&&(l[c].started=!0);s(0);let a=0;for(let c=1;c<=dn;c++){const u=c*Et;a=u;for(const p of l)!p.started||p.settled||(p.state=p.integrator.step(p.state,i,o),p.integrator.isSettled(p.state,i)?(p.settleTime+=o,p.settleTime>=m.SETTLE_THRESHOLD&&(p.state={position:i,velocity:0},p.settled=!0)):p.settleTime=0,p.item.tick(p.state.position));for(let p=1;p<l.length;p++){const d=l[p];if(d.started)continue;const y=l[p-1];if(!y.started)continue;(r===0?1:Math.abs(y.state.position-n)/r)>=d.item.offset&&(d.started=!0)}if(s(u),l.every(p=>p.settled))return u}return a}function K(e,t){return e!=null&&e.spring?{stiffness:e.spring.stiffness,damping:e.spring.damping}:t}function At(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=K(s,q.scaleDown),l=K(s,q.translate),a=K(s,q.scaleUp),c=i==="out"?1:0,u=i==="out"?0:1,p=i==="out"?[{spring:r,offset:F.scaleDown,tick:f=>{const h=1-f;o.scale=1-(1-n)*h}},{spring:l,offset:F.translate,tick:f=>{const h=1-f;o.translateY=-t.top-t.height*h}},{spring:a,offset:F.scaleUp,tick:f=>{const h=1-f;o.scale=n+(1-n)*h}}]:[{spring:r,offset:F.scaleDown,tick:f=>{o.scale=1-(1-n)*f}},{spring:l,offset:F.translate,tick:f=>{o.translateY=-t.top+t.height*(1-f)}},{spring:a,offset:F.scaleUp,tick:f=>{o.scale=n+(1-n)*f}}],d=[],y=fn({items:p,from:c,to:u,recordFrame:f=>d.push({time:f,scale:o.scale,translateY:o.translateY})});return{snapshots:d,totalDuration:y}}function hn(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 yn=[[1,1],[-1,1],[1,-1],[-1,-1]];function mn(e,t){const s=(o,r,l)=>{const a=document.createElement("div");Object.assign(a.style,{position:"fixed",pointerEvents:"none",zIndex:"9999",width:"15px",height:"15px",...o});const c=document.createElement("div");Object.assign(c.style,{position:"absolute",width:"15px",height:"1px",backgroundColor:e,[l]:"0",[r]:"0"});const u=document.createElement("div");return Object.assign(u.style,{position:"absolute",width:"1px",height:"15px",backgroundColor:e,[l]:"0",[r]:"0"}),a.appendChild(c),a.appendChild(u),a};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 Pt(e,t){const n=t.left+t.width/2,i=t.top+t.height/2;e.style.transformOrigin=`${n}px ${i}px`}function It(e,t){e.style.clipPath=`polygon(
30
+ `}a.push(u),l.appendChild(u)}return e.appendChild(l),{container:l,blinds:a}}const Be=(e={})=>{const t=e.blindCount??Ue,n=e.direction??Ve,i=e.blindColor??Xe,s=e.physics??ze;return{prepare:async({from:o,to:r})=>{const l=await o,a=await r;l.style.zIndex="1000";const c=Ct(l,t,n,i,"hidden","left");a.style.position="relative",a.style.zIndex="0";const u=Ct(a,t,n,i,"closed","right");return{fromEl:l,fromBlinds:c.blinds,fromContainer:c.container,toBlinds:u.blinds,toContainer:u.container}},animation:({fromEl:o,fromBlinds:r,fromContainer:l,toBlinds:a,toContainer:c})=>{const u=r.map(f=>new m.WebAnimation({element:f,integrator:w.from(s),style:h=>({transform:n==="horizontal"?`scaleX(${h})`:`scaleY(${h})`})})),p=a.map((f,h)=>new m.WebAnimation({element:f,integrator:w.from(s),style:(g,S)=>({transform:n==="horizontal"?`scaleX(${S})`:`scaleY(${S})`}),onComplete:h===a.length-1?()=>{c.remove(),l.remove(),o.style.zIndex="",o.style.position=""}:void 0})),d=new m.MultiAnimation(u,{mode:"parallel"}),y=new m.MultiAnimation(p,{mode:"parallel"});return new m.MultiAnimation([d,y],{mode:"sequence"})}}};function Ze(e){const{paths:t,type:n="horizontal"}=e;return _(t,()=>Be({direction:n}))}const Ge={spring:{stiffness:250,damping:23,doubleSpring:.7}},L=.5;function je(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 qe(){return{physics:Ge,build:je}}const Ke={spring:{stiffness:270,damping:25,doubleSpring:{stiffness:600,damping:50}}};function Je(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 Qe(){return{physics:Ke,build:Je}}const tn={parallax:Qe(),crossfade:qe()},R="0",zt="1",O="2",en="parallax";function $t(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 nn=(e={})=>{const t=e.direction??"enter",n=tn[e.type??en],i=n.physics,s=n.build(t),o=t==="enter"?R:O,r=t==="enter"?O:R;return{prepare:({from:l,to:a})=>(l.then(c=>{$t(c,s.out),c.style.pointerEvents="none",c.style.zIndex=o}),a.then(c=>{$t(c,s.in),c.style.position="relative",c.style.zIndex=r}),{}),animation:({from:l,to:a})=>{const c=new m.WebAnimation({element:l,integrator:w.from(i),style:p=>s.out.animate(p),onComplete:()=>{l.style.willChange="auto",l.style.backfaceVisibility="",l.style.contain="",l.style.transform="",l.style.opacity="",l.style.pointerEvents="",l.style.zIndex=""}}),u=new m.WebAnimation({element:a,integrator:w.from(i),style:p=>s.in.animate(p),onComplete:()=>{a.style.willChange="auto",a.style.backfaceVisibility="",a.style.contain="",a.style.transform="",a.style.opacity="",a.style.position==="relative"&&(a.style.position=""),a.style.zIndex===r&&(a.style.zIndex="")}});for(const p of[c,u]){const d=p.onComplete;p.onComplete=()=>{d==null||d(),p.releaseFill()}}return new m.MultiAnimation([c,u],{mode:"parallel"})}}};function sn(e){return e==="slide"||e==="crossfade"?"crossfade":"parallax"}function on(e){const{enter:t,exit:n}=e,i=e.type,s=sn(i);return Ht({enter:t,exit:n},o=>nn({direction:o,type:s}))}const rn={spring:{stiffness:180,damping:20,doubleSpring:!0}},an={spring:{stiffness:170,damping:20,doubleSpring:!0}},ln=(e={})=>{const t=e.physics??an,n=e.physics??rn;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,a)=>({opacity:a}),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 cn(e){const{paths:t}=e;return _(t,()=>ln())}const q={scaleDown:{stiffness:20,damping:7},translate:{stiffness:15,damping:7},scaleUp:{stiffness:20,damping:7}},F={scaleDown:0,translate:.2,scaleUp:.8},pn=.8,un="white",Et=1e3/60,dn=600;function fn(e){const{items:t,from:n,to:i,recordFrame:s}=e,o=Et/1e3,r=Math.abs(i-n),l=t.map(c=>({item:c,integrator:new V({stiffness:c.spring.stiffness,damping:c.spring.damping}),state:{position:n,velocity:0},started:!1,settled:!1,settleTime:0}));for(let c=0;c<l.length;c++)(c===0||l[c].item.offset===0)&&(l[c].started=!0);s(0);let a=0;for(let c=1;c<=dn;c++){const u=c*Et;a=u;for(const p of l)!p.started||p.settled||(p.state=p.integrator.step(p.state,i,o),p.integrator.isSettled(p.state,i)?(p.settleTime+=o,p.settleTime>=m.SETTLE_THRESHOLD&&(p.state={position:i,velocity:0},p.settled=!0)):p.settleTime=0,p.item.tick(p.state.position));for(let p=1;p<l.length;p++){const d=l[p];if(d.started)continue;const y=l[p-1];if(!y.started)continue;(r===0?1:Math.abs(y.state.position-n)/r)>=d.item.offset&&(d.started=!0)}if(s(u),l.every(p=>p.settled))return u}return a}function K(e,t){return e!=null&&e.spring?{stiffness:e.spring.stiffness,damping:e.spring.damping}:t}function At(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=K(s,q.scaleDown),l=K(s,q.translate),a=K(s,q.scaleUp),c=i==="out"?1:0,u=i==="out"?0:1,p=i==="out"?[{spring:r,offset:F.scaleDown,tick:f=>{const h=1-f;o.scale=1-(1-n)*h}},{spring:l,offset:F.translate,tick:f=>{const h=1-f;o.translateY=-t.top-t.height*h}},{spring:a,offset:F.scaleUp,tick:f=>{const h=1-f;o.scale=n+(1-n)*h}}]:[{spring:r,offset:F.scaleDown,tick:f=>{o.scale=1-(1-n)*f}},{spring:l,offset:F.translate,tick:f=>{o.translateY=-t.top+t.height*(1-f)}},{spring:a,offset:F.scaleUp,tick:f=>{o.scale=n+(1-n)*f}}],d=[],y=fn({items:p,from:c,to:u,recordFrame:f=>d.push({time:f,scale:o.scale,translateY:o.translateY})});return{snapshots:d,totalDuration:y}}function hn(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 yn=[[1,1],[-1,1],[1,-1],[-1,-1]];function mn(e,t){const s=(o,r,l)=>{const a=document.createElement("div");Object.assign(a.style,{position:"fixed",pointerEvents:"none",zIndex:"9999",width:"15px",height:"15px",...o});const c=document.createElement("div");Object.assign(c.style,{position:"absolute",width:"15px",height:"1px",backgroundColor:e,[l]:"0",[r]:"0"});const u=document.createElement("div");return Object.assign(u.style,{position:"absolute",width:"1px",height:"15px",backgroundColor:e,[l]:"0",[r]:"0"}),a.appendChild(c),a.appendChild(u),a};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 Pt(e,t){const n=t.left+t.width/2,i=t.top+t.height/2;e.style.transformOrigin=`${n}px ${i}px`}function It(e,t){e.style.clipPath=`polygon(
31
31
  ${t.left}px ${t.top}px,
32
32
  ${t.left+t.width}px ${t.top}px,
33
33
  ${t.left+t.width}px ${t.top+t.height}px,
package/dist/index.js CHANGED
@@ -730,8 +730,12 @@ function Je() {
730
730
  }
731
731
  const Qe = {
732
732
  spring: {
733
- stiffness: 230,
734
- damping: 25
733
+ stiffness: 270,
734
+ damping: 25,
735
+ doubleSpring: {
736
+ stiffness: 600,
737
+ damping: 50
738
+ }
735
739
  }
736
740
  };
737
741
  function tn(e) {
@@ -1 +1 @@
1
- {"version":3,"file":"parallax.d.ts","sourceRoot":"","sources":["../../../../src/lib/transitions/drill/provider/parallax.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,UAAU,CAAC;AAqClB,wBAAgB,sBAAsB,IAAI,aAAa,CAKtD"}
1
+ {"version":3,"file":"parallax.d.ts","sourceRoot":"","sources":["../../../../src/lib/transitions/drill/provider/parallax.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,UAAU,CAAC;AAyClB,wBAAgB,sBAAsB,IAAI,aAAa,CAKtD"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssgoi/core",
3
- "version": "6.6.11",
3
+ "version": "6.6.12",
4
4
  "description": "Core animation engine for SSGOI - Native app-like page transitions with spring physics",
5
5
  "private": false,
6
6
  "type": "module",