animate-css-grid - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

dist/main.js

@@ -1,1 +0,1 @@
-!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.animateCSSGrid=n():t.animateCSSGrid=n()}(window,function(){return function(t){var n={};function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=4)}([function(t,n){var e;e=function(){return this}();try{e=e||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(e=window)}t.exports=e},function(t,n,e){(function(n){var e="Expected a function",i=NaN,r="[object Symbol]",a=/^\s+|\s+$/g,o=/^[-+]0x[0-9a-f]+$/i,u=/^0b[01]+$/i,s=/^0o[0-7]+$/i,c=parseInt,l="object"==typeof n&&n&&n.Object===Object&&n,h="object"==typeof self&&self&&self.Object===Object&&self,f=l||h||Function("return this")(),d=Object.prototype.toString,p=Math.max,_=Math.min,v=function(){return f.Date.now()};function g(t,n,i){var r,a,o,u,s,c,l=0,h=!1,f=!1,d=!0;if("function"!=typeof t)throw new TypeError(e);function g(n){var e=r,i=a;return r=a=void 0,l=n,u=t.apply(i,e)}function y(t){var e=t-c;return void 0===c||e>=n||e<0||f&&t-l>=o}function b(){var t=v();if(y(t))return T(t);s=setTimeout(b,function(t){var e=n-(t-c);return f?_(e,o-(t-l)):e}(t))}function T(t){return s=void 0,d&&r?g(t):(r=a=void 0,u)}function I(){var t=v(),e=y(t);if(r=arguments,a=this,c=t,e){if(void 0===s)return function(t){return l=t,s=setTimeout(b,n),h?g(t):u}(c);if(f)return s=setTimeout(b,n),g(c)}return void 0===s&&(s=setTimeout(b,n)),u}return n=m(n)||0,w(i)&&(h=!!i.leading,o=(f="maxWait"in i)?p(m(i.maxWait)||0,n):o,d="trailing"in i?!!i.trailing:d),I.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=c=a=s=void 0},I.flush=function(){return void 0===s?u:T(v())},I}function w(t){var n=typeof t;return!!t&&("object"==n||"function"==n)}function m(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&d.call(t)==r}(t))return i;if(w(t)){var n="function"==typeof t.valueOf?t.valueOf():t;t=w(n)?n+"":n}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var e=u.test(t);return e||s.test(t)?c(t.slice(2),e?2:8):o.test(t)?i:+t}t.exports=function(t,n,i){var r=!0,a=!0;if("function"!=typeof t)throw new TypeError(e);return w(i)&&(r="leading"in i?!!i.leading:r,a="trailing"in i?!!i.trailing:a),g(t,n,{leading:r,maxWait:n,trailing:a})}}).call(this,e(0))},function(t,n){var e,i,r=t.exports={};function a(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function u(t){if(e===setTimeout)return setTimeout(t,0);if((e===a||!e)&&setTimeout)return e=setTimeout,setTimeout(t,0);try{return e(t,0)}catch(n){try{return e.call(null,t,0)}catch(n){return e.call(this,t,0)}}}!function(){try{e="function"==typeof setTimeout?setTimeout:a}catch(t){e=a}try{i="function"==typeof clearTimeout?clearTimeout:o}catch(t){i=o}}();var s,c=[],l=!1,h=-1;function f(){l&&s&&(l=!1,s.length?c=s.concat(c):h=-1,c.length&&d())}function d(){if(!l){var t=u(f);l=!0;for(var n=c.length;n;){for(s=c,c=[];++h<n;)s&&s[h].run();h=-1,n=c.length}s=null,l=!1,function(t){if(i===clearTimeout)return clearTimeout(t);if((i===o||!i)&&clearTimeout)return i=clearTimeout,clearTimeout(t);try{i(t)}catch(n){try{return i.call(null,t)}catch(n){return i.call(this,t)}}}(t)}}function p(t,n){this.fun=t,this.array=n}function _(){}r.nextTick=function(t){var n=new Array(arguments.length-1);if(arguments.length>1)for(var e=1;e<arguments.length;e++)n[e-1]=arguments[e];c.push(new p(t,n)),1!==c.length||l||u(d)},p.prototype.run=function(){this.fun.apply(null,this.array)},r.title="browser",r.browser=!0,r.env={},r.argv=[],r.version="",r.versions={},r.on=_,r.addListener=_,r.once=_,r.off=_,r.removeListener=_,r.removeAllListeners=_,r.emit=_,r.prependListener=_,r.prependOnceListener=_,r.listeners=function(t){return[]},r.binding=function(t){throw new Error("process.binding is not supported")},r.cwd=function(){return"/"},r.chdir=function(t){throw new Error("process.chdir is not supported")},r.umask=function(){return 0}},function(t,n,e){(function(e){var i,r=function(){this._tweens={},this._tweensAddedDuringUpdate={}};r.prototype={getAll:function(){return Object.keys(this._tweens).map(function(t){return this._tweens[t]}.bind(this))},removeAll:function(){this._tweens={}},add:function(t){this._tweens[t.getId()]=t,this._tweensAddedDuringUpdate[t.getId()]=t},remove:function(t){delete this._tweens[t.getId()],delete this._tweensAddedDuringUpdate[t.getId()]},update:function(t,n){var e=Object.keys(this._tweens);if(0===e.length)return!1;for(t=void 0!==t?t:o.now();e.length>0;){this._tweensAddedDuringUpdate={};for(var i=0;i<e.length;i++){var r=this._tweens[e[i]];r&&!1===r.update(t)&&(r._isPlaying=!1,n||delete this._tweens[e[i]])}e=Object.keys(this._tweensAddedDuringUpdate)}return!0}};var a,o=new r;o.Group=r,o._nextId=0,o.nextId=function(){return o._nextId++},"undefined"==typeof window&&void 0!==e?o.now=function(){var t=e.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof window&&void 0!==window.performance&&void 0!==window.performance.now?o.now=window.performance.now.bind(window.performance):void 0!==Date.now?o.now=Date.now:o.now=function(){return(new Date).getTime()},o.Tween=function(t,n){this._object=t,this._valuesStart={},this._valuesEnd={},this._valuesStartRepeat={},this._duration=1e3,this._repeat=0,this._repeatDelayTime=void 0,this._yoyo=!1,this._isPlaying=!1,this._reversed=!1,this._delayTime=0,this._startTime=null,this._easingFunction=o.Easing.Linear.None,this._interpolationFunction=o.Interpolation.Linear,this._chainedTweens=[],this._onStartCallback=null,this._onStartCallbackFired=!1,this._onUpdateCallback=null,this._onCompleteCallback=null,this._onStopCallback=null,this._group=n||o,this._id=o.nextId()},o.Tween.prototype={getId:function(){return this._id},isPlaying:function(){return this._isPlaying},to:function(t,n){return this._valuesEnd=t,void 0!==n&&(this._duration=n),this},start:function(t){for(var n in this._group.add(this),this._isPlaying=!0,this._onStartCallbackFired=!1,this._startTime=void 0!==t?"string"==typeof t?o.now()+parseFloat(t):t:o.now(),this._startTime+=this._delayTime,this._valuesEnd){if(this._valuesEnd[n]instanceof Array){if(0===this._valuesEnd[n].length)continue;this._valuesEnd[n]=[this._object[n]].concat(this._valuesEnd[n])}void 0!==this._object[n]&&(this._valuesStart[n]=this._object[n],this._valuesStart[n]instanceof Array==!1&&(this._valuesStart[n]*=1),this._valuesStartRepeat[n]=this._valuesStart[n]||0)}return this},stop:function(){return this._isPlaying?(this._group.remove(this),this._isPlaying=!1,null!==this._onStopCallback&&this._onStopCallback(this._object),this.stopChainedTweens(),this):this},end:function(){return this.update(this._startTime+this._duration),this},stopChainedTweens:function(){for(var t=0,n=this._chainedTweens.length;t<n;t++)this._chainedTweens[t].stop()},group:function(t){return this._group=t,this},delay:function(t){return this._delayTime=t,this},repeat:function(t){return this._repeat=t,this},repeatDelay:function(t){return this._repeatDelayTime=t,this},yoyo:function(t){return this._yoyo=t,this},easing:function(t){return this._easingFunction=t,this},interpolation:function(t){return this._interpolationFunction=t,this},chain:function(){return this._chainedTweens=arguments,this},onStart:function(t){return this._onStartCallback=t,this},onUpdate:function(t){return this._onUpdateCallback=t,this},onComplete:function(t){return this._onCompleteCallback=t,this},onStop:function(t){return this._onStopCallback=t,this},update:function(t){var n,e,i;if(t<this._startTime)return!0;for(n in!1===this._onStartCallbackFired&&(null!==this._onStartCallback&&this._onStartCallback(this._object),this._onStartCallbackFired=!0),e=(t-this._startTime)/this._duration,e=0===this._duration||e>1?1:e,i=this._easingFunction(e),this._valuesEnd)if(void 0!==this._valuesStart[n]){var r=this._valuesStart[n]||0,a=this._valuesEnd[n];a instanceof Array?this._object[n]=this._interpolationFunction(a,i):("string"==typeof a&&(a="+"===a.charAt(0)||"-"===a.charAt(0)?r+parseFloat(a):parseFloat(a)),"number"==typeof a&&(this._object[n]=r+(a-r)*i))}if(null!==this._onUpdateCallback&&this._onUpdateCallback(this._object),1===e){if(this._repeat>0){for(n in isFinite(this._repeat)&&this._repeat--,this._valuesStartRepeat){if("string"==typeof this._valuesEnd[n]&&(this._valuesStartRepeat[n]=this._valuesStartRepeat[n]+parseFloat(this._valuesEnd[n])),this._yoyo){var o=this._valuesStartRepeat[n];this._valuesStartRepeat[n]=this._valuesEnd[n],this._valuesEnd[n]=o}this._valuesStart[n]=this._valuesStartRepeat[n]}return this._yoyo&&(this._reversed=!this._reversed),void 0!==this._repeatDelayTime?this._startTime=t+this._repeatDelayTime:this._startTime=t+this._delayTime,!0}null!==this._onCompleteCallback&&this._onCompleteCallback(this._object);for(var u=0,s=this._chainedTweens.length;u<s;u++)this._chainedTweens[u].start(this._startTime+this._duration);return!1}return!0}},o.Easing={Linear:{None:function(t){return t}},Quadratic:{In:function(t){return t*t},Out:function(t){return t*(2-t)},InOut:function(t){return(t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)}},Cubic:{In:function(t){return t*t*t},Out:function(t){return--t*t*t+1},InOut:function(t){return(t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)}},Quartic:{In:function(t){return t*t*t*t},Out:function(t){return 1- --t*t*t*t},InOut:function(t){return(t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)}},Quintic:{In:function(t){return t*t*t*t*t},Out:function(t){return--t*t*t*t*t+1},InOut:function(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)}},Sinusoidal:{In:function(t){return 1-Math.cos(t*Math.PI/2)},Out:function(t){return Math.sin(t*Math.PI/2)},InOut:function(t){return.5*(1-Math.cos(Math.PI*t))}},Exponential:{In:function(t){return 0===t?0:Math.pow(1024,t-1)},Out:function(t){return 1===t?1:1-Math.pow(2,-10*t)},InOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(2-Math.pow(2,-10*(t-1)))}},Circular:{In:function(t){return 1-Math.sqrt(1-t*t)},Out:function(t){return Math.sqrt(1- --t*t)},InOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)}},Elastic:{In:function(t){return 0===t?0:1===t?1:-Math.pow(2,10*(t-1))*Math.sin(5*(t-1.1)*Math.PI)},Out:function(t){return 0===t?0:1===t?1:Math.pow(2,-10*t)*Math.sin(5*(t-.1)*Math.PI)+1},InOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?-.5*Math.pow(2,10*(t-1))*Math.sin(5*(t-1.1)*Math.PI):.5*Math.pow(2,-10*(t-1))*Math.sin(5*(t-1.1)*Math.PI)+1}},Back:{In:function(t){var n=1.70158;return t*t*((n+1)*t-n)},Out:function(t){var n=1.70158;return--t*t*((n+1)*t+n)+1},InOut:function(t){var n=2.5949095;return(t*=2)<1?t*t*((n+1)*t-n)*.5:.5*((t-=2)*t*((n+1)*t+n)+2)}},Bounce:{In:function(t){return 1-o.Easing.Bounce.Out(1-t)},Out:function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},InOut:function(t){return t<.5?.5*o.Easing.Bounce.In(2*t):.5*o.Easing.Bounce.Out(2*t-1)+.5}}},o.Interpolation={Linear:function(t,n){var e=t.length-1,i=e*n,r=Math.floor(i),a=o.Interpolation.Utils.Linear;return n<0?a(t[0],t[1],i):n>1?a(t[e],t[e-1],e-i):a(t[r],t[r+1>e?e:r+1],i-r)},Bezier:function(t,n){for(var e=0,i=t.length-1,r=Math.pow,a=o.Interpolation.Utils.Bernstein,u=0;u<=i;u++)e+=r(1-n,i-u)*r(n,u)*t[u]*a(i,u);return e},CatmullRom:function(t,n){var e=t.length-1,i=e*n,r=Math.floor(i),a=o.Interpolation.Utils.CatmullRom;return t[0]===t[e]?(n<0&&(r=Math.floor(i=e*(1+n))),a(t[(r-1+e)%e],t[r],t[(r+1)%e],t[(r+2)%e],i-r)):n<0?t[0]-(a(t[0],t[0],t[1],t[1],-i)-t[0]):n>1?t[e]-(a(t[e],t[e],t[e-1],t[e-1],i-e)-t[e]):a(t[r?r-1:0],t[r],t[e<r+1?e:r+1],t[e<r+2?e:r+2],i-r)},Utils:{Linear:function(t,n,e){return(n-t)*e+t},Bernstein:function(t,n){var e=o.Interpolation.Utils.Factorial;return e(t)/e(n)/e(t-n)},Factorial:(a=[1],function(t){var n=1;if(a[t])return a[t];for(var e=t;e>1;e--)n*=e;return a[t]=n,n}),CatmullRom:function(t,n,e,i,r){var a=.5*(e-t),o=.5*(i-n),u=r*r;return(2*n-2*e+a+o)*(r*u)+(-3*n+3*e-2*a-o)*u+a*r+n}}},void 0===(i=function(){return o}.apply(n,[]))||(t.exports=i)}).call(this,e(2))},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.wrapGrid=void 0;var i=a(e(3)),r=a(e(1));function a(t){return t&&t.__esModule?t:{default:t}}function o(t){if(Array.isArray(t)){for(var n=0,e=Array(t.length);n<t.length;n++)e[n]=t[n];return e}return Array.from(t)}var u=function(t,n){var e=n.getBoundingClientRect(),i={top:e.top,left:e.left,width:e.width,height:e.height};return i.top-=t.top,i.left-=t.left,i};n.wrapGrid=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},e=n.duration,a=void 0===e?250:e,s=n.stagger,c=n.easing,l=void 0===c?"Quadratic.InOut":c,h=function(n){var e=t.getBoundingClientRect();[].concat(o(n)).forEach(function(t){if("function"==typeof t.getBoundingClientRect){var n=u(e,t);["top","left","width","height"].forEach(function(e){return t.dataset["cached"+e[0].toUpperCase()+e.slice(1)]=n[e]})}})};h(t.children);var f=(0,r.default)(function(){h(t.children)},250);window.addEventListener("resize",f);var d=function(n){if("forceGridAnimation"!==n&&!n.filter(function(t){return"class"===t.attributeName||t.addedNodes.length||t.removedNodes.length}).length)return;var e=t.getBoundingClientRect();[].concat(o(t.children)).map(function(t){return{el:t,boundingClientRect:u(e,t)}}).filter(function(t){var n=t.el,e=t.boundingClientRect;return n.dataset.cachedHeight||n.dataset.cachedHeight?e.top!==parseFloat(n.dataset.cachedTop)||e.left!==parseFloat(n.dataset.cachedLeft)||e.width!==parseFloat(n.dataset.cachedWidth)||e.height!==parseFloat(n.dataset.cachedHeight):(h([n]),!1)}).forEach(function(t,n,e){var r=t.el,u=t.boundingClientRect;if([].concat(o(r.children)).length>1)throw new Error("Make sure every grid item has a single container element surrounding its children");var c=u.top,f=u.left,d=u.width,p=u.height,_=r.dataset,v=_.cachedTop,g=_.cachedLeft,w=_.cachedWidth,m=_.cachedHeight,y={};y.scaleX=parseFloat(w)/d,y.scaleY=parseFloat(m)/p,y.translateX=parseFloat(g)-f,y.translateY=parseFloat(v)-c,r.style.transform="translate("+y.translateX+"px, "+y.translateY+"px) scale("+y.scaleX+", "+y.scaleY+")",r.style.transformOrigin="0 0",r.children[0].style.transform="scale("+1/y.scaleX+","+1/y.scaleY+")";var b=new i.default.Tween(y).to({translateX:0,translateY:0,scaleX:1,scaleY:1},a).easing(i.default.Easing[l.split(".")[0]][l.split(".")[1]]).onUpdate(function(){r.style.transform="translate("+y.translateX+"px, "+y.translateY+"px) scale("+y.scaleX+", "+y.scaleY+")",r.children[0].style.transform="scale("+1/y.scaleX+","+1/y.scaleY+")",0===y.translateX&&0===y.translateY&&1===y.scaleX&&1===y.scaleY&&h([r])});s&&b.delay(a/e.length*n);b.start(),requestAnimationFrame(function t(n){b.isPlaying()&&(requestAnimationFrame(t),i.default.update(n))})})},p=(0,r.default)(d,100),_=new MutationObserver(p);_.observe(t,{childList:!0,attributes:!0,subtree:!0,attributeFilter:["class"]});return{unwrapGrid:function(){window.removeEventListener("resize",f),_.disconnect()},forceGridAnimation:function(){return d("forceGridAnimation")}}}}])});
+!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.animateCSSGrid=n():t.animateCSSGrid=n()}(window,function(){return function(t){var n={};function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=4)}([function(t,n){var e;e=function(){return this}();try{e=e||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(e=window)}t.exports=e},function(t,n,e){(function(n){var e="Expected a function",i=NaN,r="[object Symbol]",a=/^\s+|\s+$/g,o=/^[-+]0x[0-9a-f]+$/i,u=/^0b[01]+$/i,s=/^0o[0-7]+$/i,c=parseInt,l="object"==typeof n&&n&&n.Object===Object&&n,h="object"==typeof self&&self&&self.Object===Object&&self,f=l||h||Function("return this")(),d=Object.prototype.toString,p=Math.max,_=Math.min,v=function(){return f.Date.now()};function g(t,n,i){var r,a,o,u,s,c,l=0,h=!1,f=!1,d=!0;if("function"!=typeof t)throw new TypeError(e);function g(n){var e=r,i=a;return r=a=void 0,l=n,u=t.apply(i,e)}function y(t){var e=t-c;return void 0===c||e>=n||e<0||f&&t-l>=o}function b(){var t=v();if(y(t))return T(t);s=setTimeout(b,function(t){var e=n-(t-c);return f?_(e,o-(t-l)):e}(t))}function T(t){return s=void 0,d&&r?g(t):(r=a=void 0,u)}function I(){var t=v(),e=y(t);if(r=arguments,a=this,c=t,e){if(void 0===s)return function(t){return l=t,s=setTimeout(b,n),h?g(t):u}(c);if(f)return s=setTimeout(b,n),g(c)}return void 0===s&&(s=setTimeout(b,n)),u}return n=m(n)||0,w(i)&&(h=!!i.leading,o=(f="maxWait"in i)?p(m(i.maxWait)||0,n):o,d="trailing"in i?!!i.trailing:d),I.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=c=a=s=void 0},I.flush=function(){return void 0===s?u:T(v())},I}function w(t){var n=typeof t;return!!t&&("object"==n||"function"==n)}function m(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&d.call(t)==r}(t))return i;if(w(t)){var n="function"==typeof t.valueOf?t.valueOf():t;t=w(n)?n+"":n}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var e=u.test(t);return e||s.test(t)?c(t.slice(2),e?2:8):o.test(t)?i:+t}t.exports=function(t,n,i){var r=!0,a=!0;if("function"!=typeof t)throw new TypeError(e);return w(i)&&(r="leading"in i?!!i.leading:r,a="trailing"in i?!!i.trailing:a),g(t,n,{leading:r,maxWait:n,trailing:a})}}).call(this,e(0))},function(t,n){var e,i,r=t.exports={};function a(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function u(t){if(e===setTimeout)return setTimeout(t,0);if((e===a||!e)&&setTimeout)return e=setTimeout,setTimeout(t,0);try{return e(t,0)}catch(n){try{return e.call(null,t,0)}catch(n){return e.call(this,t,0)}}}!function(){try{e="function"==typeof setTimeout?setTimeout:a}catch(t){e=a}try{i="function"==typeof clearTimeout?clearTimeout:o}catch(t){i=o}}();var s,c=[],l=!1,h=-1;function f(){l&&s&&(l=!1,s.length?c=s.concat(c):h=-1,c.length&&d())}function d(){if(!l){var t=u(f);l=!0;for(var n=c.length;n;){for(s=c,c=[];++h<n;)s&&s[h].run();h=-1,n=c.length}s=null,l=!1,function(t){if(i===clearTimeout)return clearTimeout(t);if((i===o||!i)&&clearTimeout)return i=clearTimeout,clearTimeout(t);try{i(t)}catch(n){try{return i.call(null,t)}catch(n){return i.call(this,t)}}}(t)}}function p(t,n){this.fun=t,this.array=n}function _(){}r.nextTick=function(t){var n=new Array(arguments.length-1);if(arguments.length>1)for(var e=1;e<arguments.length;e++)n[e-1]=arguments[e];c.push(new p(t,n)),1!==c.length||l||u(d)},p.prototype.run=function(){this.fun.apply(null,this.array)},r.title="browser",r.browser=!0,r.env={},r.argv=[],r.version="",r.versions={},r.on=_,r.addListener=_,r.once=_,r.off=_,r.removeListener=_,r.removeAllListeners=_,r.emit=_,r.prependListener=_,r.prependOnceListener=_,r.listeners=function(t){return[]},r.binding=function(t){throw new Error("process.binding is not supported")},r.cwd=function(){return"/"},r.chdir=function(t){throw new Error("process.chdir is not supported")},r.umask=function(){return 0}},function(t,n,e){(function(e){var i,r=function(){this._tweens={},this._tweensAddedDuringUpdate={}};r.prototype={getAll:function(){return Object.keys(this._tweens).map(function(t){return this._tweens[t]}.bind(this))},removeAll:function(){this._tweens={}},add:function(t){this._tweens[t.getId()]=t,this._tweensAddedDuringUpdate[t.getId()]=t},remove:function(t){delete this._tweens[t.getId()],delete this._tweensAddedDuringUpdate[t.getId()]},update:function(t,n){var e=Object.keys(this._tweens);if(0===e.length)return!1;for(t=void 0!==t?t:o.now();e.length>0;){this._tweensAddedDuringUpdate={};for(var i=0;i<e.length;i++){var r=this._tweens[e[i]];r&&!1===r.update(t)&&(r._isPlaying=!1,n||delete this._tweens[e[i]])}e=Object.keys(this._tweensAddedDuringUpdate)}return!0}};var a,o=new r;o.Group=r,o._nextId=0,o.nextId=function(){return o._nextId++},"undefined"==typeof window&&void 0!==e?o.now=function(){var t=e.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof window&&void 0!==window.performance&&void 0!==window.performance.now?o.now=window.performance.now.bind(window.performance):void 0!==Date.now?o.now=Date.now:o.now=function(){return(new Date).getTime()},o.Tween=function(t,n){this._object=t,this._valuesStart={},this._valuesEnd={},this._valuesStartRepeat={},this._duration=1e3,this._repeat=0,this._repeatDelayTime=void 0,this._yoyo=!1,this._isPlaying=!1,this._reversed=!1,this._delayTime=0,this._startTime=null,this._easingFunction=o.Easing.Linear.None,this._interpolationFunction=o.Interpolation.Linear,this._chainedTweens=[],this._onStartCallback=null,this._onStartCallbackFired=!1,this._onUpdateCallback=null,this._onCompleteCallback=null,this._onStopCallback=null,this._group=n||o,this._id=o.nextId()},o.Tween.prototype={getId:function(){return this._id},isPlaying:function(){return this._isPlaying},to:function(t,n){return this._valuesEnd=t,void 0!==n&&(this._duration=n),this},start:function(t){for(var n in this._group.add(this),this._isPlaying=!0,this._onStartCallbackFired=!1,this._startTime=void 0!==t?"string"==typeof t?o.now()+parseFloat(t):t:o.now(),this._startTime+=this._delayTime,this._valuesEnd){if(this._valuesEnd[n]instanceof Array){if(0===this._valuesEnd[n].length)continue;this._valuesEnd[n]=[this._object[n]].concat(this._valuesEnd[n])}void 0!==this._object[n]&&(this._valuesStart[n]=this._object[n],this._valuesStart[n]instanceof Array==!1&&(this._valuesStart[n]*=1),this._valuesStartRepeat[n]=this._valuesStart[n]||0)}return this},stop:function(){return this._isPlaying?(this._group.remove(this),this._isPlaying=!1,null!==this._onStopCallback&&this._onStopCallback(this._object),this.stopChainedTweens(),this):this},end:function(){return this.update(this._startTime+this._duration),this},stopChainedTweens:function(){for(var t=0,n=this._chainedTweens.length;t<n;t++)this._chainedTweens[t].stop()},group:function(t){return this._group=t,this},delay:function(t){return this._delayTime=t,this},repeat:function(t){return this._repeat=t,this},repeatDelay:function(t){return this._repeatDelayTime=t,this},yoyo:function(t){return this._yoyo=t,this},easing:function(t){return this._easingFunction=t,this},interpolation:function(t){return this._interpolationFunction=t,this},chain:function(){return this._chainedTweens=arguments,this},onStart:function(t){return this._onStartCallback=t,this},onUpdate:function(t){return this._onUpdateCallback=t,this},onComplete:function(t){return this._onCompleteCallback=t,this},onStop:function(t){return this._onStopCallback=t,this},update:function(t){var n,e,i;if(t<this._startTime)return!0;for(n in!1===this._onStartCallbackFired&&(null!==this._onStartCallback&&this._onStartCallback(this._object),this._onStartCallbackFired=!0),e=(t-this._startTime)/this._duration,e=0===this._duration||e>1?1:e,i=this._easingFunction(e),this._valuesEnd)if(void 0!==this._valuesStart[n]){var r=this._valuesStart[n]||0,a=this._valuesEnd[n];a instanceof Array?this._object[n]=this._interpolationFunction(a,i):("string"==typeof a&&(a="+"===a.charAt(0)||"-"===a.charAt(0)?r+parseFloat(a):parseFloat(a)),"number"==typeof a&&(this._object[n]=r+(a-r)*i))}if(null!==this._onUpdateCallback&&this._onUpdateCallback(this._object),1===e){if(this._repeat>0){for(n in isFinite(this._repeat)&&this._repeat--,this._valuesStartRepeat){if("string"==typeof this._valuesEnd[n]&&(this._valuesStartRepeat[n]=this._valuesStartRepeat[n]+parseFloat(this._valuesEnd[n])),this._yoyo){var o=this._valuesStartRepeat[n];this._valuesStartRepeat[n]=this._valuesEnd[n],this._valuesEnd[n]=o}this._valuesStart[n]=this._valuesStartRepeat[n]}return this._yoyo&&(this._reversed=!this._reversed),void 0!==this._repeatDelayTime?this._startTime=t+this._repeatDelayTime:this._startTime=t+this._delayTime,!0}null!==this._onCompleteCallback&&this._onCompleteCallback(this._object);for(var u=0,s=this._chainedTweens.length;u<s;u++)this._chainedTweens[u].start(this._startTime+this._duration);return!1}return!0}},o.Easing={Linear:{None:function(t){return t}},Quadratic:{In:function(t){return t*t},Out:function(t){return t*(2-t)},InOut:function(t){return(t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)}},Cubic:{In:function(t){return t*t*t},Out:function(t){return--t*t*t+1},InOut:function(t){return(t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)}},Quartic:{In:function(t){return t*t*t*t},Out:function(t){return 1- --t*t*t*t},InOut:function(t){return(t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)}},Quintic:{In:function(t){return t*t*t*t*t},Out:function(t){return--t*t*t*t*t+1},InOut:function(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)}},Sinusoidal:{In:function(t){return 1-Math.cos(t*Math.PI/2)},Out:function(t){return Math.sin(t*Math.PI/2)},InOut:function(t){return.5*(1-Math.cos(Math.PI*t))}},Exponential:{In:function(t){return 0===t?0:Math.pow(1024,t-1)},Out:function(t){return 1===t?1:1-Math.pow(2,-10*t)},InOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(2-Math.pow(2,-10*(t-1)))}},Circular:{In:function(t){return 1-Math.sqrt(1-t*t)},Out:function(t){return Math.sqrt(1- --t*t)},InOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)}},Elastic:{In:function(t){return 0===t?0:1===t?1:-Math.pow(2,10*(t-1))*Math.sin(5*(t-1.1)*Math.PI)},Out:function(t){return 0===t?0:1===t?1:Math.pow(2,-10*t)*Math.sin(5*(t-.1)*Math.PI)+1},InOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?-.5*Math.pow(2,10*(t-1))*Math.sin(5*(t-1.1)*Math.PI):.5*Math.pow(2,-10*(t-1))*Math.sin(5*(t-1.1)*Math.PI)+1}},Back:{In:function(t){var n=1.70158;return t*t*((n+1)*t-n)},Out:function(t){var n=1.70158;return--t*t*((n+1)*t+n)+1},InOut:function(t){var n=2.5949095;return(t*=2)<1?t*t*((n+1)*t-n)*.5:.5*((t-=2)*t*((n+1)*t+n)+2)}},Bounce:{In:function(t){return 1-o.Easing.Bounce.Out(1-t)},Out:function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},InOut:function(t){return t<.5?.5*o.Easing.Bounce.In(2*t):.5*o.Easing.Bounce.Out(2*t-1)+.5}}},o.Interpolation={Linear:function(t,n){var e=t.length-1,i=e*n,r=Math.floor(i),a=o.Interpolation.Utils.Linear;return n<0?a(t[0],t[1],i):n>1?a(t[e],t[e-1],e-i):a(t[r],t[r+1>e?e:r+1],i-r)},Bezier:function(t,n){for(var e=0,i=t.length-1,r=Math.pow,a=o.Interpolation.Utils.Bernstein,u=0;u<=i;u++)e+=r(1-n,i-u)*r(n,u)*t[u]*a(i,u);return e},CatmullRom:function(t,n){var e=t.length-1,i=e*n,r=Math.floor(i),a=o.Interpolation.Utils.CatmullRom;return t[0]===t[e]?(n<0&&(r=Math.floor(i=e*(1+n))),a(t[(r-1+e)%e],t[r],t[(r+1)%e],t[(r+2)%e],i-r)):n<0?t[0]-(a(t[0],t[0],t[1],t[1],-i)-t[0]):n>1?t[e]-(a(t[e],t[e],t[e-1],t[e-1],i-e)-t[e]):a(t[r?r-1:0],t[r],t[e<r+1?e:r+1],t[e<r+2?e:r+2],i-r)},Utils:{Linear:function(t,n,e){return(n-t)*e+t},Bernstein:function(t,n){var e=o.Interpolation.Utils.Factorial;return e(t)/e(n)/e(t-n)},Factorial:(a=[1],function(t){var n=1;if(a[t])return a[t];for(var e=t;e>1;e--)n*=e;return a[t]=n,n}),CatmullRom:function(t,n,e,i,r){var a=.5*(e-t),o=.5*(i-n),u=r*r;return(2*n-2*e+a+o)*(r*u)+(-3*n+3*e-2*a-o)*u+a*r+n}}},void 0===(i=function(){return o}.apply(n,[]))||(t.exports=i)}).call(this,e(2))},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.wrapGrid=void 0;var i=a(e(3)),r=a(e(1));function a(t){return t&&t.__esModule?t:{default:t}}function o(t){if(Array.isArray(t)){for(var n=0,e=Array(t.length);n<t.length;n++)e[n]=t[n];return e}return Array.from(t)}var u=function(t,n){var e=n.getBoundingClientRect(),i={top:e.top,left:e.left,width:e.width,height:e.height};return i.top-=t.top,i.left-=t.left,i},s=function(t,n){var e=t.left,i=t.top+n.top,r=e+t.width;return i+t.height>0&&i<window.innerHeight&&r>0&&e<window.innerWidth};n.wrapGrid=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},e=n.duration,a=void 0===e?250:e,c=n.stagger,l=n.easing,h=void 0===l?"Quadratic.InOut":l,f=function(n){var e=t.getBoundingClientRect();[].concat(o(n)).forEach(function(t){if("function"==typeof t.getBoundingClientRect){var n=u(e,t);["top","left","width","height"].forEach(function(e){return t.dataset["cached"+e[0].toUpperCase()+e.slice(1)]=n[e]})}})};f(t.children);var d=(0,r.default)(function(){f(t.children)},250);window.addEventListener("resize",d);var p=function(n){if("forceGridAnimation"!==n&&!n.filter(function(t){return"class"===t.attributeName||t.addedNodes.length||t.removedNodes.length}).length)return;var e=t.getBoundingClientRect();[].concat(o(t.children)).map(function(t){return{el:t,boundingClientRect:u(e,t)}}).filter(function(t){var n=t.el,i=t.boundingClientRect,r={top:parseFloat(n.dataset.cachedTop),left:parseFloat(n.dataset.cachedLeft),width:parseFloat(n.dataset.cachedWidth),height:parseFloat(n.dataset.cachedHeight)};return n.dataset.cachedHeight||n.dataset.cachedWidth?(i.top!==r.top||i.left!==r.left||i.width!==r.width||i.height!==r.height)&&!(!s(i,e)&&!s(r,e)):(f([n]),!1)}).forEach(function(t,n,e){var r=t.el,u=t.boundingClientRect;if([].concat(o(r.children)).length>1)throw new Error("Make sure every grid item has a single container element surrounding its children");var s=u.top,l=u.left,d=u.width,p=u.height,_=r.dataset,v=_.cachedTop,g=_.cachedLeft,w=_.cachedWidth,m=_.cachedHeight,y={};y.scaleX=parseFloat(w)/d,y.scaleY=parseFloat(m)/p,y.translateX=parseFloat(g)-l,y.translateY=parseFloat(v)-s,r.style.transform="translate("+y.translateX+"px, "+y.translateY+"px) scale("+y.scaleX+", "+y.scaleY+")",r.style.transformOrigin="0 0",r.children[0].style.transform="scale("+1/y.scaleX+","+1/y.scaleY+")";var b=new i.default.Tween(y).to({translateX:0,translateY:0,scaleX:1,scaleY:1},a).easing(i.default.Easing[h.split(".")[0]][h.split(".")[1]]).onUpdate(function(){r.style.transform="translate("+y.translateX+"px, "+y.translateY+"px) scale("+y.scaleX+", "+y.scaleY+")",r.children[0].style.transform="scale("+1/y.scaleX+","+1/y.scaleY+")",0===y.translateX&&0===y.translateY&&1===y.scaleX&&1===y.scaleY&&requestAnimationFrame(function(){f([r])})});c&&b.delay(a/e.length*n);b.start(),requestAnimationFrame(function t(n){b.isPlaying()&&(requestAnimationFrame(t),i.default.update(n))})})},_=(0,r.default)(p,100),v=new MutationObserver(_);v.observe(t,{childList:!0,attributes:!0,subtree:!0,attributeFilter:["class"]});return{unwrapGrid:function(){window.removeEventListener("resize",d),v.disconnect()},forceGridAnimation:function(){return p("forceGridAnimation")}}}}])});

