\n
\n Item title
\nItem body
\n \n```\n\n## How it works\n\nThe script registers a `MutationObserver` that activates when the grid or one of its children adds or loses a class or element. That means there's no need to remove the animations before removing the grid, everything should be cleaned up automatically.\nIt 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.\n\nIt should work on container elements without CSS grid applied as well, but was developed and tested with CSS grid in mind.\n","readmeFilename":"README.md","gitHead":"79bdabde95fa1eb476f0290607544ee1fc597853","bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"_id":"animate-css-grid@1.0.3","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-vzLlfAUexNaMhWampTGHkw3wpJYqLTqp1DQnRbkj8qkbBThv/3DHrpKepf8cQp3SXepPtjJoeKZbccl+Sn7ukw==","shasum":"680e0dffebefc51c6180419a6b1410af18cf4655","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.0.3.tgz","fileCount":4,"unpackedSize":232908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbLaMHCRA9TVsSAnZWagAA11wQAKD6EtDhMDFwJ9mzuxNC\nSatscpAZmBPWQc67jakdpsxX4Xr7XHbzWUXaKDLt98gCS8ijCVTCVo8HJFIx\nVXm+MebSFilNE9CGzfGAfxZvSCMApvKlKUs3n4Pr5xfemHNdijgJ6SCP2pym\ns/GTWexg1sFqOsoUI0wAmSesBnL8NQGv2NDZY5Z34inwgp2A5AjM0ZWdhtGx\nP6JDru5svI3Ckl9EhHitbecwS2uLQJ5HZF97MppnKaQOjFFsPaeOUpSnctVg\nNFKn/TbSbC7lD2TcKmit96BSMOLe2ybObrmWNwNli7r9bjVvaSz8t4haKffh\nNCUONCo/ExWVKj9LUKkuXLm09d+Z+VOd6koex3AOzWlJQCjoQZ69hSBiJVBF\nBdHSEg9TG3NlCeIOV9e2qXvdFAejd8Q7SuR7Bp9ixYa1kKKk1kQbgd1PPlTq\nLvHGshNcbXRWvvpyD4UW13tHDN9RlUVmxt91HjsRusWDYcAHUbtEKlEnj1D5\nPj6Ex6DZwvknCLdVZ2gM3fB9sdeVc89NjWikQZTDJ10GJuKa/vbtL2wpuDaY\nCv0WXmo4bEVrLy/xoyP4iJOc/SS760QViClmFB7GlzjDLjjkFuN4IROdARkH\nMT1FAkQNacvf6FcwYnizzFk62ok99Ptp0/2Q1FjoscLB/PszH2HP0V71izR8\nUUCi\r\n=/qky\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVX99FFuiftBtqageEuyU7mdkOFeOG/UOrbkmzxpxgCAiEAxcnWv82NH5D6GLkxGLEvrybhAB4Lxo69YuJY4Lz/BbA="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.0.3_1529717511364_0.33455991451087885"},"_hasShrinkwrap":false},"1.0.4":{"name":"animate-css-grid","version":"1.0.4","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer"],"repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js"},"author":"","license":"ISC","devDependencies":{"babel-core":"^6.26.0","babel-loader":"^7.1.4","babel-preset-env":"^1.6.1","webpack":"^4.1.1","webpack-cli":"^2.0.12","webpack-dev-server":"^3.1.1"},"dependencies":{"lodash.throttle":"^4.1.1","popmotion":"^8.2.3"},"gitHead":"4861baa82c07e6e18fd414d467e6da0baf015678","bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"_id":"animate-css-grid@1.0.4","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-ab353fPYs/cIHIibiCqobCx2G7KEQi/JsVuiGzeztZaVQfwUm6Wx2Gm+OEO502Ox4TttJPkmnmofDhm4ZDnA/g==","shasum":"4e073c5eda1fb81583f239409011c22ca7e433d1","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.0.4.tgz","fileCount":4,"unpackedSize":232908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbLaYCCRA9TVsSAnZWagAAFGMP/iquGiYV83Aoph40Mmm3\neTkI78Y5EEyUYlmBmCN0HVd/ubVqkLf92VGQMCElkGOpcvUWFsFYrMJylwkX\ngGqq7qyDoYJDZi+AzxKTLGYLP4unHtHRnXkcNbj89yMcpozHVITSj5Z0hmjq\nvgwe+J/EDtS9cnNYvlOfIByKsOFxrgVmtBSJCVPU4E6M9RIB+UHh1AX2HoZt\ntdZyRoshtsk3SkK584gjmUYHwwzIA0TLosEz6geEkI8mdVlEppkt+oSVI8vA\nbZiLA2VGo2Qew9Mz4SKvJtdcvlvi29LOA9umQYYmYU7jukhdTA5qofxTbniX\n+M8N0zz1ZXu0MvvAuQcrSA5BX9BAIBrhTp7ppdLbnadRyfdwNey+JFeQ/asT\nqsaKsbLItNuQ52QAa4JdJFLV4a1fXOGyDG3CowYvg1q2Ri8EpFv3EAlhK1mj\nUsdjycRLDXbNlCgLBKg8R6P+O9oTZmdfb66Xu7vIHdga/hd8ywSLjSa8ec7L\nVVjUQwIX+uo7BqVMhEfk9YT41TvLi/aY3VdPK9j2AYKEt0a/t1fj3p3Pp5lk\ndftZ4at0JdYBaBrpB5VpnQkTYAckT8VqOpLmML0hTIEL9tBZP3dkn1NViso6\nUhPoCITj20rUVoJ8WQBCgLNP0E4h3BsjAYPSyYjqOeN3apFOasj7xKHFh2Qc\nmuNE\r\n=8bWL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmykZkvpEAymXELNRJZuzh8eweJHi18+M2Cit1QsWMSQIhAMdqKc1Dd1zUxOaycz8kzeuTItAx6ZnYacMQ+m/sjl8S"}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.0.4_1529718273967_0.047372022458948226"},"_hasShrinkwrap":false},"1.1.0-beta0":{"name":"animate-css-grid","version":"1.1.0-beta0","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer"],"repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc"},"author":"","license":"ISC","devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","@types/lodash":"^4.14.119","lodash.throttle":"^4.1.1","popmotion":"^8.5.4"},"readme":"# Animate CSS Grid\n\n\n\nThis small script makes it easy to make sure your CSS grid transitions gracefully from one state to another.\nIf 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.\n\n[Basic Codepen Example](https://codepen.io/aholachek/pen/VXjOPB)\n\n[React Example](https://codepen.io/aholachek/pen/mxwvmV)\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\nES6 Module:\n\n`yarn add animate-css-grid`\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut'\n}\n```\n\n[View available easing functions here](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n
- \n
- \n \n \n\n
Item title
\nItem body\n \n - \n \n \n\n
Item title
\nItem body\n \n - \n \n \n\n
Item title
\nItem body\n \n - \n \n \n\n
Item title
\nItem body\n \n - \n \n \n\n
Item title
\nItem body\n \n - \n \n \n\n
Item title
\nItem body\n \n
\n```\n\n## How it works\n\nThe script registers a `MutationObserver` that activates when the grid or one of its children adds or loses a class or element. That means there's no need to remove the animations before removing the grid, everything should be cleaned up automatically.\nIt 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.\n\nIt should work on container elements without CSS grid applied as well, but was developed and tested with CSS grid in mind.\n","readmeFilename":"README.md","gitHead":"e2642c4d1b926d688684ad1f1b1ed0ef637e2f39","bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"_id":"animate-css-grid@1.1.0-beta0","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-Qz1z6ksFnK5CHhTTERa4kVZ8gLsvEf6uzOWrMcEbjy1MnTLFEMIC1wa+zcWEcAR7whDKUXoEXzRv8FDeBeTrHg==","shasum":"dcca474449b8a8a779afd67a5a8d481e46ee9d70","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.1.0-beta0.tgz","fileCount":8,"unpackedSize":351521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcI7zrCRA9TVsSAnZWagAAtZgP/1RsiTTH0hz3JYrYpzV5\nmTvQUKdCxhXV55PmZk2d0hafoKVq2Ju6gmVYJ2UyHGtF7ZVpJU+vu1ylYnIx\nJIzJkMgQxZ2PUyJYO5eYNusZ+xtbPXCACHUEoBz0WWKI8Ee6Mjnv+CLyS09p\nZFHE6UGcv+7VcEkxEc+IebNclH882asGwqQ2zXslFKY9DOdxXyjTIPAY7irR\n9JqPJiHnN797cdBGZv1zH0rorC57CG3IjWphdSRWjCD6vf7oTFxvJ9vosG6D\nCZ/jKnJj44fiOAH/3vTcuC1IwGSy+Br/DBTb39pT+K7jEUhmgmk0nvlQWKZt\nDw6g7/zz5340+czIRAdoyunxcqIe3WrRsAlUP05WZXDDkVTcRfPamHBnlMrS\nXHOMJCK+ukJphjpw8+KDOsj8ZAA6LkJ3Ld/Hw2FUsiHlp/k1pBYEEENIhHG1\nqpNw3J0dVPyL8xW/0EKSrN5zbtArzJj7FkYuzxoRCEnLILDnSs+liXEMPCv8\nlM4CDASQx9ps0RsHZBQ7Q4gnJonPuYdxOQ6J9gSoXa9ggtcRXtG3xNWofIUo\nMRfxH2cpUda31IDAS57bzyid1euc9e76dtwUf/tLKsJrAYra9tfdOVHwaWNs\nz5SjJIwAgsgRYrz1KQo281foAGrw3IXW3/BVpYCZoGTDMA5vnAiU6QlvtwM+\nSk+B\r\n=Thjd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAruo7kEyePreUJhpoRMaXRKncf7COP7SbXFz3KoL9KjAiBYIBpYtK/wCc/2PkmvcRkdOvVsCe4jvpvvlEjfUszbqg=="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.1.0-beta0_1545845994707_0.11556167977846488"},"_hasShrinkwrap":false},"1.1.0":{"name":"animate-css-grid","version":"1.1.0","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","@types/lodash":"^4.14.119","lodash.throttle":"^4.1.1","popmotion":"^8.5.4"},"gitHead":"9ffe9697588d4d27df742c1f18b67a993541aec5","_id":"animate-css-grid@1.1.0","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-ZjRbOzMvc9RXluOQvF94PouJojAiS4k4exwKHGidIuOiEEFUf6IQGII4BqpSk1NdIiFLiaNu1HkywVX1W8LUEg==","shasum":"a701d4f97d3dbfe3544342863d42318dd6c71368","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.1.0.tgz","fileCount":10,"unpackedSize":13072987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcI+EmCRA9TVsSAnZWagAAqJIP+gP+yRTTDW/H4RmImKZu\n3I2Qwl1K7JCSKPGtRSS/eRki52ZyvctiS+W824spdXwbUXgE/kXxQSrWqZzS\nuiK45qJjJYTGVCgEw15PX4NwbLzpz+Jyd+GzzcnprQZixpolQVWCYLWHVR1x\nDq389Xq+U6PrGqF39qIRVdanALcJCmwzeFxOSSLfT6Ca5wgN9TOmkwnkrxNW\nIR9/KjCE9jj9mOIORG08GxYBv1SqToL92vHuyA6/4v5MqnDTXzT6dORn7B6d\nuyq2UPp07E04xV6QMW3JwwaxYBOR93D5io+hlOeIOQwZ63feFmshElqFaQzk\nPc25p3oaCqy7YmdzBqPa9vkdd0DPvYiv/X9/+f8DXl/dwpT67e0MJ5/vgjOP\nHE4dq/O+RWVmaSAXlC08pLHAsHiKLZksOltiv+JJ4uUvBpca8IVMYUTgr0I8\nBFR57W/aoEGrCe6BTYnQE1BAKMcj64NqEtItAmDsHSu4HGrDPmulNayB3th8\nMm33XKS+4/ZKyKHb5wMPo+aZBpYGEIQwD3z0v/WGwTi3F1WVJHpNj4ZqQ3fP\nK3sIDVu6TiluQfeKeBkn5B2oeoYKkKn3fCENSyAee/adq3Zd5QMe6l86vpcp\nbcnY4LpnbKlcstPRIrh+ytZ0qfaD7TPccljOm2z4PIHcStr6sAkY6SLIsuO4\nQ0Pq\r\n=+Lgl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuoQBMOEF+4Tsq3wmGUpNcMu7svBq4IrkOzIAmAZpIfAIgYOesAzfEIKyRPfR3dVQZ54SwPoYDTqlOhB07sJSlu00="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.1.0_1545855269329_0.2377520650429028"},"_hasShrinkwrap":false},"1.2.0-0":{"name":"animate-css-grid","version":"1.2.0-0","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"typings":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","@types/lodash":"^4.14.119","lodash.throttle":"^4.1.1","popmotion":"^8.5.4"},"readme":"# Animate CSS Grid\n\nSeamlessly animate all CSS grid properties, including:\n\n### `grid-column` and `grid-row`\n\n\n![\"grid-column](\"./examples/grid-col-optimized.gif\")
\n\n\n\n### `grid-template-columns`\n\n\n![\"grid-template-columns\"](\"./examples/grid-template-columns-optimized.gif\")
\n\n\n### `grid-gap`\n\n\n![\"grid-gap\"](\"./examples/grid-gap-optimized.gif\")
\n\n\n\n#### [Fork Photo Grid Example on Codepen](https://codepen.io/aholachek/pen/VXjOPB)\n\nThis script makes it easy to transition your CSS grid gracefully from one state to another.\nIf 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.\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\nES6 Module:\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut'\n}\n```\n\n[View available easing functions here](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n
\n\n\n\n### `grid-template-columns`\n\n\n\n\n\n### `grid-gap`\n\n\n\n\n\n\n#### [Fork Photo Grid Example on Codepen](https://codepen.io/aholachek/pen/VXjOPB)\n\nThis script makes it easy to transition your CSS grid gracefully from one state to another.\nIf 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.\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\nES6 Module:\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut'\n}\n```\n\n[View available easing functions here](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n- \n
\n```\n\n## How it works\n\nThe script registers a `MutationObserver` that activates when the grid or one of its children adds or loses a class or element. That means there's no need to remove the animations before removing the grid, everything should be cleaned up automatically.\nIt 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.\n\nIt should work on container elements without CSS grid applied as well, but was developed and tested with CSS grid in mind.\n\n## Usage with Frameworks like React\n\nThe `animate-css-grid` library can easily be used with frameworks like React.\n[Check out an example on Codepen.](https://codepen.io/aholachek/pen/mxwvmV)\n","readmeFilename":"README.md","gitHead":"01c96fbad2afe563dbc3b00b69032834b93bfb6e","_id":"animate-css-grid@1.2.0-0","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-p6Y6fio6RkaLqkFmBesNer308EDGhMmPr7a3Pl8c/2NqIFttpq6ZZBpKmH9HBVbdcLMVvctrVacd65wtGgN4hg==","shasum":"d05a90d9d13d485e4b0ee9576337c1e6259c05a4","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.2.0-0.tgz","fileCount":12,"unpackedSize":13074212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcJDsACRA9TVsSAnZWagAAP24P/Rt65Ay73CpmQ87G+P4l\nFva3X+pbWXCVoAMRjrKWPeUvA2ESwG+6FoLLOPBHRbgLo2Bf+BW57EiZE8P3\nktZc9OfX9VDx6mI8kQ66tYrcVmByani51MYPi2uF8T+q2xQj0mzSS0k+8tGz\nBfmKehQu5vFHxRjKFb7iRI3MJMuGlqkYdEFOk7YyKToQNrLDKC7v9lugFqzG\nj4MrN0g6XzbVjr+Unep+FfR10ghAQV/r9Tbvs/1wiVJGqxiz4hxBBti7UCAA\nRdxRT2gU87fdxCuUTIG7t5qxxbQxYgtbOpaiTWG0c39PZGgOi9Wg43YviRYS\nen9az3jsqesDW1E0HLv1KIS/b5Gnk54Wi1YzQvKfgX+EGWBNSbsvKcNZZdku\n0mVN39xKle1lSWOqYMVqG5SyXcFUUXWtNdHADmFnNXvzaNqnsegDb1Vi1BKk\nDJVWq8mdJDPL32usTmQdyemZ8jsmsGKkrsFTyMnluWyYkurdMKN3zSX1jOeh\n5NSDEfKoGvbMzf54RNj8b5UrrVABTvs65BC+vVnprYmi/4bpMC6gjXMa+UB1\nQwKKoFLlbXgvp5bMtpKfTu4F2+Y/2lsnAyVvSFcuL7hG4e7dROpCsK8Qg6fr\nzUSJqWtGUaOta98onbqb8y0k+t3jcmM/xcqnEqO2rKzoqsKAVSCNvToq0Yu8\nk8Ue\r\n=Oryj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtZj2yD499fctLmsUOKbcJGARppyGG82GF0+rXnOVCrgIhAMVlJqfz92mMxxBUcIzyULKu0ckS2v/DkMl4EVYrc1eF"}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.2.0-0_1545878271429_0.5979460463289132"},"_hasShrinkwrap":false},"1.2.0":{"name":"animate-css-grid","version":"1.2.0","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"typings":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","@types/lodash":"^4.14.119","lodash.throttle":"^4.1.1","popmotion":"^8.5.4"},"gitHead":"db439da85afa0859dc755873b30c9e0a68ca01ef","_id":"animate-css-grid@1.2.0","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-BFYU9FncY8aQ/6uNLEz6wBsm8ONYfOuR/djIUo74bees2zPCYLYGMWLB4okMmgUeGq9mvf2Rl0dCAQQwfjNfcA==","shasum":"8adbe55da2f3ab06b5acd7d449ce3cbcd340a04f","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.2.0.tgz","fileCount":12,"unpackedSize":13074412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcJD3zCRA9TVsSAnZWagAAQUkQAJcnQTKIPa6N95NF3VVx\nq05OkvVENqh5V+qdv8b+e9Lm52wljqPfQhWZ9zdADRLjDmC3ke5N8OHQbqJP\nVHyzrkANxtMx1XJpIEZghyqVgf1xpcirCQiGo5rqC0nwSvXOPK6VwrkzaEyC\npHxZ7IIEU8Aq8p40DreqVQAyddNjbswV7EIRiNe/NgiKtt1ZlMGRBqe8knad\nnGBfOwiJrwDeT8bTU+NOsMccGzf5cSvFkQG6Dag6FpKTGz85+TZliola5sf0\npp+afBEds3aAClG2auUyMcHpplEZH8iyphfOygO2ctmvQf3ZHKTCVtOrnlzu\nYDmpOWReLWVUkzZGxvxNIO11bzTvTDaJHtOTmaFoKWv2xtSkmwdrWPB9qyAL\ngCKHMxE7S/mOOeDWSSUmHobObVxS8HNFHLXAE2ncd49Bc74fXt+fHEDl1rtq\n47CpNUiw+fXf/Pyj3GH/50D23Hazy+AvxCkTfLaBXMDzJ+qMV5Zj8pta5cb9\nVU0GjgY3mshdLgdIHZPOdZN1VbWurjaH1xoAC3AuyLR4MEQdZjNyPAfrdBsC\nANEJT7EZb2vHOnTgwahKIe0mMTaXuRwhJD2hJLcgSHEfeUPXwnxf1HXV1o1o\n1pxFdmluMbPwxYD226qm/2foHc/7JdFKh1w9Bn38MusCzLdri1OiOhf+6/It\nin2u\r\n=/Fh7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6CmUCABejFz2ZkBTtiAz3XpidN4FUbRqxXdyN7ChohAiAgon58vaTH4VJd+BAxDIf+YyBtMHHkXIYiBRZlxV7Dcw=="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.2.0_1545879026781_0.2009238034949632"},"_hasShrinkwrap":false},"1.2.2-0":{"name":"animate-css-grid","version":"1.2.2-0","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"types":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","npm-run-all":"^4.1.5","tslint":"^5.12.0","typescript":"^3.2.2","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","lodash.throttle":"^4.1.1","popmotion":"^8.5.5"},"readme":"# Animate CSS Grid\n\nSeamlessly animate all CSS grid properties, including:\n\n### `grid-column` and `grid-row`\n\n\n![\"grid-column](\"./examples/grid-column-optimized.gif\")
\n\n\n\n### `grid-template-columns`\n\n\n![\"grid-template-columns\"](\"./examples/grid-template-columns-optimized-1.gif\")
\n\n\n### `grid-gap`\n\n\n![\"grid-gap\"](\"./examples/grid-gap-optimized-1.gif\")
\n\n\n\n#### [Fork Photo Grid Example on Codepen](https://codepen.io/aholachek/pen/VXjOPB)\n\nThis script makes it easy to transition your CSS grid gracefully from one state to another.\nIf 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.\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\nES6 Module:\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut'\n}\n```\n\nAvailable easing functions:\n\n- `'linear'`\n- `'easeIn'` / `'easeOut'` / `'easeInOut'`\n- `'circIn'` / `'circOut'` / `'circInOut'`\n- `'backIn'` / `'backOut'` / `'backInOut'`\n- `'anticipate'`\n\n[Learn more about available easing functions here.](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n
\n\n\n\n### `grid-template-columns`\n\n\n\n\n\n### `grid-gap`\n\n\n\n\n\n\n#### [Fork Photo Grid Example on Codepen](https://codepen.io/aholachek/pen/VXjOPB)\n\nThis script makes it easy to transition your CSS grid gracefully from one state to another.\nIf 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.\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\nES6 Module:\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut'\n}\n```\n\nAvailable easing functions:\n\n- `'linear'`\n- `'easeIn'` / `'easeOut'` / `'easeInOut'`\n- `'circIn'` / `'circOut'` / `'circInOut'`\n- `'backIn'` / `'backOut'` / `'backInOut'`\n- `'anticipate'`\n\n[Learn more about available easing functions here.](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n- \n
\n```\n\n## How it works\n\nThe script registers a `MutationObserver` that activates when the grid or one of its children adds or loses a class or element. That means there's no need to remove the animations before removing the grid, everything should be cleaned up automatically.\nIt 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.\n\nIt should work on container elements without CSS grid applied as well, but was developed and tested with CSS grid in mind.\n\n## Usage with Frameworks like React\n\nThe `animate-css-grid` library can easily be used with frameworks like React.\n[Check out an example on Codepen.](https://codepen.io/aholachek/pen/mxwvmV)\n","readmeFilename":"README.md","gitHead":"83fb17b1bf65aca7c8b4a29b740d52f6300a6828","_id":"animate-css-grid@1.2.2-0","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-kya1hCDvgEwfYsr44+f+6MUqSAW5XkS3imLuVxlTjtJpyzloInCfIM2WQVO0iRUSW40J3eK2hdxazjUnCeC9NQ==","shasum":"9745dc839055f8817684d3b8738bf62d27a2e52d","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.2.2-0.tgz","fileCount":32,"unpackedSize":6448541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLhpOCRA9TVsSAnZWagAAPnoP/2Iqptilw/yCPV+wUBUI\nNz/VdEaZ00f5J/yxZWEgZo8F5pv5TgmF+SDF2AZTPVRGJIprNZCFDqHxLgeZ\nOMtYAMhOx6Om4wKMfch4wan+icOLJMLj9lQRIju4uQcsEk2FKE3QTG3/SNXF\nXMSX0aTYNRBClrz6VHz6xWTQ5XaP/N6KyLlU+DQwzKTfn5D0itQfM46OzGRV\nVbM4HjQsSR/+nYG0Znvw3E+TPtBz7kXCtMgU5LT2Lvj+7CfGBVYT8iVdU1h7\nYQljow/KM60Ogdiq0RrA53nz8d5YRCTVMW2SXyLRJPOpJHsSMSVx994Y+Qrk\nhaF2Jh/W9XPtUs+VL1deqd7zbKFBam1VOWmSz6IG4EqInmcCI2Ge2NPABglp\nqP4ICjL1SZxuUooBZFLhhqFj1y2hWniF2io/UuCFzFAklnVr2yusL8nDPi3r\nsFAYK7YOuutGBLahkt8r1w2sOb8VIFrnZ6m5oKrD5HWxVS03e7jHhxM0L/z1\nljMZzDc3dgN82w8/oi5y7LYivKh3ljETWiecLFJzRqUZtxuBbPTiJq1S1C/0\ntZoZCvfcpZVK90M8THJrxZ709ADcE5m6Bbfw6BsYnx7m2CekgnxIpbGXbweO\nVnQtQsVLmHEX38Kq1Wv6VDY/Zk2BRn6Q9tD+3S129rXGb5Z/39H1hN+nIA5i\nwhOV\r\n=OeNA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5Ca/+MPDv1eJMsKApq2SuaK0X4E+zwziZN0T8uzNHzAiAK9kK/pPJLO6gchIGfIzMPNUKgrDITvLvAcN3toDuQRw=="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.2.2-0_1546525260308_0.15559380741522144"},"_hasShrinkwrap":false},"1.2.1":{"name":"animate-css-grid","version":"1.2.1","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"types":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","npm-run-all":"^4.1.5","tslint":"^5.12.0","typescript":"^3.2.2","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","lodash.throttle":"^4.1.1","popmotion":"^8.5.5"},"gitHead":"4f1f822a91dc9734c0293bdccfc4a134998b8bb6","_id":"animate-css-grid@1.2.1","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-icNq3z56hXcxRYFwssQ0axQP30bqerwaOjmW5Wf41NXSL7HUe2XYy3saqnORh5FVxNURmDN8Oy7F43JclG4tcg==","shasum":"6c6140c4543b2f86f764046fb1ef6da958bf499f","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.2.1.tgz","fileCount":32,"unpackedSize":6448539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLhwMCRA9TVsSAnZWagAA8DIP/0JGnEeuaK/ISwCw9S+f\nfQ2Ruc3lUgWGDTLepP9GSYjyIbd/g/t5gze8T37IOsJnSZHMwtO71SSWJAT7\npkOre0aGHRsZznfeSyjmnx0D8IyPFXIxOE4H1lZ+8y8szxqlkw06yUM946j4\npmlpE1HIUXOpJ7ZIQKsYzIKVeK3Lnx5JG0hdj6rx9/ubwGEnWEzBqJ+F0oSq\n56xGHDD4lGwfF52k5utB6G3Aa35XJSaYqYTqpjJ90PvxPOCh+ssv+zm3EZu7\nQUTs/YEZ6oXBCDmc7DrFl4oxPTcrkUNQVAiPpGDSM/rdwtv47AqZ/YGb1FzM\npPlSMHI5Ecoo+1cdIETgpMI5Pge6j4Q28rL5MC45O/x4RfxJF++1GfqlmkSm\nPei8TpkLMDPG9tuvDtq+xaZ/RrdkS7B4kvHYoOyBH39c7P0NV3H7XERcQxng\nXCUbB2NF65CUkzDYo9PmiEguAe01cYF6EIvOKbKQtt+K9ioxlC+TIWqAfVSq\nh8dzXNDe96RmdQToCKVHvZTkFBq0D/2CdG5q1W4C+4PR3O6BHDt4iWOlOASR\n98y/ciyVucAUDQmJYexy2Zk9gPhj67pzdVpKKu7y1D0Cih2xfdKIEcwzfy8i\n4whx2VNVaoALUzsxz1QcPjVo0YzKdJd4KeTGSczd/bbr9XGEGQGLoXMOMbmX\nzaix\r\n=JuD8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcNMh7ee24TlzZTpVAegaaywEPwYyJ8noTSxjw0d2C/AiEA4T5zQcaN2lEpQ3mufy2fu9ijzu4xReP6+hFNls++Gpc="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.2.1_1546525707496_0.32220389880179634"},"_hasShrinkwrap":false},"1.3.0":{"name":"animate-css-grid","version":"1.3.0","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"types":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","npm-run-all":"^4.1.5","tslint":"^5.12.0","typescript":"^3.2.2","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","lodash.throttle":"^4.1.1","popmotion":"^8.5.5"},"gitHead":"6db90af5202571803008caf43794912172c71165","_id":"animate-css-grid@1.3.0","_npmVersion":"6.5.0","_nodeVersion":"11.7.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-PVV49Rld1igRnf7K+Jv/8lewywD+pNAlYbC/lfhBuAXlbXqPzZ+QARrFHtTNC8SyiswwrZop1Cqme5pnWN760g==","shasum":"a7ea237d977facdc2926aa71b79071e4514b5c67","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.3.0.tgz","fileCount":32,"unpackedSize":6456271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYNYqCRA9TVsSAnZWagAASvMQAIvGvAa6WZnlU3+RT9Xm\n6ujDqw7OSJrSpv22qTn+mqdXfbnG6kywTVMWAg5RAyBAtr4zJQDqjNk7voFz\n7c6ySClL3GYP1bgTMxiNcdsNIm+c5nbLs/pvwOGw/Xi/xkOQTAqa+KF8Twi5\n0JjmrFeowTNKB3eUxgYaNnh7Vg8xN2v4WtsIEfApOH/n2pLGjfiNq5A/qGff\ncvwgU5fU4L611SW0gOHkwONJZiCKGMOrOjloT00aMpOuWb0etlfkWC5vA8+g\nO5IYQ7TsmE5fl2LQfKTKaJ2sgL3xZE9mAhCqtfm7qDZ041HVjJBNHgv8Nz27\njTmqyHDz4ZYoHL4rTaDW6Z0hxcWSvRkGo5WJNHR/aUXtvThJBL6lJD4cp7Z6\nbHSgxYRP9FRDM9GgcPV0JZrGHsgEIxKJTUYb8iHl9ga3sRmBZQUyAaFB8gkw\nwM1AwVQztRow3Gliji816HikfzRQEyEM8TS0VNOm6ilSubcHoUoRPjsk3j6n\n3iYjRQt/d1AQGtQo00REVro2AsuMwchAL0WOmi8g0xk84yvdfbmG4+Q419B2\naevNQ0ViF60AiNTUpqVTO5sCaBfDAeUdnmn8LIgY6xa2NmoTBKFyNYN8Anl/\nylih4ODWd6cOmyAwP9tG+eFddpn9ck+PfrKI4k9IMPLLJU8dwsNnNLoDka6k\nW/w4\r\n=zHif\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9NqxiXOhRmim7K6c/tFW67QgRDhEXFpWIoSd03krgTAIgQgoyLEBjeMyp9+BMEf59/e7FfWFiagA1+XG7+e12gYU="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.3.0_1549850153392_0.9203211097838822"},"_hasShrinkwrap":false},"1.4.0-0":{"name":"animate-css-grid","version":"1.4.0-0","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"types":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","npm-run-all":"^4.1.5","tslint":"^5.12.0","typescript":"^3.2.2","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","lodash.throttle":"^4.1.1","popmotion":"^8.5.5"},"readme":"# Animate CSS Grid\n\nSeamlessly animate all CSS grid properties, including:\n\n### `grid-column` and `grid-row`\n\n\n\n\n\n\n### `grid-template-columns`\n\n\n\n\n\n### `grid-gap`\n\n\n\n\n\n\n#### [Fork Photo Grid Example on Codepen](https://codepen.io/aholachek/pen/VXjOPB)\n\nThis script makes it easy to transition your CSS grid gracefully from one state to another.\nIf 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.\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\nES6 Module:\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut',\n // function: called with list of elements about to animate\n onStart: (animatingElementList)=> {},\n // function: called with list of elements that just finished animating\n // cancelled animations will not trigger onEnd\n onEnd: (animatingElementList)=> {}\n}\n```\n\nAvailable easing functions:\n\n- `'linear'`\n- `'easeIn'` / `'easeOut'` / `'easeInOut'`\n- `'circIn'` / `'circOut'` / `'circInOut'`\n- `'backIn'` / `'backOut'` / `'backInOut'`\n- `'anticipate'`\n\n[Learn more about available easing functions here.](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n
\n\n\n\n### `grid-template-columns`\n\n\n\n\n\n### `grid-gap`\n\n\n\n\n\n\n#### [Fork Photo Grid Example on Codepen](https://codepen.io/aholachek/pen/VXjOPB)\n\nThis script makes it easy to transition your CSS grid gracefully from one state to another.\nIf 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.\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\nES6 Module:\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut',\n // function: called with list of elements about to animate\n onStart: (animatingElementList)=> {},\n // function: called with list of elements that just finished animating\n // cancelled animations will not trigger onEnd\n onEnd: (animatingElementList)=> {}\n}\n```\n\nAvailable easing functions:\n\n- `'linear'`\n- `'easeIn'` / `'easeOut'` / `'easeInOut'`\n- `'circIn'` / `'circOut'` / `'circInOut'`\n- `'backIn'` / `'backOut'` / `'backInOut'`\n- `'anticipate'`\n\n[Learn more about available easing functions here.](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n- \n
\n```\n\n## How it works\n\nThe script registers a `MutationObserver` that activates when the grid or one of its children adds or loses a class or element. That means there's no need to remove the animations before removing the grid, everything should be cleaned up automatically.\nIt 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.\n\nIt should work on container elements without CSS grid applied as well, but was developed and tested with CSS grid in mind.\n\n## Usage with Frameworks like React\n\nThe `animate-css-grid` library can easily be used with frameworks like React.\n[Check out an example on Codepen.](https://codepen.io/aholachek/pen/mxwvmV)\n","readmeFilename":"README.md","gitHead":"ec8086a98a176ddc979773dd8d2dff92f07d6898","_id":"animate-css-grid@1.4.0-0","_npmVersion":"6.4.1","_nodeVersion":"10.14.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-NAzNyK/tkKhmDxeICkiA72HcTDHi2rJdiwU+4vHT4OqOpdfbDqW1d1j3Ilq73WOWzD8Tk+w5Tz0R9P5oXUqSAQ==","shasum":"cc754258f41ccf75c354afeec290b5682d9197f1","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.4.0-0.tgz","fileCount":12,"unpackedSize":6428937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfoX4CRA9TVsSAnZWagAA+8QP+gIvAeLxnPeNd6NdbdAy\nVJ2lbvw3/8LF0I1BBJK5x+BK6g8lVEFPQd3bJJBQrKb9hTFyMKrdEBlGWOnD\nWqS9hdC1Xtji6bkkXOMBYaJ5TGBTerfsbl2dV6lDY6yFYtKKa7SdYtvN6JNQ\ngvufbyX6jFPU7ion3YKNmmJvaRaG22Y7hDu3DekrW6B2XPoToD9YQUTfGl+u\nUXKrBOp1enHeIJZLm9ijdMB0VyvlneQCLg7hoGiT+IYMfydPvH5p0Pjw7muV\n0+labLtQO7kUvpH1VKFT/Plr2FXOW0WkeEWlATy/wOgJbrfjTupOzi6bjTkQ\no1L0WZQ/fYNn+3wZvTrweezg6RgOlX15va4YGLGiGC5twvBKYbjtBF/vxBN7\nkAORY3t8IozrbenOuQ7klA/8boJZqoxiZFXFK75UPkHve1SJr+5rKa2vkfJP\nauhKe4MIP23UcGCUQ9boBvq722AtF72x7SdJreSmildZ2iw2/UpM9NdSOSXV\n4fEOSRx0+zYQMtLXMIaxK2q2p+BDBOAsbhWDwCG4qvdT+DP0iW9isEBHDs+w\n8D/bhKJk3jzuL2ftM4stsC3zz7kO47yVDD+EYOdwnEhBNJus3QNYlgNBGyZh\nxbJ1ttR//Ba1RvESMMLtPLoVLiTwLzs4llxIUVjVyuUkBsA2nsGyYCWaCa0I\nVgNg\r\n=2D5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvtX7MlMJhxJ5t+aaLNqP3paDwkORuEgMXnrbS8Z8yaAiEA5cR2YE2eJYmZALliOiJcwujUFCkap39cJj7rNf4uWMI="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.4.0-0_1551795703270_0.21955579735541297"},"_hasShrinkwrap":false},"1.4.0-1":{"name":"animate-css-grid","version":"1.4.0-1","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"types":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","npm-run-all":"^4.1.5","tslint":"^5.12.0","typescript":"^3.2.2","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","lodash.throttle":"^4.1.1","popmotion":"^8.5.5"},"readme":"# Animate CSS Grid\n\nSeamlessly animate all CSS grid properties, including:\n\n### `grid-column` and `grid-row`\n\n\n\n\n\n\n### `grid-template-columns`\n\n\n\n\n\n### `grid-gap`\n\n\n\n\n\n\n#### [Fork Photo Grid Example on Codepen](https://codepen.io/aholachek/pen/VXjOPB)\n\nThis script makes it easy to transition your CSS grid gracefully from one state to another.\nIf 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.\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\nES6 Module:\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut',\n // function: called with list of elements about to animate\n onStart: (animatingElementList)=> {},\n // function: called with list of elements that just finished animating\n // cancelled animations will not trigger onEnd\n onEnd: (animatingElementList)=> {}\n}\n```\n\nAvailable easing functions:\n\n- `'linear'`\n- `'easeIn'` / `'easeOut'` / `'easeInOut'`\n- `'circIn'` / `'circOut'` / `'circInOut'`\n- `'backIn'` / `'backOut'` / `'backInOut'`\n- `'anticipate'`\n\n[Learn more about available easing functions here.](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n
\n\n\n\n### `grid-template-columns`\n\n\n\n\n\n### `grid-gap`\n\n\n\n\n\n\n#### [Fork Photo Grid Example on Codepen](https://codepen.io/aholachek/pen/VXjOPB)\n\nThis script makes it easy to transition your CSS grid gracefully from one state to another.\nIf 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.\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\nES6 Module:\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut',\n // function: called with list of elements about to animate\n onStart: (animatingElementList)=> {},\n // function: called with list of elements that just finished animating\n // cancelled animations will not trigger onEnd\n onEnd: (animatingElementList)=> {}\n}\n```\n\nAvailable easing functions:\n\n- `'linear'`\n- `'easeIn'` / `'easeOut'` / `'easeInOut'`\n- `'circIn'` / `'circOut'` / `'circInOut'`\n- `'backIn'` / `'backOut'` / `'backInOut'`\n- `'anticipate'`\n\n[Learn more about available easing functions here.](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n- \n
\n```\n\n## How it works\n\nThe script registers a `MutationObserver` that activates when the grid or one of its children adds or loses a class or element. That means there's no need to remove the animations before removing the grid, everything should be cleaned up automatically.\nIt 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.\n\nIt should work on container elements without CSS grid applied as well, but was developed and tested with CSS grid in mind.\n\n## Usage with Frameworks like React\n\nThe `animate-css-grid` library can easily be used with frameworks like React.\n[Check out an example on Codepen.](https://codepen.io/aholachek/pen/mxwvmV)\n","readmeFilename":"README.md","gitHead":"59ce254c583d3bd9663329562762268446639e31","_id":"animate-css-grid@1.4.0-1","_npmVersion":"6.4.1","_nodeVersion":"10.14.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-P1veXOWg/iPZgIxazzk+JhGMseoNoFF3t/4EsmIT0GUW95fGCvr3OlfyBJnpXEoY7wQi/fkcoqqYV/9Pxf9p1g==","shasum":"a0e55bdd18d3bd6dfde6f00863595eeff0a2a7d1","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.4.0-1.tgz","fileCount":12,"unpackedSize":6428692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfoicCRA9TVsSAnZWagAA0xMP/1P/x++Vqa/c1GIJg7yp\nptWlYvzadIOKb/fnnNH54adZhM+riwOiQ6q+KUJYT0wcZzttVUy6DjHcZdR7\nc5Cgqj5Jjwybk/eN8dl8+WOzIDXnt6rH57eoBCjydq0J8malpLwD29XtiLtn\nt5Riky0ner1r6Xm09oC/ggfZJzjREtQMUQzuY446fY6daXMx3Dh1jDWjwyuH\nsgWVwAjOXHZnCmBWTRQP95rd+vQCABzH6UIV4mKGcsCvjNdb+zqGitpjzYL6\nFCm5uyZxlnid7JotG1Uv//EyNFc9aHP3x4ghVOO7GK29HNRIL2pnm8Z/URUt\n1eXxxI8uYoIfUyUwnIpEUf85Vj/sHPe1aN4P7PsLp14FyT/jSKqAro5Z8AHJ\n28xISy8OFSyJS5QC0lSA6E8b/LINVd0X9V4MCiN4uLu4Yg98DvJu4xof3Ieo\nILTw8PFvsGhO/JhA3LNLAwtn88tUkfaFDfrQ2TZ9AGzapqsN61y/MsWd7/mN\n5WUIPIjeqy4E0V7rlZTP6aZLrnWEfmJDZbyNtADV0A9wZS71YNzkv7A9krCK\n/O8NX40uNzw6kyv8H/JRjgCqlN+m6Bc5YwYjcrZ4VCjTkUh4SE+GYYWQkDY9\ncNX7wzODrHpm2acIdfD4MBONwL8Bi+3SEFDzovvbTTgPUlAuCFE+LmFWifU4\n4rT4\r\n=LAuT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRWNm2mnmi2Kez6xaMdW9cIIZvGJ+siG34JYudmDNnhAIgalSATgZplrNHjXBOd6WHVtKXC9wBqKU6jpZPJGIhWRo="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.4.0-1_1551796379833_0.5931003202342502"},"_hasShrinkwrap":false},"1.4.0":{"name":"animate-css-grid","version":"1.4.0","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"types":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","npm-run-all":"^4.1.5","tslint":"^5.12.0","typescript":"^3.2.2","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","lodash.throttle":"^4.1.1","popmotion":"^8.5.5"},"gitHead":"ecb79426836c180d69080ac072961d86b6f2a10f","_id":"animate-css-grid@1.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.14.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-SpElyK13fb03zm0MPjDoxl0iWjicQsO53Tf9ByzOXNsdkGI7ZSlyEcHc4WVkdb5NbgdCFk4g6x+AVIGKlQNjsw==","shasum":"c0372e83f6136e9a3d42824f5cdf95faa0bcedd3","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.4.0.tgz","fileCount":12,"unpackedSize":6428449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfxGsCRA9TVsSAnZWagAA038P/0TaHuVuwUNxSKW7a/bs\n46HUL7kk4Ws4QDz1UT5jH0UtY8hyPz+cfq7utAVesFShODHOMCM1UBlBinFy\nKx5JOzBOWhqze3wjsIEYwTrslJg7Ml5qGJZzI3Ltlv4W0uF3NNSnOKce+Odk\ncyepivpnmK1ezeQVuoyrPEWfWphMOSyExaPjXs8bdHBofa/JJ4sdXjp1R1u4\nTXHgywnoiTbSo2EdOP+ahPi2MSWQ4/BFShovxuLWLcLkeaYpj1Ks2odjYjG+\nAGdHuYgZdsdYdKIv6Q6FKYbRal16SvSwAKlenMviumSPwdj8Bi6djxe2+srM\nR2GAOMTI+GyahA5Me/NDs7dwQpJ8FwAmjYlXrK58iMw7L37dtsCO2+qRJ/kN\n9NPXopUKQifxYu0Vzef+A/co8qZF1m4zx74G5RXadauL3oDajQLCCSk1G9jw\nJS8QX3CZJQ2/eY32g4RPE4/joU5OrNy/kOCS4TSFV4GbheCtJXo4tcC2KhPs\nI24bVM2lo2n4SQDoi/939Gc3rSIUScdyqSfjjqK0a+M+P+SwZSI4a0+KWhrQ\nllCQ3IN262jQTIJW3r9V+FIfFGuswjX+rAFRmCOBG2ButVQJw2caddeKZgOY\ngW1psVqiuSwjpEEawevvl7lBU/CwUQRImwNqhjdAt1Rnd3PxkfFNg+5hS0Od\n7jYS\r\n=4SaR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGH+arLCl/696LEDTuvcpmmqwdXnK2rj0dqiv0po4lWeAiEAi+6oColhAF7GDLCx2WuvTAGVynUPoDnWc+X266pZE+s="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.4.0_1551831466941_0.39026694353878555"},"_hasShrinkwrap":false},"1.4.1":{"name":"animate-css-grid","version":"1.4.1","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"types":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.2.3","@babel/preset-typescript":"^7.1.0","babel-loader":"^8.0.4","npm-run-all":"^4.1.5","tslint":"^5.12.0","typescript":"^3.2.2","webpack":"^4.28.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"dependencies":{"@popmotion/easing":"^1.0.1","lodash.throttle":"^4.1.1","popmotion":"^8.5.5"},"gitHead":"0db1b173e83790615c30001aea51eca6bb7ebb0e","_id":"animate-css-grid@1.4.1","_npmVersion":"6.4.1","_nodeVersion":"10.14.0","_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"dist":{"integrity":"sha512-2ZZqtqeWeUgD1p/PLawRsq/tscIjDS5Tjm8ZWW4icvsD+Griwg0ERJuTyz8YGRvCFj6EfnIFURQnkzbxyDqC/g==","shasum":"84ad772227abab7e4a3656a87395f917784c278a","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.4.1.tgz","fileCount":12,"unpackedSize":6428704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdH3sQCRA9TVsSAnZWagAAvt0P/09VSrpTiez4QfU7Vmsy\nJLzmdBragtZLEB4vvG0YN57A1hRmL7Tj7H+pwkiw+8T0FqmvBHvfjFBbvEAB\nGY2jhZpoO6FNgxtmuXZBbgZ8wFROIcz69kA11aNULxScF0wBdiWz+Y7CydUt\nO4/yb4eUK8y6K8jqbgiLYf/0dIFjwFc0gb68U8+Ivb0/z8riCK504EkCZV3L\n25BYLdMGuKbNtoh2sI/QacBK/JxQv8YPGSxcnhsQFCGkFdISnFMAi19wSD5w\nIkWJH+mUaNHastzuCMSsP5ULZGMzT80hrlPhIruU6GrF6Qm0bAo7I2rXfGXd\nGeh3GpVXsTPycNCMlCBMPnoUuUu519T+InA3CA7ncuLm3FgBgoxOczu5hTyo\nXuuahlgAbmXOxILLcSldOgddisufgSUdf4rXLo0S7AbHnLrMzXBJLY1Cn23s\nQGeT4H94QceO3FSUFacsPWul9uH3dxuV24cSXklVse+NdqGz3gS5uIbURV1q\npB0VspsnTaEFPkQH769+4Tl0UUFw5GaI825eXIpRtTtzNZPrqFnae85NqnLI\nUW/74XafLes4sBWWl73Ay1hq/F0fRo/G5Ki9nIxu1yYnYXwswBpckli/0Hgd\nMuQPatTc2SiSmrQ2tIkoA7acs7tWt3YYQjtmLd1EFF+0n+dLGi/UPjjsTP3F\nRZfw\r\n=IPHl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2yLHlmNo9372sjH1e/wlrxFkA0SKTadLoBemHTTjFRAiEA9BkBB1dvMxEA/+SKEqlb/BVS6UwRML6s98Mc8mWnYBY="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.4.1_1562344207681_0.044204704718384225"},"_hasShrinkwrap":false},"1.4.3":{"name":"animate-css-grid","version":"1.4.3","description":"Easy, smooth transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"types":"dist/index.d.ts","main":"dist/main.js","sideEffects":false,"scripts":{"prepublishOnly":"yarn run build","build":"webpack --mode production","dev":"webpack-dev-server --mode development --config demo/webpack.config.js","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@babel/core":"^7.7.5","@babel/preset-env":"^7.7.6","@babel/preset-typescript":"^7.7.4","babel-loader":"^8.0.6","npm-run-all":"^4.1.5","tslint":"^5.20.1","typescript":"^3.7.3","webpack":"^4.41.2","webpack-cli":"^3.3.10","webpack-dev-server":"^3.9.0"},"dependencies":{"@popmotion/easing":"^1.0.2","lodash.throttle":"^4.1.1","popmotion":"^8.5.5"},"gitHead":"8e87b3b3b6fad7353522c60ebe3ec25ac85d3ea9","_id":"animate-css-grid@1.4.3","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-Yq/5cxm7amQALKCB4/SFJzNQFhLfgJE+lGoy8F131a2uuSF4K4/yCmOYr9jZi1J4KQqAbnilurnBRXkYbOXqvQ==","shasum":"414cad20c3511538a4d488ab7ac9aa0198d9ebbe","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.4.3.tgz","fileCount":11,"unpackedSize":6283228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8vyrCRA9TVsSAnZWagAAUVMP/391b8QR4fe9rPRZIweG\n0iti3a0MMbheo4ICk3C5olu03sgvlXxW1acVin7LyT5i3x4V3wbVQ2/Dy6xZ\nYenn9FYPvYN8bF5jUXIK/if9Png/XuDkb3XRC4XfApqXf56EM0pKbtcAo19S\nQX5Jh+AEiuQgm3DfUtIdoF2WpbIlyptU2w6BYBwVUS+VkndSdJjUXsOYqQVn\nSzzslSz8rCqE+NMHXaultIJZ4dDPTf8ldlH+GW6tjSwJuNYLbAj2U1JDoKC4\nVoGIgl8tgta8unr9TC2ntviDsr+zAeadB9lNE4WzOmKdrR378cTnr0klxE2T\n5oUX9FwegTydJv/MnQY+LCSQWWpPgFTxyGZOYznj5e7Q1TqwWm7dA7z23OaM\nB/FTgynaX0H0VV+h+wa9zEsmiROlHdJfbOKX7s9RlRb+UpMo3hHDm9b2J2q2\nRhuowQYOUIE6v3TAkT7YlmCSvHFRcSNkd3m9wn4spo2rACF2bsvm6KknAZlK\nnWgDUqcZQZj8dmokStz4lBBAeiApYAeMkrX1hyPtuIDBgsJcXMsVOX3vIIeL\n3aw4eg+bhmfvqkrZOybQ9ax4A5crEz9hoSWyGz3jcYPYzqvR/WuJ6xsbjo/n\nAok1bLqtaCde822uINro94gxr6cKyRO5qRgeuythUnqbss3BbhQgzQpOziBz\nThLJ\r\n=0O27\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsI5LrzI57c7xaHFAaMZfWgNICJj0Z+ooRqhZFzLSTLAIgX44tjOOR1JgNCXrPqfMSCqGQ3RvrbyCUnvA8ie9RK04="}]},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.4.3_1576205483156_0.7417541283579738"},"_hasShrinkwrap":false},"1.5.0":{"name":"animate-css-grid","version":"1.5.0","source":"src/index.ts","main":"dist/main.js","module":"dist/main.module.js","types":"dist/index.d.ts","description":"Buttery smooth, easy transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"sideEffects":false,"scripts":{"watch":"parcel serve ./demo","build":"parcel build ./src/index.ts","prepublishOnly":"yarn run build","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@parcel/packager-ts":"2.8.3","@parcel/transformer-typescript-types":"^2.8.3","@typescript-eslint/eslint-plugin":"^5.54.0","@typescript-eslint/parser":"^5.54.0","eslint":"^8.35.0","parcel":"^2.8.3","typescript":"4.9.5"},"dependencies":{"@popmotion/easing":"^1.0.2","@types/lodash.throttle":"^4.1.7","framesync":"^6.1.2","lodash.throttle":"^4.1.1","popmotion":"^8.7.6"},"gitHead":"00223e71946ccacf37f163280fb1bfc1d58f27f7","_id":"animate-css-grid@1.5.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-NXUQVAiyELPF9E/zbXCPul2SIzNX7JdLHCC2RQ59cpjWqZ85YvlfJlern06XCKLsuqYOYNx8+/Od7dJCFtKDGQ==","shasum":"4e832ac03c50def07183f8fffaa02a40a5a57097","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.5.0.tgz","fileCount":9,"unpackedSize":76426,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTlaUb6kDmvCsx9PmhWLyZFnKg7yDdM1XSrEXTuKE77QIhAPJgbKHm9qVHf3PY8JAPD7ivc4aaUQz+3SlJlhbfneSp"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAMGqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJQRAAhHAAdCH11v13G/rtFXoIwaCclHLvlOjuhZtuJFV5eI7xLT5n\r\nvhCW0iowGam5HvzaiYKh/hi/bf/VBk3ojV3Fj8nrIdCF3igfMGfhOUDxKals\r\nvI+HaLLMXvaese8o182eB7+ojHXEvxiFQCriP/EI7I3xsNSExop1vOuUej+1\r\nB6RAsbnxSMR73CN6tA+RI+C+ArCsI5n8Hslj/YmYARYkKBbzW+wc1VExIB3S\r\nxz9MKqWmWHEhe7Sl4YNL5ndln2GUj0UGbAtSVs6c7d6kH0/u4zFfARwprb5A\r\n25idEw/IJ0N5Cdh/dZgitJAyQPFI+UlHLfEyiYvRu1OREfqRXMMLsXT0FZ+p\r\nsajuza4W4KScxzeJY65lYPx755ogAC2Hpz7nl/XX1ol1e6XjhhLwomQICA6f\r\ne6hElWPSmJMNOhGsb71l+PpaMn39u7rM+jNPC/MgX9+YfOuoVQAf5Gk/P0W8\r\nAsqA/DUOArJKIL6n3SdVWgCYSwWDuamRALXfV2wEjeFQzgAIJNOLW/+2aXDX\r\nX2LSLmaO1X2mdEERFkwPrYgGM2gqq+L3Vhqd3NZj5Ob0Hmoi7ShdjOo1GocQ\r\nNWaPMnJyFgGQwKd/3NuISr2TqfW1xaLObiWp/sdzYQ0oBl4mzMCMQ5OUArOB\r\nE3hRnVsKpx/bKNUsUG9f7CqhZIjhzUUpjCw=\r\n=l54w\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"directories":{},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.5.0_1677771177850_0.02828138068870767"},"_hasShrinkwrap":false},"1.5.1":{"name":"animate-css-grid","version":"1.5.1","source":"src/index.ts","main":"dist/main.js","module":"dist/main.module.js","types":"dist/index.d.ts","description":"Buttery smooth, easy transitions for CSS grid","homepage":"https://github.com/aholachek/animate-css-grid","keywords":["css","grid","animation","transition","mutation-observer","layout"],"sideEffects":false,"scripts":{"watch":"parcel serve ./demo","build":"parcel build ./src/index.ts","prepublishOnly":"yarn run build","check-types":"tsc","preversion":"npm run check-types"},"author":{"name":"Alex Holachek"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"devDependencies":{"@parcel/packager-ts":"2.8.3","@parcel/transformer-typescript-types":"^2.8.3","@typescript-eslint/eslint-plugin":"^5.54.0","@typescript-eslint/parser":"^5.54.0","eslint":"^8.35.0","parcel":"^2.8.3","typescript":"4.9.5"},"dependencies":{"@popmotion/easing":"^1.0.2","@types/lodash.throttle":"^4.1.7","framesync":"^6.1.2","lodash.throttle":"^4.1.1","popmotion":"^8.7.6"},"gitHead":"ebd7b6a7595692e9807c5c0577c5d211d3f023cd","_id":"animate-css-grid@1.5.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-Bw48dm3kjJshSO8TY6PtWJ7gvXluh2ad97zPiNu1jTRyRywAzsbKlwG45byL9cJ/x9N126rkU5U9y1jzHK8ttQ==","shasum":"20d68945e8c94ea8b20ed5a83a220367cbc2c9d3","tarball":"https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.5.1.tgz","fileCount":10,"unpackedSize":77204,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtjOHeldiY8IVM5LX8cMCJe3CuEjxPeEl2PSTG0/a7XAiEAoVk5IPR0EA0l1YK7TzhHH7ti9j8AdUuppJB7p1UAGCA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAMqJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXfw/+OqhCyI/+EG4kvyZSlnFxp5P5gpEwzVhjJTXzxeJTbvdXp+B4\r\nb/0QxAEv1uAKf4aPUBZ6avIEGSmXdypFmY3pUcG8/fBhn5ZNrg5+mGBDGmwe\r\n0elZDTmyBrRdr23g6/UHopZNhb0m+BGmqndXA+Gkys0l8bXj73QyvqNbK2CX\r\n3JyRSm/KpAY7pzqcDjipmangzS6uYRXqu+bsNzGsO1hZkhZFMgoDYY7j35Rm\r\n0z7cmMkD4WybR/KpLn5jgGm4F64e9uobI6mh3qos+ZmyfIVTbJIZbq7F/0Pm\r\nuFlFUbjS86ArhBdo+H3d/HNTJEbgxn4W5/Un0h2olMgcNypVErX2snmRvpoT\r\n0IXqYC8kmmrkRzn2nYl2GTRU2n6QZT+UBNZ+iIfWbcMD8wbjj2Qw+RxJvlWv\r\nGX7Lyu47XfDbWf7OsbaySWMsMyqEqF1sP8YVPhTGfEy9ZMA1L39J3iRA0vGy\r\njmcbkCrJ5jNG6sRKHhfJ34onGRMLyz/Hh59HjoNpWm78PL8bxWlgZ8G4uVoV\r\nYxCzzocJaPW8p/exqs6e2AHBXvvGF5ypC55r9zR5ICBE9XL0ib88UVF56TiI\r\nDE6WoCbpvlYmzUwGi9T9FpTg7kFpyvgP1Rc0NbKWk/L9Tqpv6Rckk9FDjVEi\r\nEOyfMdW9e5wkMadgCOwOKRyhuJLFPk7QCec=\r\n=mZfD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aholachek","email":"aholachek@gmail.com"},"directories":{},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animate-css-grid_1.5.1_1677773449128_0.2180295659175704"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-16T02:33:30.846Z","0.0.1":"2018-03-16T02:33:30.918Z","modified":"2023-03-02T16:10:49.457Z","0.1.0":"2018-03-16T11:39:20.397Z","0.2.0":"2018-03-17T14:37:00.170Z","0.2.1":"2018-03-17T18:23:21.347Z","0.2.2":"2018-03-17T18:45:23.117Z","0.2.3":"2018-03-17T20:24:51.865Z","0.2.4":"2018-03-18T01:56:52.126Z","0.2.5":"2018-03-18T16:27:07.537Z","0.2.6":"2018-03-18T20:51:51.688Z","0.2.7":"2018-03-20T03:32:13.495Z","0.2.8":"2018-03-20T04:32:43.471Z","0.2.9":"2018-03-20T04:35:42.716Z","0.2.10":"2018-03-20T04:51:53.140Z","0.2.11":"2018-03-20T05:10:07.636Z","0.3.0":"2018-03-21T16:09:22.646Z","0.4.0":"2018-03-21T22:39:08.664Z","0.4.1":"2018-03-21T22:43:34.202Z","0.4.2":"2018-03-23T02:49:30.098Z","0.4.3":"2018-03-23T11:50:02.376Z","0.4.4":"2018-03-26T13:46:53.767Z","0.4.5":"2018-04-20T00:42:28.710Z","0.4.6":"2018-04-25T23:49:40.760Z","1.0.0":"2018-05-31T11:18:17.045Z","1.0.1":"2018-05-31T12:02:23.011Z","1.0.2":"2018-06-01T14:34:58.064Z","1.0.3":"2018-06-23T01:31:51.438Z","1.0.4":"2018-06-23T01:44:34.068Z","1.1.0-beta0":"2018-12-26T17:39:54.803Z","1.1.0":"2018-12-26T20:14:29.897Z","1.2.0-0":"2018-12-27T02:37:52.060Z","1.2.0":"2018-12-27T02:50:27.355Z","1.2.2-0":"2019-01-03T14:21:01.527Z","1.2.1":"2019-01-03T14:28:27.826Z","1.3.0":"2019-02-11T01:55:53.808Z","1.4.0-0":"2019-03-05T14:21:43.648Z","1.4.0-1":"2019-03-05T14:33:00.190Z","1.4.0":"2019-03-06T00:17:47.331Z","1.4.1":"2019-07-05T16:30:07.999Z","1.4.3":"2019-12-13T02:51:23.530Z","1.5.0":"2023-03-02T15:32:58.081Z","1.5.1":"2023-03-02T16:10:49.357Z"},"maintainers":[{"name":"aholachek","email":"aholachek@gmail.com"}],"description":"Buttery smooth, easy transitions for CSS grid","license":"MIT","readme":"# Animate CSS Grid\n\nPerformantly animate all CSS grid properties, including:\n\n### `grid-column` and `grid-row`\n\n\n\n\n\n\n### `grid-template-columns`\n\n\n\n\n\n### `grid-gap`\n\n\n\n\n\n\n#### [Fork Photo Grid Example on CodeSandbox](https://codesandbox.io/s/animate-css-grid-template-t6qsf)\n\n\n### Why use animate-css-grid?\n\nThis library uses transforms to transition between different layout states, which means, in comparison to pure [CSS grid animations](https://web.dev/css-animated-grid-layouts/), it offers:\n\n- better performance \n- more flexibility in terms of what properties can be animated\n- more configurable animations (easing options, staggers)\n\nWant to have a look for yourself? Feel free to check out [this Mondrian animated with CSS keyframes](https://codepen.io/aholachek/pen/poOeXBM) and compare it with [the same UI animated with animate-css-grid.](https://codepen.io/aholachek/pen/XWPMwEx)\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from 'animate-css-grid'\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut',\n // function: called with list of elements about to animate\n onStart: (animatingElementList)=> {},\n // function: called with list of elements that just finished animating\n // cancelled animations will not trigger onEnd\n onEnd: (animatingElementList)=> {}\n}\n```\n\nAvailable easing functions:\n\n- `'linear'`\n- `'easeIn'` / `'easeOut'` / `'easeInOut'`\n- `'circIn'` / `'circOut'` / `'circInOut'`\n- `'backIn'` / `'backOut'` / `'backInOut'`\n- `'anticipate'`\n\n[Learn more about available easing functions here.](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n
\n\n\n\n### `grid-template-columns`\n\n\n\n\n\n### `grid-gap`\n\n\n\n\n\n\n#### [Fork Photo Grid Example on CodeSandbox](https://codesandbox.io/s/animate-css-grid-template-t6qsf)\n\n\n### Why use animate-css-grid?\n\nThis library uses transforms to transition between different layout states, which means, in comparison to pure [CSS grid animations](https://web.dev/css-animated-grid-layouts/), it offers:\n\n- better performance \n- more flexibility in terms of what properties can be animated\n- more configurable animations (easing options, staggers)\n\nWant to have a look for yourself? Feel free to check out [this Mondrian animated with CSS keyframes](https://codepen.io/aholachek/pen/poOeXBM) and compare it with [the same UI animated with animate-css-grid.](https://codepen.io/aholachek/pen/XWPMwEx)\n\n## How to use it\n\nJust call the `wrapGrid` method on your grid container, and optionally provide a config object as a second argument.\nIf the grid is removed from the page, the animations will automatically be cleaned up as well.\n\n\n`yarn add animate-css-grid` or `npm install animate-css-grid`\n\n```js\nimport { wrapGrid } from 'animate-css-grid'\n\nconst grid = document.querySelector(\".grid\");\nwrapGrid(grid);\n```\n\nOr from a script tag:\n\n```html\n\n\n\n```\n\nOptional config object:\n\n```js\n{\n // int: default is 0 ms\n stagger: 100,\n // int: default is 250 ms\n duration: 500\n // string: default is 'easeInOut'\n easing: 'backInOut',\n // function: called with list of elements about to animate\n onStart: (animatingElementList)=> {},\n // function: called with list of elements that just finished animating\n // cancelled animations will not trigger onEnd\n onEnd: (animatingElementList)=> {}\n}\n```\n\nAvailable easing functions:\n\n- `'linear'`\n- `'easeIn'` / `'easeOut'` / `'easeInOut'`\n- `'circIn'` / `'circOut'` / `'circInOut'`\n- `'backIn'` / `'backOut'` / `'backInOut'`\n- `'anticipate'`\n\n[Learn more about available easing functions here.](https://popmotion.io/api/easing/)\n\nTwo functions are returned by the `wrapGrid` call that you probably won't need to use:\n\n```js\nimport { wrapGrid } from animateCSSGrid\n\nconst grid = document.querySelector(\".grid\");\nconst { unwrapGrid, forceGridAnimation } = wrapGrid(grid);\n\n// if you want the grid to transition after updating an inline style\n// you need to call forceGridAnimation\ngrid.style.width = '500px'\nforceGridAnimation()\n\n// if you want to remove animations but not the grid itself\nunwrapGrid()\n```\n\n## Requirements\n\n1. 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()`)\n2. **Important** If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.\n\nExample:\n\n```html\n\n- \n
\n```\n\n## How it works\n\nThe script registers a `MutationObserver` that activates when the grid or one of its children adds or loses a class or element. That means there's no need to remove the animations before removing the grid, everything should be cleaned up automatically.\nIt 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.\n\nIt should work on container elements without CSS grid applied as well, but was developed and tested with CSS grid in mind.\n\n## Usage with Frameworks\n\nThe `animate-css-grid` library can easily be used with frameworks like React or Vue.\n\nCheck out the [React example](https://codepen.io/aholachek/pen/mxwvmV) or the [Vue example](https://codepen.io/sustained/pen/Rwbdgob) on Codepen!\n","readmeFilename":"README.md","homepage":"https://github.com/aholachek/animate-css-grid","repository":{"type":"git","url":"git+https://github.com/aholachek/animate-css-grid.git"},"bugs":{"url":"https://github.com/aholachek/animate-css-grid/issues"},"keywords":["css","grid","animation","transition","mutation-observer","layout"],"author":{"name":"Alex Holachek"}}