{"_id":"css-driven","_rev":"32-6f1f3c648c2d73b23e6cabda05504a68","name":"css-driven","description":"CSS Driven Transitions and Animations Library","dist-tags":{"latest":"0.2.1"},"versions":{"0.0.1":{"name":"css-driven","version":"0.0.1","description":"CSS Driven Transitions and Animations Library","main":"dist/css-driven.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"_id":"css-driven@0.0.1","dist":{"shasum":"9dc2a95ae6108e84ff2b18a27669c4ffe32def87","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.0.1.tgz","integrity":"sha512-WMx3o95bRGK2qu1+qbs0mozXm79TFCOeTLG0R6Z9CxcsHkpePAgYANw8dAzszgNHnCMSwIhNjwtHUgC19GKTxA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkw5qi3M/WG1bWneSIFG+IaToIzhTJL3BOqPRScAdS9QIhAPHRz9Ous9Mo4Dj53/NoMXJfWo39wVfc3NMZ3x1hySrL"}]},"_from":".","_npmVersion":"1.3.8","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"}]},"0.0.2":{"name":"css-driven","version":"0.0.2","description":"CSS Driven Transitions and Animations Library","main":"src/main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"_id":"css-driven@0.0.2","dist":{"shasum":"95f408978e5459beb55265156ddbfe90c4856a65","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.0.2.tgz","integrity":"sha512-uU59KP+Qi4f0Ux05rPe2lSsaOvOA/zbUivy70aVyxlb54h+hnZPLacGXRpCWFu1Mvv23MA1Y4alH1+MTk4ET4Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvfZ8dhNMQ/h1LXbRVOOf/E7GxO4cQLjmxNnZd7WugsQIhAMfCm59QRE14Oo1oJJKFqqxZDYxyXYDUR70+vb968+3e"}]},"_from":".","_npmVersion":"1.3.8","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"}]},"0.0.3":{"name":"css-driven","version":"0.0.3","description":"CSS Driven Transitions and Animations Library","main":"src/main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"_id":"css-driven@0.0.3","dist":{"shasum":"9aa06e051bf8a6be30f03b80bc58b7e3f4b0ac79","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.0.3.tgz","integrity":"sha512-e8UDpZi9EKo/6eibSO2AYYzMrmuzSmpLtV8fuRkRs+JK5g+SOmZebjYGezZKUogpWT2/2ISJjO6QLHHAy3D9UQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCi/DPM8PFV/PzCrnL2Jlnr+Gm/rCrMduaGcPnztvWNowIhAPHuuH+ApGzLgNk+wavNib8bS6drJDhVbsvlX2O+bxgb"}]},"_from":".","_npmVersion":"1.3.8","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"}]},"0.0.4":{"name":"css-driven","version":"0.0.4","description":"CSS Driven Transitions and Animations Library","main":"src/main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"_id":"css-driven@0.0.4","dist":{"shasum":"ca5537bfb65185ad3524ca9dddbc3eb1d7713039","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.0.4.tgz","integrity":"sha512-54pXENesseSsQFpKEHinNaFAkJd4CEGTi0L9ugqL1Ds2fHPhpQPRP8KZwLlPQBU2DehHTC5OfuW4sfmmgSz3AQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkls2ZMvGojxHzPfvkwXw7eyh4hhj7WVMZfwnolFI7EAiEAn59ZQ4nwuijSCXpmB4Mghwj5a9Lmem6urzyFYMUbnNM="}]},"_from":".","_npmVersion":"1.3.8","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"}]},"0.0.5":{"name":"css-driven","version":"0.0.5","description":"CSS Driven Transitions and Animations Library","main":"src/main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"_id":"css-driven@0.0.5","dist":{"shasum":"0d075f2b00c170146d9f1351f705f2a298632c70","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.0.5.tgz","integrity":"sha512-AfLtKRG5kJGtXivlXPlKkrJPEzA6UBmtbvnyhhgkAjIyAyU414A5/eo8lXEBz5OCBogg4CHFPHyv0h59tR2Pgg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4LDvgmuUegQ0tSGKnsXDRLNOzwmAKnDB6Gf5wwFbi3AiBrLG/1hPbApmJfQiQIEElseDX5MiueyiLsNZKNrXxMoA=="}]},"_from":".","_npmVersion":"1.3.8","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"}]},"0.0.6":{"name":"css-driven","version":"0.0.6","description":"CSS Driven Transitions and Animations Library","main":"src/main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","homepage":"https://github.com/weareoffsider/css-driven","keywords":["css","animation","browser"],"repository":{"type":"git","url":"https://github.com/weareoffsider/css-driven.git"},"bugs":{"url":"https://github.com/weareoffsider/css-driven/issues"},"devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"gitHead":"eeab80eaec8071c22c15aedf15d9ab47882a3031","_id":"css-driven@0.0.6","_shasum":"0901d9a576ad995a647ca07162d3dc73839b7e6f","_from":".","_npmVersion":"2.1.9","_nodeVersion":"0.10.16","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},{"name":"weekends","email":"hello@weekends.ws"}],"dist":{"shasum":"0901d9a576ad995a647ca07162d3dc73839b7e6f","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.0.6.tgz","integrity":"sha512-U+M3deHdQ8s6PSzbGpHJydLAVBf4Bq0zP+NyL3KxQtbWZ6ud6MjGg+UP298uSzQv21xpVkbBpKiM8YZpRKzTVg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqAZwXpAQCfQNHwqBPCGQ/8UF0HWcIZM61JkTgeTERnAiBNylxx7XerDDyc+agkYG0qgGtUKWTVrGjyK/5jgU+Q8Q=="}]}},"0.1.0":{"name":"css-driven","version":"0.1.0","description":"CSS Driven Transitions and Animations Library","main":"src/main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","homepage":"https://github.com/weareoffsider/css-driven","keywords":["css","animation","browser"],"repository":{"type":"git","url":"git+https://github.com/weareoffsider/css-driven.git"},"bugs":{"url":"https://github.com/weareoffsider/css-driven/issues"},"devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"gitHead":"6e6674f72cc1f9f1a0833291fbb496b94a312763","_id":"css-driven@0.1.0","_shasum":"375a9f48f0be6162b9e4b725ee0f726844ac25fa","_from":".","_npmVersion":"2.14.7","_nodeVersion":"4.2.1","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},{"name":"weekends","email":"hello@weekends.ws"}],"dist":{"shasum":"375a9f48f0be6162b9e4b725ee0f726844ac25fa","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.1.0.tgz","integrity":"sha512-Jfx5QB1cHlfRa8gF85nxPLTEObb6nFpmFwT2mLllBAK9k+WcJaQ0UepBAAUOeLyGJiEUkeJ633ol0VG2qd3X3Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFogGEFGvAjCvcgtweeGhwk3CO9DBq224SmJ0Kzxxd9AiBeo/rd7yrPt+Ww/aUakAZaZT9zqmjHXZujMGehdzuk3g=="}]}},"0.1.1":{"name":"css-driven","version":"0.1.1","description":"CSS Driven Transitions and Animations Library","main":"src/main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","homepage":"https://github.com/weareoffsider/css-driven","keywords":["css","animation","browser"],"repository":{"type":"git","url":"git+https://github.com/weareoffsider/css-driven.git"},"bugs":{"url":"https://github.com/weareoffsider/css-driven/issues"},"devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"gitHead":"452fd96fcebe5bf1162533ccf9365d6a89a89514","_id":"css-driven@0.1.1","_shasum":"3ce72f8dc0a9e47dc6a0d535bd2f86a32a2364e1","_from":".","_npmVersion":"3.3.12","_nodeVersion":"5.4.1","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},{"name":"weekends","email":"hello@weekends.ws"}],"dist":{"shasum":"3ce72f8dc0a9e47dc6a0d535bd2f86a32a2364e1","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.1.1.tgz","integrity":"sha512-9jAJjMUUfaKBzXFdLaVTTWiKIK4cUuIeIV9gpveZl6smzrNqo+JR9dIZowFu/IK5gqS2gDl2rEOg0+g1gFhQeQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3NMG/PHPfqj20ySDeHASkT5QhoNfi4l5wJSQNWh7PQgIhAMmuUIyiDnrh9uvEhXzghAK/49oNHSaQGLLJErrN7BVk"}]},"_npmOperationalInternal":{"host":"packages-6-west.internal.npmjs.com","tmp":"tmp/css-driven-0.1.1.tgz_1456192074754_0.29637008206918836"}},"0.2.0":{"name":"css-driven","version":"0.2.0","description":"CSS Driven Transitions and Animations Library","main":"src/main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","homepage":"https://github.com/weareoffsider/css-driven","keywords":["css","animation","browser"],"repository":{"type":"git","url":"git+https://github.com/weareoffsider/css-driven.git"},"bugs":{"url":"https://github.com/weareoffsider/css-driven/issues"},"devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"gitHead":"fba3d4bdb0afb178b75ad97529cbbd81653cd7f3","_id":"css-driven@0.2.0","_shasum":"6767373dcd5eae7b1fba10c38aca176659085d31","_from":".","_npmVersion":"3.9.3","_nodeVersion":"5.4.1","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},{"name":"weekends","email":"hello@weekends.ws"}],"dist":{"shasum":"6767373dcd5eae7b1fba10c38aca176659085d31","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.2.0.tgz","integrity":"sha512-+9eBjv4PDvoaInGaW7/Jobms02St4pSNjt+qsFOuEbNR7SK0tqdZOGtAiueVfehNhGm9HCNkbdu0vEBUaqFw8w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATLADYmxynFbvhFGXZ/OirxRgXGr8zSDgNgqJKUzEWhAiEAy9esnuf00jGJRHoGJRM2wzN+Y/3lDqOiV4LBhDZs8RA="}]},"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/css-driven-0.2.0.tgz_1470184079343_0.21180848684161901"}},"0.2.1":{"name":"css-driven","version":"0.2.1","description":"CSS Driven Transitions and Animations Library","main":"src/main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Offsider"},"license":"MIT","homepage":"https://github.com/weareoffsider/css-driven","keywords":["css","animation","browser"],"repository":{"type":"git","url":"git+https://github.com/weareoffsider/css-driven.git"},"bugs":{"url":"https://github.com/weareoffsider/css-driven/issues"},"devDependencies":{"gulp":"~3.8.10","gulp-less":"~1.3.6","gulp-rimraf":"~0.1.1","gulp-autoprefixer":"~1.0.1","gulp-jade":"~0.9.0","gulp-concat":"~2.4.1","gutil":"~1.5.5","toolkit-less-css":"~0.0.2","gulp-browserify":"~0.5.0","gulp-pixrem":"~0.1.1","gulp-util":"~3.0.1","gulp-rename":"~1.2.0","gulp-connect":"~2.2.0","gulp-uglifyjs":"~0.5.0","envify":"~3.2.0"},"gitHead":"a56f55f673909ba0e44964f83f21614a318d7c30","_id":"css-driven@0.2.1","_shasum":"435e6e493383c6d4ab1ee4c6df3b458accfe20b8","_from":".","_npmVersion":"3.9.3","_nodeVersion":"5.4.1","_npmUser":{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},"maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},{"name":"weekends","email":"hello@weekends.ws"}],"dist":{"shasum":"435e6e493383c6d4ab1ee4c6df3b458accfe20b8","tarball":"https://registry.npmjs.org/css-driven/-/css-driven-0.2.1.tgz","integrity":"sha512-TowFgESNXON9YkHGYSoOOhShBnug1HS5OfGuG1FrjgND+vBGV2ymdLUsbRRYnZhwK4wkahP7r7SGi+OME3OSSA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDExL1S5p71ci6xzTxHvPTQIX6iQT8H+IiHpXDI+YIoyAiA7CiYP6fLmYqFCJl4aL/rWWFDjIEArYAMp8XltMC+XyA=="}]},"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/css-driven-0.2.1.tgz_1483503374323_0.04483695630915463"}}},"readme":"# CSS Driven Animations\n_without the callback hell_\n\nCSS Driven is a small library for helping you drive CSS animations using\nJavascript and requestAnimationFrame. Getting your head around the timing can be\ntricky, especially if you want to set your timing in CSS rather than\nJavaScript. CSS Driven helps with that.\n\n## Install\n\n```\nnpm install css-driven\n```\n\nCSS Driven uses standard DOM methods, and does not rely on jQuery et al.\n\n## Usage Guide\n\nUse the method `CSSDriven.doTransition` to set a CSS based animation or\ntransition in motion. Consider this:\n\n```javascript\nvar modal = document.querySelector(\".modal\");\n\nCSSDriven.doTransition(modal, {\n  \"setup\": \"+is-animating\",   // add the class is-animating\n  \"trigger\": \"~is-hidden\",    // toggle the class is-hidden\n  \"end\": \"-is-animating\"      // remove the class is-animating\n});\n```\n\n```css\n.modal {\n  position: fixed;\n  top: 20%;\n  right: 20%;\n  bottom: 20%;\n  left: 20%;\n  border-radius: 20px;\n  background: linear-gradient(90deg, #d53369 33%, #cbad6d 67%);\n}\n\n.modal.is-animating {\n  transition: opacity 0.5s ease-out 0.2s, transform 1s ease-out;\n  display: block !important;\n}\n\n.modal.is-hidden {\n  display: none;\n  opacity: 0;\n  transform: scale(1.5) rotate(180deg);\n}\n```\n\nIn this example, we have a funky modal we want to animate in with some excessive\neffects. We want to make sure the animation is timed based on the transition\nthat will take the longest, in this case it's the transformation.\n\nOn calling doTransition, CSSDriven will:\n\n- Run the \"setup\" instruction - add the class `is-animating`\n- Measure all transition and animation durations + delays to find the longest\n  running transition, and use that time as our endpoint.\n- Run the \"trigger\" instruction on the next frame - toggling the class\n  `is-hidden`\n- Wait until 1000ms has passed, and then run the \"end\" instruction - removing\n  the class `is-animating`.\n\nUnder the hood, this sensitive timing is handled by a dispatcher using\nrequestAnimationFrame to get your timing down to the millisecond. In fact,\n\"setup\", \"end\" and \"trigger\" are just aliases for timing. You'd get the same\nresult with:\n\n```javascript\nCSSDriven.doTransition(modal, {\n  \"0\": \"+is-animating\",    // execute immediately (frame 0)\n  \"1\": \"~is-hidden\",       // execute at frame 1\n  \"100%\": \"-is-animating\"  // execute once 100% of the animation has passed\n});\n```\n\nThis interface gives you plenty of flexibility to base your Javascript execution\nupon the timing of CSS transitions and animations. You could use different\npercentages to tweak the CSS in flight, possibly a z-index if you're\ntransitioning into a page.\n\nIn a more complex example, lets imagine an accordion with a body:\n\n```javascript\nvar accordion = document.getElementById(\"accordion\");\nvar accordionToggle = document.getElementById(\"accordion-header\");\n\naccordionToggle.addEventListener(\"click\", function() {\n  if (accordion.classList.contains(\"is-animating\")) return false;\n  CSSDriven.doTransition(accordion, {\n    \"setup\": [function($el, state) {\n\n      // measuring desired accordion height and setting start point\n      var startHeight = $el.querySelector(\".accordion__body\").offsetHeight;\n      $el.classList.toggle(\"is-open\");\n      var targetHeight = $el.querySelector(\".accordion__body\").offsetHeight;\n      $el.classList.toggle(\"is-open\");\n      $el.querySelector(\".accordion__body\").style.height = startHeight + \"px\";\n      $el.querySelector(\".accordion__body\").offsetHeight;\n      return targetHeight; // returning the target height as state\n\n    }, \"+is-animating\"],\n    \"trigger\": function($el, state) {\n      $el.querySelector(\".accordion__body\").style.height = state + \"px\";\n    },\n    \"end\": [function($el, state) {\n      $el.querySelector(\".accordion__body\").style.height = null;\n      $el.classList.toggle(\"is-open\");\n    }, \"-is-animating\"]\n  }, {\n    \"timingElement\": accordion.querySelector(\".accordion__body\"),\n  });\n\n});\n```\n\nHere we're using the same timing, but instead of just flipping classes, we're\ntransitioning from auto to 0px. Those who've tried know that CSS alone can't do\nit, but here we're breaking it down into clear frame steps that let CSS step in\nwhen it needs to. The function also has the ability to pass state to future\nsteps, so you can make use of measurements you've made.\n\nBecause the transition doesn't actually occur on the accordion where we're\nchanging the classes, we've added an option at the end, `\"timingElement\"` lets\nus set a different element to measure the transition/animation timing on.\n\n## Browser Support\n\ncss-driven aims to technically support IE8+ - but perform best in modern\nbrowsers. Obviously browsers that do not support CSS transitions cannot transition\nso this is detected we fallback to run each of the steps in sequence which more\noften than not is more than acceptable.\n\n### IE8/9 required polyfills\nWe do use some more modern Javscript features so you will need to polyfill\nthe following for the css-driven to run in older browsers (IE8/9).\n\n- [Object.keys](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys#Polyfill)\n- [Array.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Polyfill)\n- [Element.classList](https://developer.mozilla.org/en/docs/Web/API/Element/classList#JavaScript_shim_for_other_implementations)\n- [Array.isArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray#Polyfill)\n- [console.log](https://github.com/paulmillr/console-polyfill) - only if you wish to use CSSDriven.debugMode() or CSSDriven.fallbackMode() debug inside IE8\n\n## Method Reference\n\n### doTransition(domElement, instructions, options)\n\nPerform a transition on the DOM element provided, based on the instructions.\nFrame 0 is triggered immediately and synchronously. All other steps are executed\nusing requestAnimationFrame to the appropriate frame or timestamp.\n\n#### options\n- **name**: name the animation, useful for debug mode\n- **timingElement**: set an alternative DOM element to use for measuring the\n  timing of the transition.\n- **fallback**: set a custom fallback function that will be called if\n  requestAnimationFrame is not found. By default CSSDriven will just run through\n  the steps immediately, but if you want to maybe provide a Javascript Driven\n  alternative this is a way to do it.\n\n\n### debugMode(boolean)\n_not available in minified version_\n\nSet the debug mode to be true or false. When in debug mode, transitions will log\nout to the console when handlers are triggered, along with their current state.\n\n### fallbackMode(boolean)\n_not available in minified version_\n\nSet the fallback mode to be true or false. When in fallback mode, CSS Driven\nwill always act as if requestAnimationFrame is not available, and run either\nyour fallback function, or all the steps in sequence synchronously. Useful so you\ncan write your doTransition fallback functions in modern browsers.\n\n\n## License\nCopyright (c) 2014 Offsider, used under The MIT License (MIT)\n","maintainers":[{"name":"malucomarinero","email":"james@fullandbydesign.com.au"},{"name":"weekends","email":"hello@weekends.ws"}],"time":{"modified":"2022-06-14T04:33:57.134Z","created":"2014-11-16T01:17:33.176Z","0.0.1":"2014-11-16T01:17:35.678Z","0.0.2":"2014-11-16T01:22:31.502Z","0.0.3":"2014-11-16T01:35:47.469Z","0.0.4":"2014-11-16T19:43:09.352Z","0.0.5":"2014-11-16T19:50:38.070Z","0.0.6":"2014-12-01T20:09:11.264Z","0.1.0":"2015-12-09T01:13:00.347Z","0.1.1":"2016-02-23T01:47:58.174Z","0.2.0":"2016-08-03T00:28:01.518Z","0.2.1":"2017-01-04T04:16:16.400Z"},"readmeFilename":"README.md","author":{"name":"Offsider"},"license":"MIT","users":{"jonnyscholes":true},"homepage":"https://github.com/weareoffsider/css-driven","keywords":["css","animation","browser"],"repository":{"type":"git","url":"git+https://github.com/weareoffsider/css-driven.git"},"bugs":{"url":"https://github.com/weareoffsider/css-driven/issues"}}