package.json

 {
   "name": "animate-css-grid",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/main.js",

README.md

@@ -6,6 +6,8 @@ # Animate CSS Grid
 This small script makes it super easy to make sure your CSS grid transitions gracefully from one state to another.
-If the content of the grid changes, or if the grid or one of its children is updated with the addition or removal of a class, the grid will automatically transition  to its new configuration.
+If the content of the grid changes, or if the grid or one of its children is updated with the addition or removal of a class, the grid will automatically smoothly transition to its new configuration.
 
-[Examples on Codepen](https://codepen.io/collection/XGWeaG/)
+[Main Codepen Example](https://codepen.io/aholachek/pen/VXjOPB)
 
+[Other Codepen Examples](https://codepen.io/collection/XGWeaG/)
+
 ## How to use it
@@ -26,8 +28,9 @@
 
+// optionally, if you are changing grid layout with inline styles and still want the grid to animate
+grid.style.width = '200px'
+forceGridAnimation()
+
 // later, to remove transitions
 unwrapGrid()
 
-// later, if you are changing grid layout with inline styles and still want the grid to animate
-grid.style.width = '200px'
-forceGridAnimation()
 ```
@@ -46,3 +49,3 @@
 
-Example optional config object:
+Optional config object:
 
@@ -61,38 +64,27 @@ ```js
 
-## How it works
-
-The script registers a `MutationObserver` that activates when the grid or one of its immediate children adds or loses a class.
-It uses the FLIP animation technique to smoothly update the grid, applying a counter transform to the children of each item so that they do not appear distorted while the transition occurs.
-
 ## Requirements
 
-1.  The updates to the grid will have to come from addition or removal of a class. Currently, inline style updates will not trigger transitions.
+1.  The updates to the grid will have to come from addition or removal of a class or element. Currently, inline style updates will not trigger transitions. (Although you can manually trigger transitions in that case by calling `forceGridAnimation()`)
 2.  If a grid item has children, they should be surrounded by a single container element.
 
-OK:
+Example:
 
 ```html
 <!-- grid style applied via a class -->
-<div class="some-grid-class-that-changes">
-  <!-- a grid item with a single child -->
-  <div class="grid-item">
+<ul class="some-grid-class-that-changes">
+  <!-- each grid item has a single direct child -->
+  <li class="grid-item">
     <div>
-      ...child 1
-      ...child 2
+      <h3>Item title</h3>
+      <div>Item body</div>
     </div>
-  </div>
+  </li>
 <div>
 ```
 
-Not going to work:
+## How it works
 
-```html
-<!-- grid styles applied inline -->
-<div style="[grid styles that change]">
-  <!-- a grid item with multiple children -->
-  <div class="grid-item">
-      ...child 1
-      ...child 2
-  </div>
-<div>
-```
+The script registers a `MutationObserver` that activates when the grid or one of its children adds or loses a class or element.
+It uses the FLIP animation technique to smoothly update the grid, applying a counter transform to the children of each item so that they do not appear distorted while the transition occurs.
+
+It should work on container elements without CSS grid applied as well, but  was developed with CSS grid in mind.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

215387

increased by0.15%

Worsened metrics

Number of lines in readme file

87

decreased by-8.42%

No dependency changes