blendy/dist/blendy.min.js

_A framework-agnostic tool that smoothly transitions one element into another with just a few lines of code._

(function(x,L){typeof exports=="object"&&typeof module<"u"?L(exports):typeof define=="function"&&define.amd?define(["exports"],L):(x=typeof globalThis<"u"?globalThis:x||self,L(x.Blendy={}))})(this,function(x){"use strict";function L(t){return typeof t=="object"&&t!==null&&"x"in t&&"y"in t&&"unit"in t&&typeof t.unit=="string"&&typeof t.x=="object"&&typeof t.y=="object"&&"topLeft"in t.x&&"topRight"in t.x&&"bottomRight"in t.x&&"bottomLeft"in t.x&&"topLeft"in t.y&&"topRight"in t.y&&"bottomRight"in t.y&&"bottomLeft"in t.y}function B(t){var y;const e=t.match(/(\d+(?:\.\d+)?)(px|%)/g);if(!e)return{x:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0},y:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0},unit:"px"};const n=e.map(a=>{const[u,g,d]=a.match(/(\d+(?:\.\d+)?)(px|%)/)??[];return{value:parseFloat(g),unit:d}}),o=((y=n[0])==null?void 0:y.unit)||"px";if(n.some(a=>a.unit!==o))throw new Error("Inconsistent units in border-radius string.");const[l,s,r,f]=n.map(a=>a.value),i={topLeft:l??0,topRight:s??l??0,bottomRight:r??l??0,bottomLeft:f??s??l??0};return{x:{...i},y:{...i},unit:o}}function b({x:t,y:e,unit:n},o,l){if(n==="px"){const s={topLeft:t.topLeft/o,topRight:t.topRight/o,bottomLeft:t.bottomLeft/o,bottomRight:t.bottomRight/o},r={topLeft:e.topLeft/l,topRight:e.topRight/l,bottomLeft:e.bottomLeft/l,bottomRight:e.bottomRight/l};return{x:s,y:r,unit:"px"}}else if(n==="%")return{x:t,y:e,unit:"%"};return{x:t,y:e,unit:n}}function S(t){return`
    ${t.x.topLeft}${t.unit} ${t.x.topRight}${t.unit} ${t.x.bottomRight}${t.unit} ${t.x.bottomLeft}${t.unit}
    /
    ${t.y.topLeft}${t.unit} ${t.y.topRight}${t.unit} ${t.y.bottomRight}${t.unit} ${t.y.bottomLeft}${t.unit}
  `}function T(t){return typeof t=="object"&&"x"in t&&"y"in t}function h(t,e){return{x:t,y:e}}function F(t,e){return h(t.x+e.x,t.y+e.y)}function O(t,e){return h(t.x-e.x,t.y-e.y)}function E(t,e){return h(t.x*e,t.y*e)}function m(t,e,n){return t+(e-t)*n}function X(t,e,n){return F(t,E(O(e,t),n))}function Y(t,e,n){return{x:{topLeft:m(t.x.topLeft,e.x.topLeft,n),topRight:m(t.x.topRight,e.x.topRight,n),bottomRight:m(t.x.bottomRight,e.x.bottomRight,n),bottomLeft:m(t.x.bottomLeft,e.x.bottomLeft,n)},y:{topLeft:m(t.y.topLeft,e.y.topLeft,n),topRight:m(t.y.topRight,e.y.topRight,n),bottomRight:m(t.y.bottomRight,e.y.bottomRight,n),bottomLeft:m(t.y.bottomLeft,e.y.bottomLeft,n)},unit:t.unit}}function q(t,e,n){return Math.min(Math.max(t,e),n)}const w={duration:350,easing:t=>t};function j(t,e,n,o){let l=!1;const s=()=>{l=!0},r={...w,...o};let f;function i(y){f===void 0&&(f=y);const a=y-f,u=q(a/r.duration,0,1),g=Object.keys(t),d=Object.keys(e);if(!g.every(c=>d.includes(c))){console.error("animate Error: `from` keys are different than `to`");return}const R={};g.forEach(c=>{typeof t[c]=="number"&&typeof e[c]=="number"?R[c]=m(t[c],e[c],r.easing(u)):L(t[c])&&L(e[c])?R[c]=Y(t[c],e[c],r.easing(u)):T(t[c])&&T(e[c])&&(R[c]=X(t[c],e[c],r.easing(u)))}),n(R,u>=1,u),u<1&&!l&&requestAnimationFrame(i)}return requestAnimationFrame(i),s}function M(t){return 1+2.5*Math.pow(t-1,3)+1.5*Math.pow(t-1,2)}function k(t){return 1-Math.pow(1-t,3)}function P(t){return{x:t.x,y:t.y,width:t.width,height:t.height}}function z(t){let e=t,n=0,o=0;for(;e;)n+=e.offsetTop,o+=e.offsetLeft,e=e.offsetParent;return{x:o,y:n,width:t.offsetWidth,height:t.offsetHeight}}function A(t,e){let n=t,o={translateX:0,translateY:0,scaleX:1,scaleY:1};typeof n.originalBorderRadius>"u"&&(n.originalBorderRadius=window.getComputedStyle(n).borderRadius);const l={el:()=>n,id:()=>e,setTransform:s,clearTransform:r,currentTransform:()=>o,originalBorderRadius:()=>B(n.originalBorderRadius),currentBorderRadius:()=>B(window.getComputedStyle(n).borderRadius),layoutRect:()=>z(n),boundingRect:()=>P(n.getBoundingClientRect()),cssPosition:()=>window.getComputedStyle(n).position};function s(i){o={...o,...i},f()}function r(){o={translateX:0,translateY:0,scaleX:1,scaleY:1},f()}function f(){const{translateX:i,translateY:y,scaleX:a,scaleY:u}=o;i===0&&y===0&&a===1&&u===1?n.style.transform="":n.style.transform=`translate(${i}px, ${y}px) scale(${a}, ${u})`}return l}function N({sourceViews:t,config:e}){const o={...{config:e,sourceViews:t,toggleStatus:new Map,targetViews:new Map,cancelAnimation:{blendy:null}}};function l(s){const r=o.sourceViews.map(({id:i})=>i()),f=s.filter(i=>!r.includes(i.id()));o.sourceViews.push(...f),f.forEach(i=>{o.toggleStatus.set(i.id(),!1),o.targetViews.set(i.id(),null)})}return{sourceViewById:s=>o.sourceViews.find(r=>s===r.id()),isToggled:s=>o.toggleStatus.get(s)||!1,toggle:(s,r)=>{o.toggleStatus.set(s,!0),o.targetViews.set(s,r)},untoggle:s=>{o.toggleStatus.set(s,!1),o.targetViews.set(s,null)},targetView:s=>o.targetViews.get(s),cancelAnimation:()=>o.cancelAnimation,config:()=>e,syncSourceViews:l}}const _={animation:"dynamic"};function G(t){switch(t){case"dynamic":return{easing:k,duration:450};case"spring":return{easing:M,duration:400}}}function U(t){const e={..._,...t};let n=[];const o=N({sourceViews:[],config:e});requestAnimationFrame(l);function l(){n=Array.from(document.querySelectorAll("[data-blendy-from]")).map(i=>{const y=i;return A(y,y.dataset.blendyFrom)}),o.syncSourceViews(n)}function s(i,y){o.isToggled(i)||requestAnimationFrame(()=>{const a=o.sourceViewById(i),u=document.querySelector(`[data-blendy-to=${i}]`);if(u){const g=A(u,i);o.toggle(i,g),v(a,g,o,y)}})}function r(i,y){o.isToggled(i)&&requestAnimationFrame(()=>{const a=o.sourceViewById(i),u=o.targetView(i);a&&(v(u,a,o,y),o.untoggle(i))})}function f(){requestAnimationFrame(()=>{l()})}return{toggle:s,untoggle:r,update:f}}function v(t,e,n,o){var c,C;(C=(c=n.cancelAnimation()).blendy)==null||C.call(c);const l=t.boundingRect(),s=e.boundingRect(),r=t.el().children[0],f=e.el().children[0],i=getComputedStyle(r).display==="inline",y=getComputedStyle(f).display==="inline",a=s.x-l.x,u=s.y-l.y,g=s.width/l.width,d=s.height/l.height,R=e.el().style.zIndex||"0";requestAnimationFrame(()=>{e.el().style.opacity="1",t.el().style.opacity="1",e.el().style.pointerEvents="",t.el().style.pointerEvents="none",i&&(r.style.display="block"),y&&(f.style.display="block"),e.el().style.overflow="hidden",t.el().style.overflow="hidden"}),e.el().style.transformOrigin="0 0",t.el().style.transformOrigin="0 0",t.cssPosition()==="static"&&(t.el().style.position="relative"),e.cssPosition()==="static"&&(e.el().style.position="relative"),e.setTransform({translateX:-a,translateY:-u,scaleX:1/g,scaleY:1/d}),e.el().style.borderRadius=S(b(t.originalBorderRadius(),1/g,1/d)),t.el().style.zIndex=`${Number(R+1e3)}`,n.cancelAnimation().blendy=j({translate:h(0,0),scale:h(1,1),borderRadius:t.originalBorderRadius()},{translate:h(a,u),scale:h(g,d),borderRadius:e.originalBorderRadius()},({translate:$,scale:p,borderRadius:I},H,K)=>{t.setTransform({translateX:$.x,translateY:$.y,scaleX:p.x,scaleY:p.y}),t.el().style.borderRadius=S(b(I,p.x,p.y)),t.el().style.opacity=`${m(1,0,K*6)}`,r.style.transform=`scale(${1/p.x}, ${1/p.y})`,e.setTransform({translateX:$.x-a,translateY:$.y-u,scaleX:p.x/g,scaleY:p.y/d}),f.style.transform=`scale(${g/p.x}, ${d/p.y})`,e.el().style.borderRadius=S(b(I,p.x/g,p.y/d)),H&&(r.style.display="",f.style.display="",r.style.transform="",f.style.transform="",e.el().style.overflow="",t.el().style.overflow="",e.el().style.position="",t.el().style.position="",e.el().style.zIndex="",t.el().style.zIndex="",e.el().style.opacity="",t.el().style.opacity="0",t.el().style.pointerEvents="none",t.clearTransform(),e.clearTransform(),t.el().style.transformOrigin="",e.el().style.transformOrigin="",t.el().style.borderRadius="",e.el().style.borderRadius="",o==null||o())},G(n.config().animation))}x.createBlendy=U,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});