Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ampproject/animations

Package Overview
Dependencies
Maintainers
8
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ampproject/animations - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

2

dist/animations.js

@@ -1,1 +0,1 @@

"use strict";function p(t,e,n){return(t=t.width/t.height)>e.width/e.height!==n?{width:e.height*t,height:e.height}:{width:e.width,height:e.width/t}}function q(t,e,n=getComputedStyle(t).getPropertyValue("object-fit")){switch(t={width:t.naturalWidth,height:t.naturalHeight},n){case"cover":return p(t,e,!1);case"contain":return p(t,e,!0);case"fill":return e;case"none":return t;case"scale-down":return e=p(t,e,!0),{width:Math.min(t.width,e.width),height:Math.min(t.height,e.height)};case"":case null:return e;default:throw Error(`object-fit: ${n} not supported`)}}function r(t,e){return t=(t.match(new RegExp("-?\\s*\\d+"+e))||["0"])[0].replace(" ",""),parseFloat(t)}function t(t,e,n){var i=t||"50% 50%",o=0===i.lastIndexOf("calc",0)?i.indexOf(")")+1:i.indexOf(" ");t=i.slice(0,o)||"",i=i.slice(o)||"",o=r(t,"px");let a=r(i,"px");return t=r(t,"%")/100,{top:r(i,"%")/100*(e.height-n.height)+a,left:t*(e.width-n.width)+o}}function w(e,n=e.getBoundingClientRect(),i=n,r=getComputedStyle(e).getPropertyValue("object-position"),o=q(e,n)){n=t(r,n,o),r=document.createElement("div");let a=document.createElement("div"),l=document.createElement("div"),s=document.createElement("div"),c=document.createElement("div");return(e=e.cloneNode(!0)).className="",e.style.cssText="",c.appendChild(e),s.appendChild(c),l.appendChild(s),a.appendChild(l),r.appendChild(a),Object.assign(a.style,{overflow:"hidden",width:`${i.width}px`,height:`${i.height}px`}),Object.assign(c.style,{transform:`translate(${n.left}px, ${n.top}px)`}),Object.assign(e.style,{display:"block",width:`${o.width}px`,height:`${o.height}px`}),{J:r,m:a,i:l,v:s,A:c,j:e}}function x(t){var{position:e}=getComputedStyle(t);return"static"!=e?t:(e=t.offsetParent||t.parentElement)?x(e):t}function y(t){return`cubic-bezier(${t.x1}, ${t.y1}, ${t.x2}, ${t.y2})`}function z(t,e,n){let i=n*n,r=i*n;return 3*(n-2*i+r)*t+3*(i-r)*e+r}function A({I:t,w:e,curve:n,F:i,u:r}){let o="",a="";for(let i=0;20>=i;i++){var l=.05*i,s=z(n.y1,n.y2,l);l=100*z(n.x1,n.x2,l);var c=t.x;c+=s*(e.x-c);var m=t.y;o+=`${l}% {\n transform: scale(${c}, ${s=m+s*(e.y-m)});\n }`,a+=`${l}% {\n transform: scale(${m=1/c}, ${1/s});\n }`}return`\n @keyframes ${i} {\n ${o}\n }\n\n @keyframes ${r} {\n ${a}\n }\n `}function B({m:t,i:e,f:n,g:i,curve:r,styles:o,a:a,b:l}){let s=`${a}-crop`;a=`${a}-counterScale`,i={x:i.width/n.width,y:i.height/n.height};let c={x:1,y:1};return n=l?i:c,l=l?c:i,Object.assign(t.style,o,{willChange:"transform",transformOrigin:"top left",animationName:s,animationTimingFunction:"linear",animationFillMode:"forwards"}),Object.assign(e.style,o,{willChange:"transform",transformOrigin:"top left",animationName:a,animationTimingFunction:"linear",animationFillMode:"forwards"}),A({I:n,w:l,curve:r,F:s,u:a})}function C({element:t,f:e,B:n,g:i,G:r,curve:o,styles:a,a:l,b:s}){return l=`${l}-crop-position`,e={top:e.top-n.top,left:e.left-n.left},r={top:i.top-r.top,left:i.left-r.left},i=s?r:e,s=s?e:r,Object.assign(t.style,a,{willChange:"transform",animationName:l,animationTimingFunction:y(o),animationFillMode:"forwards"}),`\n @keyframes ${l} {\n from {\n transform: translate(${i.left}px, ${i.top}px);\n }\n\n to {\n transform: translate(${s.left}px, ${s.top}px);\n }\n }\n `}function D({element:t,l:e,o:n,curve:i,styles:r,a:o,b:a}){o=`${o}-scale`;let l={x:1,y:1};return n={x:n.width/e.width,y:n.height/e.height},e=a?n:l,a=a?l:n,Object.assign(t.style,r,{willChange:"transform",transformOrigin:"top left",animationName:o,animationTimingFunction:y(i),animationFillMode:"forwards"}),`\n @keyframes ${o} {\n from {\n transform: scale(${e.x}, ${e.y});\n }\n\n to {\n transform: scale(${a.x}, ${a.y});\n }\n }\n `}function E({element:e,f:n,g:i,l:r,o:o,C:a,H:l,curve:s,styles:c,a:m,b:f}){return s=y(s),m=`${m}-object-position`,n=t(a,n,r),o=t(l,i,o),i=f?o:n,f=f?n:o,Object.assign(e.style,c,{willChange:"transform",animationName:m,animationTimingFunction:s,animationFillMode:"forwards"}),`\n @keyframes ${m} {\n from {\n transform: translate(${i.left}px, ${i.top}px);\n }\n\n to {\n transform: translate(${f.left}px, ${f.top}px);\n }\n }\n `}function F({element:t,D:e,f:n,g:i,curve:r,styles:o,a:a,b:l}){a=`${a}-translation`;var s=l?i:n;return n=l?n:i,i=s.left-n.left,s=s.top-n.top,Object.assign(t.style,o,{position:"absolute",top:`${n.top-e.top}px`,left:`${n.left-e.left}px`,willChange:"transform",animationName:a,animationTimingFunction:y(r),animationFillMode:"forwards"}),`\n @keyframes ${a} {\n from {\n transform: translate(${i}px, ${s}px);\n }\n\n to {\n transform: translate(0, 0);\n }\n }\n `}Object.defineProperty(exports,"__esModule",{value:!0});let G={x1:.42,y1:0,x2:.58,y2:1},H=0;function I(t){return`${t}-${H+=1}-`}function J(t,e,n){var i=getComputedStyle(t);let r=i.getPropertyValue("object-fit");return{objectFit:r,objectPosition:i=i.getPropertyValue("object-position"),rect:e,c:n,j:t,h:q(t,e,r),s:e.width*e.height}}exports.prepareImageAnimation=function({transitionContainer:t=document.body,styleContainer:e=document.head,srcImg:n,targetImg:i,srcImgRect:r=n.getBoundingClientRect(),srcCropRect:o=r,targetImgRect:a=i.getBoundingClientRect(),targetCropRect:l=a,curve:s=G,styles:c,keyframesNamespace:m="img-transform"}){n=J(n,r,o),a=(i=(l=J(i,a,l)).s>n.s)?n:l,l=i?l:n,n=I(m);let{J:f,m:u,i:h,v:p,A:d,j:g}=w(l.j,l.rect,l.c,l.objectPosition,l.h);r=x(t).getBoundingClientRect(),m=B({m:u,i:h,f:l.c,g:a.c,curve:s,styles:c,a:n,b:i}),r=F({element:f,D:r,f:l.c,g:a.c,curve:s,styles:c,a:n,b:i}),o=E({element:d,f:l.rect,g:a.rect,l:l.h,o:a.h,C:l.objectPosition,H:a.objectPosition,curve:s,styles:c,a:n,b:i});let y=C({element:p,f:l.rect,B:l.c,g:a.rect,G:a.c,curve:s,styles:c,a:n,b:i});s=D({element:g,l:l.h,o:a.h,curve:s,styles:c,a:n,b:i});let $=document.createElement("style");return $.textContent=m+r+o+y+s,{applyAnimation:function(){e.appendChild($),t.appendChild(f)},cleanupAnimation:function(){t.removeChild(f),e.removeChild($)}}};
"use strict";function t(t,e,n){return(t=t.width/t.height)>e.width/e.height!==n?{width:e.height*t,height:e.height}:{width:e.width,height:e.width/t}}function e(e,n,i=getComputedStyle(e).getPropertyValue("object-fit")){switch(e={width:e.naturalWidth,height:e.naturalHeight},i){case"cover":return t(e,n,!1);case"contain":return t(e,n,!0);case"fill":return n;case"none":return e;case"scale-down":return n=t(e,n,!0),{width:Math.min(e.width,n.width),height:Math.min(e.height,n.height)};case"":case null:return n;default:throw Error(`object-fit: ${i} not supported`)}}function n(t,e){return t=(t.match(new RegExp("-?\\s*\\d+"+e))||["0"])[0].replace(" ",""),parseFloat(t)}function i(t,e,i){var r=t||"50% 50%",o=0===r.lastIndexOf("calc",0)?r.indexOf(")")+1:r.indexOf(" ");t=r.slice(0,o)||"",r=r.slice(o)||"",o=n(t,"px");let a=n(r,"px");return t=n(t,"%")/100,{top:n(r,"%")/100*(e.height-i.height)+a,left:t*(e.width-i.width)+o}}function r(t){return`cubic-bezier(${t.x1},${t.y1},${t.x2},${t.y2})`}function o(t,e,n){let i=n*n,r=i*n;return 3*(n-2*i+r)*t+3*(i-r)*e+r}function a({m:t,i:e,f:n,g:i,curve:r,styles:a,a:l,b:s}){let c=`${l}-crop`;l=`${l}-counterScale`,i={x:i.width/n.width,y:i.height/n.height};let m={x:1,y:1};return n=s?i:m,s=s?m:i,Object.assign(t.style,a,{willChange:"transform",transformOrigin:"top left",animationName:c,animationTimingFunction:"linear",animationFillMode:"forwards"}),Object.assign(e.style,a,{willChange:"transform",transformOrigin:"top left",animationName:l,animationTimingFunction:"linear",animationFillMode:"forwards"}),function({I:t,w:e,curve:n,F:i,u:r}){let a="",l="";for(let i=0;20>=i;i++){var s=.05*i,c=o(n.y1,n.y2,s);s=100*o(n.x1,n.x2,s);var m=t.x;m+=c*(e.x-m);var f=t.y;a+=`${s}% {transform: scale(${m},${c=f+c*(e.y-f)});}`,l+=`${s}% {transform: scale(${f=1/m},${1/c});}`}return`@keyframes ${i} {${a}}@keyframes ${r} {${l}}`}({I:n,w:s,curve:r,F:c,u:l})}Object.defineProperty(exports,"__esModule",{value:!0});let l={x1:.42,y1:0,x2:.58,y2:1},s=0;function c(t,n,i){var r=getComputedStyle(t);let o=r.getPropertyValue("object-fit");return{objectFit:o,objectPosition:r=r.getPropertyValue("object-position"),rect:n,c:i,j:t,h:e(t,n,o),s:n.width*n.height}}exports.prepareImageAnimation=function({transitionContainer:t=document.body,styleContainer:n=document.head,srcImg:o,targetImg:m,srcImgRect:f=o.getBoundingClientRect(),srcCropRect:u=f,targetImgRect:h=m.getBoundingClientRect(),targetCropRect:p=h,curve:d=l,styles:g,keyframesNamespace:y="img-transform"}){o=c(o,f,u),h=(m=(p=c(m,h,p)).s>o.s)?o:p,p=m?p:o,o=function(t){return s+=1,`${t}-${s}-`}(y);let{J:$,m:x,i:w,v:b,A:v,j:C}=function(t,n=t.getBoundingClientRect(),r=n,o=getComputedStyle(t).getPropertyValue("object-position"),a=e(t,n)){n=i(o,n,a),o=document.createElement("div");let l=document.createElement("div"),s=document.createElement("div"),c=document.createElement("div"),m=document.createElement("div");return(t=t.cloneNode(!0)).className="",t.style.cssText="",m.appendChild(t),c.appendChild(m),s.appendChild(c),l.appendChild(s),o.appendChild(l),Object.assign(l.style,{overflow:"hidden",width:`${r.width}px`,height:`${r.height}px`}),Object.assign(m.style,{transform:`translate(${n.left}px,${n.top}px)`}),Object.assign(t.style,{display:"block",width:`${a.width}px`,height:`${a.height}px`}),{J:o,m:l,i:s,v:c,A:m,j:t}}(p.j,p.rect,p.c,p.objectPosition,p.h);f=function t(e){var{position:n}=getComputedStyle(e);return"static"!=n?e:(n=e.offsetParent||e.parentElement)?t(n):e}(t).getBoundingClientRect(),y=a({m:x,i:w,f:p.c,g:h.c,curve:d,styles:g,a:o,b:m}),f=function({element:t,D:e,f:n,g:i,curve:o,styles:a,a:l,b:s}){l=`${l}-translation`;var c=s?i:n;return n=s?n:i,i=c.left-n.left,c=c.top-n.top,Object.assign(t.style,a,{position:"absolute",top:`${n.top-e.top}px`,left:`${n.left-e.left}px`,willChange:"transform",animationName:l,animationTimingFunction:r(o),animationFillMode:"forwards"}),`@keyframes ${l} {from {transform: translate(${i}px,${c}px);}to {transform: translate(0,0);}}`}({element:$,D:f,f:p.c,g:h.c,curve:d,styles:g,a:o,b:m}),u=function({element:t,f:e,g:n,l:o,o:a,C:l,H:s,curve:c,styles:m,a:f,b:u}){return c=r(c),f=`${f}-object-position`,e=i(l,e,o),a=i(s,n,a),n=u?a:e,u=u?e:a,Object.assign(t.style,m,{willChange:"transform",animationName:f,animationTimingFunction:c,animationFillMode:"forwards"}),`@keyframes ${f} {from {transform: translate(${n.left}px,${n.top}px);}to {transform: translate(${u.left}px,${u.top}px);}}`}({element:v,f:p.rect,g:h.rect,l:p.h,o:h.h,C:p.objectPosition,H:h.objectPosition,curve:d,styles:g,a:o,b:m});let j=function({element:t,f:e,B:n,g:i,G:o,curve:a,styles:l,a:s,b:c}){return s=`${s}-crop-position`,e={top:e.top-n.top,left:e.left-n.left},o={top:i.top-o.top,left:i.left-o.left},i=c?o:e,c=c?e:o,Object.assign(t.style,l,{willChange:"transform",animationName:s,animationTimingFunction:r(a),animationFillMode:"forwards"}),`@keyframes ${s} {from {transform: translate(${i.left}px,${i.top}px);}to {transform: translate(${c.left}px,${c.top}px);}}`}({element:b,f:p.rect,B:p.c,g:h.rect,G:h.c,curve:d,styles:g,a:o,b:m});d=function({element:t,l:e,o:n,curve:i,styles:o,a:a,b:l}){a=`${a}-scale`;let s={x:1,y:1};return n={x:n.width/e.width,y:n.height/e.height},e=l?n:s,l=l?s:n,Object.assign(t.style,o,{willChange:"transform",transformOrigin:"top left",animationName:a,animationTimingFunction:r(i),animationFillMode:"forwards"}),`@keyframes ${a} {from {transform: scale(${e.x},${e.y});}to {transform: scale(${l.x},${l.y});}}`}({element:C,l:p.h,o:h.h,curve:d,styles:g,a:o,b:m});let F=document.createElement("style");return F.textContent=y+f+u+j+d,{applyAnimation:function(){n.appendChild(F),t.appendChild($)},cleanupAnimation:function(){t.removeChild($),n.removeChild(F)}}};
{
"name": "@ampproject/animations",
"version": "0.2.1",
"version": "0.2.2",
"description": "JavaScript animation functions and helpers.",

@@ -22,28 +22,43 @@ "main": "dist/animations.js",

"test-watch": "npm run karma -- --auto-watch",
"size": "npm run build && filesize",
"prepublishOnly": "npm run dist"
},
"devDependencies": {
"@ampproject/rollup-plugin-closure-compiler": "0.13.0",
"@types/chai": "4.2.5",
"@ampproject/rollup-plugin-closure-compiler": "0.20.0",
"@types/chai": "4.2.7",
"@types/mocha": "5.2.7",
"@kristoferbaxter/filesize": "0.2.0",
"acorn-walk": "7.0.0",
"chai": "4.2.0",
"http-server": "0.11.1",
"http-server": "0.12.1",
"karma": "4.4.1",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "3.1.0",
"karma-firefox-launcher": "1.2.0",
"karma-firefox-launcher": "1.3.0",
"karma-ie-launcher": "1.0.0",
"karma-mocha": "1.3.0",
"karma-typescript": "4.1.1",
"magic-string": "0.25.6",
"mocha": "6.2.2",
"opener": "1.5.1",
"rollup": "1.25.1",
"rollup": "1.29.0",
"rollup-plugin-commonjs": "10.1.0",
"rollup-plugin-node-resolve": "5.2.0",
"rollup-plugin-typescript": "1.0.1",
"rollup-plugin-terser": "5.1.2",
"typescript": "3.7.2",
"rollup-plugin-terser": "5.2.0",
"typescript": "3.7.4",
"tslib": "1.10.0"
},
"dependencies": {},
"filesize": [
{
"path": "./dist/animations.mjs",
"compression": "brotli",
"maxSize": "2 kB"
},
{
"path": "./dist/animations.js",
"compression": "brotli",
"maxSize": "2 kB"
}
],
"files": [

@@ -50,0 +65,0 @@ "dist"

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc