{"_id":"material-motion","_rev":"3-ec17a408ef9912f7eec9aef56855caa2","name":"material-motion","dist-tags":{"latest":"0.1.1"},"versions":{"0.0.0":{"name":"material-motion","version":"0.0.0","description":"Makes it easy to add rich, interactive motion to your application.","main":"dist/index.js","types":"dist/index.d.ts","typescript:main":"src/index.ts","scripts":{"lint":"../../node_modules/.bin/tslint -c ../../tslint.json --project tsconfig.json --type-check","lint-ci":"yarn run lint --out $CIRCLE_TEST_REPORTS/tslint/core.xml --formatters-dir ../../node_modules/tslint-junit-formatter/formatters --format junit","build":"yarn run clean; ../../node_modules/.bin/tsc","clean":"rm -rf ./dist/*; mkdir -p ./dist/","test":"node ../../tools/test.js --only core"},"dependencies":{"deep-equal":"1.0.1","indefinite-observable":"1.0.2","symbol-observable":"1.2.0","tslib":"^1.2.0","wobble":"1.5"},"devDependencies":{"@types/deep-equal":"0.0.30","material-motion-testing-utils":"^0.0.0","mock-timeout":"^0.0.2"},"repository":{"type":"git","url":"git+ssh://git@github.com/material-motion/material-motion-js.git"},"resolutions":{"uws":"10.148.2"},"keywords":["animated","animation","direct manipulation","drag","gestures","interactive","material","motion","move","multitouch","observables","odeon","pointer events","physics","pinch","rotate","scale","springs","streams","stretch","touch","transitions","tween","tweens"],"author":{"name":"The Material Motion Authors","url":"see AUTHORS"},"license":"Apache-2.0","bugs":{"url":"https://github.com/material-motion/material-motion-js/issues"},"homepage":"https://github.com/material-motion/material-motion-js/tree/develop/packages/core#readme","_id":"material-motion@0.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.11.4","_npmUser":{"name":"appsforartists","email":"npm@appsforartists.com"},"dist":{"integrity":"sha512-Y/llotGnpmPBPLR6icRhR7qNMPb57nNzAcw87KcK0GDnyyjGC5HRAmnVRCw1uCjBKO7dnn6eZD3GYgVST0gB0w==","shasum":"8244de9acc510e2d5a0744d019f8137543e7ea9a","tarball":"https://registry.npmjs.org/material-motion/-/material-motion-0.0.0.tgz","fileCount":276,"unpackedSize":502553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/2vDCRA9TVsSAnZWagAAe1oQAIgP0iayKrc6xgRGB7c0\nK8MzQczk2Tq9CGnEnJlL8gUUOtN8/NZ/U6cixmtSfVcbdTXyqpOCLF+sCpmt\nM9XRwwhcio5UvAPY8OqJGHzr+oKboE00FCNZGHE8XIq/+3iXUlBmjV0BDJDO\nomB28div1x0sR5YGYjZN3hT4W9eiL9nD/OzIguSy8mcZnzRGQfzLfOG5SQaS\n3ZF7AICJblvJGt6kFTz3E8FgMjwQXf0ACMyFX41zrFtYKyuoLXOxI6EtG/5h\n8M7lH4Ce0XTy/eEPaZ3ThUq7BFhQWOtABkXaEBie1tPE75hGcEl5pASUYad/\nYixNZfeGhu5RwZgG8YU8qS/w2NIXdDIZ9LiVmJZqlMaiHJUMNexkgdPQThs3\nOiu1EafZSEjmbg9Ca66uH0V8/S8zmZ7F7rUR56kZN0zdplWZoGBmeI8Te9n4\ntAHZ67rUJwO9MOOmfxlXIWGdrteXHBqC6G/aqfZRcOq0xQ5OQqqmuXvX93/x\nHQBO2zt5/lWWa4brrJ7k2t4FAW5Xx3R82CYCfh/YMgCm0jNAwgZTvqGVUlFv\nBc/Uo+3lDdKWeOIU6xwb1kVgrRNkWzNoMC2OiV6gJO3qKS3/lSqBI+mzM7qN\nG/RnUKkat0qi/fB+AP95J9Hqfn2AsF27OoCcWBUEE0igyJgMVBQd8IGY2fCO\n6wuE\r\n=mMaM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDU+UVkAaHwfwbU5r80QA+UNkW4ncie+JmFz3zWOtl8EQIhAN49hS3hNKD1QSKmAsqzOyjgX5m8Fv+dhS3IIPRaMccJ"}]},"maintainers":[{"name":"appsforartists","email":"npm@appsforartists.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/material-motion_0.0.0_1543465922373_0.5097249731816678"},"_hasShrinkwrap":false},"0.1.0":{"name":"material-motion","version":"0.1.0","description":"Makes it easy to add rich, interactive motion to your application.","module":"dist/index.js","types":"dist/index.d.ts","unpkg":"dist/material-motion.bundle.js","typescript:main":"src/index.ts","scripts":{"lint":"../../node_modules/.bin/tslint -c ../../tslint.json --project tsconfig.json --type-check","lint-ci":"yarn run lint --out $CIRCLE_TEST_REPORTS/tslint/core.xml --formatters-dir ../../node_modules/tslint-junit-formatter/formatters --format junit","build":"yarn run clean; ../../node_modules/.bin/tsc; ../../node_modules/.bin/rollup --config ./rollup.config.js","clean":"rm -rf ./dist/*; mkdir -p ./dist/","test":"node ../../tools/test.js --only core"},"dependencies":{"csstype":"2.5.8","fast-equals":"1.6.1","indefinite-observable":"2.0.1","symbol-observable":"1.2.0","tslib":"^1.2.0","wobble":"1.5.1"},"devDependencies":{"material-motion-testing-utils":"^0.1.0"},"repository":{"type":"git","url":"git+ssh://git@github.com:material-motion/material-motion-js.git"},"keywords":["animated","animation","direct manipulation","drag","gestures","interactive","material","motion","move","multitouch","observables","odeon","pointer events","physics","pinch","rotate","scale","springs","streams","stretch","touch","transitions","tween","tweens"],"author":{"name":"The Material Motion Authors","url":"see AUTHORS"},"license":"Apache-2.0","bugs":{"url":"https://github.com/material-motion/material-motion-js/issues"},"homepage":"https://github.com/material-motion/material-motion-js/tree/develop/packages/core#readme","_id":"material-motion@0.1.0","dist":{"shasum":"e0c57f500b74ac690faaeb61892b01f5ad72bcf9","integrity":"sha512-ySKkKKvjv0VMfYS7GFx656KPOwhqTKIY23CBnjXX/W1NNWVpw+puJbEJReuGDP1nypV1VJHjfKJviXpsJsDbNg==","tarball":"https://registry.npmjs.org/material-motion/-/material-motion-0.1.0.tgz","fileCount":6288,"unpackedSize":9226249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEfuJCRA9TVsSAnZWagAACgoQAIbiAm0CWQxo1X+zE1rt\nGkrerYHC8f92n2jfO8cKI4FVO8P97Rk5zPYwnBwRYEnQ0X81zZMbmC+Uvjr9\nySw6YhlKDzTzEILh7urSb/Yi/UTqMY6JrIy7uL2b3foAuvAHuCYhSvl9FuqM\nJfPPn0gTqxMZr3qyHoCqJgHIT0bi+++wsASKq8t0Sv/1geAHnympxagxyju/\nNmpFpaaMDPD5weD0OSor7/fNJGTnooTnWTunrF+nNoAKJVNQztZj7e+ZNvM9\n2lis2d1fcjpA/V5eN/ldFI2dBNUpI4COivHZE6V8CUu6b1Z/RAB+kxvXjs6D\nOFS83Eqo5q9DVxP8OiCVxW+Bup0XAGClZIxhUQ3j8PKc9J+aSiB2lohyewIK\nAu+toHvbaARLLtJk8aHETOXyq035HgCWP+gKEe2Kl+EI8qW4MIH7r24x0o39\nU7CbNLptVGOmb35Le2xvGJJPA+1E4EqIwannFjm2q8o9WOyARfxr01Vz8P6b\nVJh4Dc3MpWp00mki31vmDOHTx8JlgYYt3F6Hc4bRusLdjHzRWPCMTxq3U5xv\nHarq0C6+cJPxfP6I+DqM1A7qUuzNonf8yZPX5r5Cv9nlyLtTqw5FrWKxlkv3\nQnBHmBYOp2/pSv1JJka24mPOKpAVEIB1aDcSOEHwAlzTkyew9cPQ6U1ZX3NC\ne7MM\r\n=9mR1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4YKSjV3wNi9A0F1bBgq1+c7+BcLXd5eXIhP6zUg5diAiAu2IJPhzLi0QbWBn2pjc8yCFI819wslXADkMe/NK6gQQ=="}]},"maintainers":[{"name":"appsforartists","email":"npm@appsforartists.com"}],"_npmUser":{"name":"appsforartists","email":"npm@appsforartists.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/material-motion_0.1.0_1544682376897_0.5668385454730214"},"_hasShrinkwrap":false},"0.1.1":{"name":"material-motion","version":"0.1.1","description":"Makes it easy to add rich, interactive motion to your application.","module":"dist/index.js","types":"dist/index.d.ts","unpkg":"dist/material-motion.bundle.js","typescript:main":"src/index.ts","scripts":{"lint":"../../node_modules/.bin/tslint -c ../../tslint.json --project tsconfig.json --type-check","lint-ci":"yarn run lint --out $CIRCLE_TEST_REPORTS/tslint/core.xml --formatters-dir ../../node_modules/tslint-junit-formatter/formatters --format junit","build":"yarn run clean; ../../node_modules/.bin/tsc; ../../node_modules/.bin/rollup --config ./rollup.config.js","clean":"rm -rf ./dist/*; mkdir -p ./dist/","test":"node ../../tools/test.js --only core"},"dependencies":{"csstype":"2.5.8","fast-equals":"1.6.1","indefinite-observable":"2.0.1","symbol-observable":"1.2.0","tslib":"^1.2.0","wobble":"1.5.1"},"devDependencies":{"material-motion-testing-utils":"^0.1.1"},"repository":{"type":"git","url":"git+ssh://git@github.com:material-motion/material-motion-js.git"},"keywords":["animated","animation","direct manipulation","drag","gestures","interactive","material","motion","move","multitouch","observables","odeon","pointer events","physics","pinch","rotate","scale","springs","streams","stretch","touch","transitions","tween","tweens"],"author":{"name":"The Material Motion Authors","url":"see AUTHORS"},"license":"Apache-2.0","bugs":{"url":"https://github.com/material-motion/material-motion-js/issues"},"homepage":"https://github.com/material-motion/material-motion-js/tree/develop/packages/core#readme","_id":"material-motion@0.1.1","dist":{"shasum":"2492de39f5d59c8bac9d2e7b4d8726f02c3ec77f","integrity":"sha512-NdXhvDboq2n+xUUJRCmJa03tU0Z0XJZ4q5f1BGsD+APq4z1iImlS45mX6syk3sf9FhTnM++NueVEyY5g/WTOaw==","tarball":"https://registry.npmjs.org/material-motion/-/material-motion-0.1.1.tgz","fileCount":6290,"unpackedSize":9401953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpWUbCRA9TVsSAnZWagAA4XEP/iiOC0VS+QCLfg+ecgp3\nGPx4xnAcCyLV+eV6pe1VAtJP4QrxS8t2FpUmW9wHc8yj42XHEN0iUC7CxY7I\n/jodo/IvQtdQJfLKARz8Gddhm+5+7ZfoRVS3pdg7GBnyH8POeLVff8a9knnK\nZwatx+HW82f3zaH+k8+2wNEotxvEL3tjvhHmMoxt/cgfIFlix3NgIP+/Y3dn\nlfLTAwN5FYFyaYLeqSXARQavQ4oCJmLHtjC4al6Ufz/nr3Q1xRSrQzx5DSXj\nw4pnmq+tINhsZVhtNFe7OSPNYaHLZGxkANQswbvQUbHNRWTKRjpveBeAcZgJ\nA0BQsQaPP/J5wXaiZYMTq9zezXYnNQ2Kr+cmU04CUmaTteMt00W4WO1PSbQE\nlpUxjghaBFV6M5iBkDiqKgCddJjJKm/dJzB8h1wxMZGTR4aV6luMoHNlPysp\nNj9Yi9x8zUJB4gkhj/oc84G5SVyuDDXCM9kzzCMBI+VkWJ+RyVHpVsJmjzOA\nFBsp8KsqmUW8jEAsuTT7FQZvdC/dDR0P2IF7esITcKL+hGvAmwh/KQy9Xl/x\nOpeqg0HEx0KgFmN4A7VnsryHz2Tb6FAy8cjasSzBojFE7AmXQxUMFuqiXLMc\n8LCBD21d1O4hyZApFj2uNnYh/QWnG1MU+Frbetw3pOTmmh00mj67jSr5U26D\nNW2b\r\n=yl/K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdrdYVW7YOwv2NURJnrjsTEKOtHhKPFv/aIyT4/CQg6AIhAPiHmHomP64kFln4pF8KhIWSDRdy4gpF4YqOGja0pEj9"}]},"maintainers":[{"name":"appsforartists","email":"npm@appsforartists.com"}],"_npmUser":{"name":"appsforartists","email":"npm@appsforartists.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/material-motion_0.1.1_1554343194981_0.2842193781343445"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-29T04:32:02.373Z","0.0.0":"2018-11-29T04:32:02.591Z","modified":"2022-05-08T22:10:20.838Z","0.1.0":"2018-12-13T06:26:17.136Z","0.1.1":"2019-04-04T01:59:55.250Z"},"maintainers":[{"name":"appsforartists","email":"npm@appsforartists.com"}],"description":"Makes it easy to add rich, interactive motion to your application.","homepage":"https://github.com/material-motion/material-motion-js/tree/develop/packages/core#readme","keywords":["animated","animation","direct manipulation","drag","gestures","interactive","material","motion","move","multitouch","observables","odeon","pointer events","physics","pinch","rotate","scale","springs","streams","stretch","touch","transitions","tween","tweens"],"repository":{"type":"git","url":"git+ssh://git@github.com:material-motion/material-motion-js.git"},"author":{"name":"The Material Motion Authors","url":"see AUTHORS"},"bugs":{"url":"https://github.com/material-motion/material-motion-js/issues"},"license":"Apache-2.0","readme":"\n# ![\"logo\"](\"https://www.gstatic.com/images/branding/product/2x/motion_48dp.png\")
Material Motion #\n\nMaterial Motion is a library used by the Material Design team to prototype interactive experiences with gestures.\n\n[](https://www.npmjs.com/package/material-motion/v/0.1.0)\n[](https://circleci.com/gh/material-motion/material-motion-js/1166)\n[](https://codecov.io/gh/material-motion/material-motion-js/tree/dc52c0f56107625171199008604f4f80f528b9a6/packages)
\n[](https://github.com/material-motion/material-motion-js)\n[](https://circleci.com/gh/material-motion/material-motion-js/tree/develop)\n[](https://codecov.io/gh/material-motion/material-motion-js/branch/develop)\n\n[](https://discord.gg/material-motion)\n\n## Status: Experimental ##\n\n🚨 Material Motion has not been used in a production application at Google. It is unstable and unsupported. 🚨\n\n### Unexplored areas ###\n\n- **bundle size**\n\n Material Motion has not been run through [Closure Compiler](https://github.com/google/closure-compiler). No attempts have been made to minify its file size.\n\n [Operators](https://github.com/material-motion/material-motion-js/tree/develop/packages/core/src/operators) are presently implemented using the [mixin pattern](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/), which may not minify well. We may migrate to a [pipeable architecture, like RxJS's](https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md), in a future version.\n\n- **memory footprint**\n\n Interactions are implemented by composing streams of user input to emit styles like `transform` and `opacity`. We have not yet explored when/how these streams should be freed for garbage collection.\n\n### Other likely changes ###\n\n- **function signatures**\n\n Material Motion uses the named argument pattern to make it easier to evolve APIs without making breaking changes. There is usually a positional shorthand. For instance, these are equivalent:\n\n ```typescript\n openOffset$.addedBy({ value$: thresholdAmount$ }) // named argument\n\n openOffset$.addedBy(thresholdAmount$) // positional shorthand\n\n openOffset$.addedBy({ // named argument, with\n value$: thresholdAmount$, // an explicit value for\n onlyEmitWithUpstream: false, // an optional parameter\n })\n ```\n\n All arguments that accept stream values [are suffixed with `$`](https://medium.com/@benlesh/observables-and-finnish-notation-df8356ed1c9b).\n\n The Material Motion API is declarative. Its operators accept literal values and other streams, but not functions. This decision was made to ensure the API is portable across platforms, and to provide a foundation for visual tooling to be built on top of.\n\n We will continue to assess the impact of these patterns on both ergonomics and code size, and may make changes in the future accordingly.\n\n## Usage ##\n\nMaterial Motion is often used to implement the toss gesture: where the user drags an element, and when it's released, it springs to a resting position. [`Tossable`](https://github.com/material-motion/material-motion-js/blob/develop/packages/core/src/interactions/Tossable.ts) observes the drag's velocity and passes it to the spring, preserving the user's momentum and making the interaction feel seamless.\n\nHere's a simple example:\n\n```javascript\n// We use JSS to update the document's style sheet whenever Material Motion\n// emits a new value.\nimport { create as createJSS } from 'jss';\nimport createDefaultJSSPreset from 'jss-preset-default';\n\nimport {\n Draggable,\n Point2DSpring,\n Tossable,\n combineStyleStreams,\n getPointerEventStreamsFromElement,\n} from 'material-motion';\n\n// We're presuming there's an element on the page called \"ball\" that we want to\n// make tossable.\nconst ball = document.getElementById('ball');\n\n// `Draggable` listens for events on the down, move, and up streams. It\n// calculates how far a pointer has been dragged, and emits the result on its\n// `value$` stream.\nconst pointerEvents = getPointerEventStreamsFromElement(ball);\nconst draggable = new Draggable(pointerEvents);\n\n// `Tossable` passes the velocity from `draggable` into the spring. This\n// ensures that when the user lets go, the item continues moving at the same\n// speed it was while the user was in control.\nconst spring = new Point2DSpring();\nconst tossable = new Tossable({ draggable, spring });\n\n// `Tossable` outputs `translate$` and `willChange$`.\n//\n// `combineStyleStreams` will combine these into a stream of\n// `{ transform, willChange }`, to be passed to JSS.\nconst ballStyles$ = combineStyleStreams(tossable.styleStreams);\n\n// Unfortunately, there's a bit of boilerplate to instantiate JSS. Notice\n// that the output of `tossable` has been given the name `ball` here.\nconst styleSheet = jss.createStyleSheet(\n {\n ball: ballStyles$,\n },\n {\n link: true,\n }\n).attach();\n\n// Now, we assign the class name that JSS generated to the element that we\n// received the pointer events from:\nball.classList.add(styleSheet.classes.ball);\n```\n\nYou can see this in action at https://material-motion-demos.firebaseapp.com/toss/. The source code is in [`TossableDemo`](https://github.com/material-motion/material-motion-js/blob/develop/packages/demos-react/src/TossableDemo.tsx).\n\n## Documentation ##\n\nMaterial Motion was originally a cross-platform initiative that targeted Android, iOS, and the Web. Although the other platforms are not currently in active development, you may find the documentation from the shared project helpful: https://material-motion.github.io/material-motion/documentation/\n\nUnfortunately, there is not yet independent documentation for the JavaScript implementation. Hopefully, there will be in there future.\n\n## Installation ##\n\n```\nyarn add material-motion\n```\n\n## License ##\n\n[Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0)\n","readmeFilename":"README.md"}