{"_id":"animation-bus","_rev":"5-6ec37593e2bfa0cb0f03474761db63a9","name":"animation-bus","description":"Define different animation stops relative to another value.","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"animation-bus","version":"0.1.0","description":"Define different animation stops relative to another value.","main":"lib/animation-bus.js","files":["dist","lib"],"scripts":{"build:lib":"babel src --out-dir lib","build":"npm run build:lib && NODE_ENV=production webpack --config webpack.prod.config.js","dev":"webpack-dev-server --devtool eval --hot --progress --colors --host 0.0.0.0","postbuild":"NODE_ENV=production TARGET=minify webpack --config webpack.prod.config.js","prebuild":"rm -rf dist && mkdir dist","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/souporserious/animation-bus.git"},"keywords":["animation","polylinear","scale","transform"],"author":{"name":"Travis Arnold","email":"travis@souporserious.com","url":"http://souporserious.com"},"license":"MIT","bugs":{"url":"https://github.com/souporserious/animation-bus/issues"},"homepage":"https://github.com/souporserious/animation-bus","dependencies":{"polylinear-scale":"^1.0.8"},"devDependencies":{"babel-cli":"^6.16.0","babel-core":"^6.17.0","babel-loader":"^6.2.5","babel-plugin-add-module-exports":"^0.2.1","babel-preset-es2015":"^6.16.0","babel-preset-react":"^6.16.0","babel-preset-stage-0":"^6.16.0","chokidar":"^1.6.1","css-loader":"^0.25.0","http-server":"^0.9.0","node-libs-browser":"^1.0.0","node-sass":"^3.2.0","postcss-loader":"^0.13.0","sass-loader":"^4.0.2","style-loader":"^0.13.1","webpack":"^1.13.2","webpack-dev-server":"^1.9.0"},"gitHead":"378d6dbf9162ff91135866f12216f52a2af98004","_id":"animation-bus@0.1.0","_shasum":"8ed4837841735dce1d02ee6f39e080261c570ba7","_from":".","_npmVersion":"3.10.8","_nodeVersion":"7.0.0","_npmUser":{"name":"souporserious","email":"travis@souporserious.com"},"dist":{"shasum":"8ed4837841735dce1d02ee6f39e080261c570ba7","tarball":"https://registry.npmjs.org/animation-bus/-/animation-bus-0.1.0.tgz","integrity":"sha512-WSzVRReQgqRq6P4DmjdTAVWWlJPwgx4d7AhP8SAA8OtykabjscZjh2EM0MXZCJMMzdYfX/EYeAx+ul6NIZKk2g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhfqdn+FBOsUaZvPu8dA1Inu9zoPKmQKQNG4Wj2QlvOAiEA3xDPj1JyMtFhFidPdAQCpkPyEh7lOFsYe3NBLQ897WI="}]},"maintainers":[{"name":"souporserious","email":"travis@souporserious.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/animation-bus-0.1.0.tgz_1479697536797_0.13394265482202172"}},"0.2.0":{"name":"animation-bus","version":"0.2.0","description":"Define different animation stops relative to another value.","main":"lib/animation-bus.js","files":["dist","lib"],"scripts":{"build:lib":"babel src --out-dir lib","build":"npm run build:lib && NODE_ENV=production webpack --config webpack.prod.config.js","dev":"webpack-dev-server --devtool eval --hot --progress --colors --host 0.0.0.0","postbuild":"NODE_ENV=production TARGET=minify webpack --config webpack.prod.config.js","prebuild":"rm -rf dist && mkdir dist","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/souporserious/animation-bus.git"},"keywords":["animation","polylinear","scale","transform"],"author":{"name":"Travis Arnold","email":"travis@souporserious.com","url":"http://souporserious.com"},"license":"MIT","bugs":{"url":"https://github.com/souporserious/animation-bus/issues"},"homepage":"https://github.com/souporserious/animation-bus","devDependencies":{"babel-cli":"^6.16.0","babel-core":"^6.17.0","babel-loader":"^6.2.5","babel-plugin-add-module-exports":"^0.2.1","babel-preset-es2015":"^6.16.0","babel-preset-react":"^6.16.0","babel-preset-stage-0":"^6.16.0","chokidar":"^1.6.1","css-loader":"^0.25.0","http-server":"^0.9.0","node-libs-browser":"^1.0.0","node-sass":"^3.2.0","postcss-loader":"^0.13.0","sass-loader":"^4.0.2","style-loader":"^0.13.1","webpack":"^1.13.2","webpack-dev-server":"^1.9.0"},"gitHead":"ae6940c9464a5fa52e67988b4fb7b458888a1111","_id":"animation-bus@0.2.0","_shasum":"43854c2c9463fb82c664eff0e19b9733081150fa","_from":".","_npmVersion":"3.10.8","_nodeVersion":"7.0.0","_npmUser":{"name":"souporserious","email":"travis@souporserious.com"},"dist":{"shasum":"43854c2c9463fb82c664eff0e19b9733081150fa","tarball":"https://registry.npmjs.org/animation-bus/-/animation-bus-0.2.0.tgz","integrity":"sha512-aGDpHLct7uMmqzet2DzB08M8Tgu6G//JZ0ee4hgj305PCD13rlAHOuYXi5oqQOkh4aV3mSVvdjGEBSEVwCgbng==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgJhU3F8IQSqzmdwJcwlOyAZhNVLrXXDK8y0a9bVu5/AiEA9L0lZvD6SDnMTGN+lRugp4EioTZuFzMQBdHU9wF062c="}]},"maintainers":[{"name":"souporserious","email":"travis@souporserious.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/animation-bus-0.2.0.tgz_1480314920456_0.7215158736798912"}}},"readme":"## Animation Bus 🚌\n\n[![npm version](https://badge.fury.io/js/animation-bus.svg)](https://badge.fury.io/js/animation-bus)\n\nDefine different animation stops relative to another value.\n\n## Install\n\n`yarn add animation-bus`\n\n`npm install animation-bus --save`\n\n```html\n<script src=\"https://unpkg.com/animation-bus/dist/animation-bus.js\"></script>\n(UMD library exposed as `AnimationBus`)\n```\n\n### Example\n\n```js\nimport AnimationBus from 'animation-bus'\n\nconst scrollElements = document.querySelectorAll('[data-scroll-bus]')\nconst windowFactor = 0.5\nconst elementFactor = 0.5\nlet isTicking = false\nlet scrollTop, scrollBottom\n\n// Define animation stops\nconst animations = [{\n  prop: 'backgroundColor',\n  stops: [\n    [-300, '#b4da55'],\n    [0, '#2ea8ff'],\n    [300, '#b4da55']\n  ]\n}, {\n  prop: 'scale',\n  stops: [\n    [-300, 0.25],\n    [0, 1],\n    [300, 0.25]\n  ]\n}, {\n  prop: 'opacity',\n  stops: [\n    [-300, 0],\n    [0, 1],\n    [300, 0]\n  ]\n}]\n\n// Define animation stops\nconst origin = (element) => {\n  const windowOffset = window.innerHeight * windowFactor\n  const elementOffset = element.offsetHeight * elementFactor\n  return scrollTop + windowOffset - elementOffset - element.offsetTop\n}\n\n// Instantiate a new animation bus\nconst animationBus = new AnimationBus({ animations, origin })\n\n// Listen for window scroll and apply transforms to elements\nfunction scrollHandler() {\n  for (let i = 0; i < scrollElements.length; i++) {\n    animationBus.applyStyles(scrollElements[i])\n  }\n  isTicking = false\n}\n\nwindow.addEventListener('scroll', function () {\n  scrollTop = pageYOffset\n  if (!isTicking) {\n    window.requestAnimationFrame(scrollHandler)\n  }\n  isTicking = true\n}, false);\n```\n\n## Thank You\n\nHuge thank you to [Darin Reid](https://github.com/elcontraption) and all of his work on [Flickity Transformer](https://github.com/elcontraption/flickity-transformer), as well as [this amazing gist](https://github.com/gpiffault) by [Grégoire Piffault](https://github.com/gpiffault). Most of the code in here is heavily inspired by what these developers have previously done.\n","maintainers":[{"email":"ftntravis@gmail.com","name":"souporserious"}],"time":{"modified":"2022-06-13T03:04:10.000Z","created":"2016-11-21T03:05:37.030Z","0.1.0":"2016-11-21T03:05:37.030Z","0.2.0":"2016-11-28T06:35:22.288Z"},"homepage":"https://github.com/souporserious/animation-bus","keywords":["animation","polylinear","scale","transform"],"repository":{"type":"git","url":"git+https://github.com/souporserious/animation-bus.git"},"author":{"name":"Travis Arnold","email":"travis@souporserious.com","url":"http://souporserious.com"},"bugs":{"url":"https://github.com/souporserious/animation-bus/issues"},"license":"MIT","readmeFilename":"README.md"}