{"_id":"@andersseen/motion","_rev":"3-35ad29b82f18b70c1f8803d46380ba63","name":"@andersseen/motion","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@andersseen/motion","version":"0.1.0","keywords":["animation","motion","typescript","css","framework-agnostic"],"author":{"name":"Andersseen"},"license":"MIT","_id":"@andersseen/motion@0.1.0","maintainers":[{"name":"andriipap","email":"andriipap01@gmail.com"}],"homepage":"https://github.com/Andersseen/and-web-components#readme","bugs":{"url":"https://github.com/Andersseen/and-web-components/issues"},"dist":{"shasum":"21d3e16b650b0441a854c243f97b89853aa58217","tarball":"https://registry.npmjs.org/@andersseen/motion/-/motion-0.1.0.tgz","fileCount":10,"integrity":"sha512-tuOtlOGLEgU6ZQqDmKPCyCmOWfH3hMo7I9Tvc4kfLv19DC+DlL/m8HKDbT5QzGVA9ceUJgyMVQDvLVjBfKoq/w==","signatures":[{"sig":"MEYCIQD9k9h+dCySur8xqo664/sIP3cfKTW+mHI8SowQ0N4RPAIhAMFE/K581Pr3YhqZJ0ipx1fF1rmYDtEmXP6zTtaOkHH1","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83529},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist-cjs/index.js"},"./style.css":"./dist/style.css"},"gitHead":"273f8532cec166cd7b195034d8241a1578d4e5e6","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts","test":"echo \"Error: no test specified\" && exit 1","build":"rm -rf dist dist-cjs && tsc && tsc -p tsconfig.cjs.json && node scripts/build-css.cjs","prepublishOnly":"pnpm run build"},"_npmUser":{"name":"andriipap","email":"andriipap01@gmail.com"},"repository":{"url":"git+https://github.com/Andersseen/and-web-components.git","type":"git","directory":"packages/motion-core"},"_npmVersion":"11.6.2","description":"Framework-agnostic animation library for TypeScript and CSS","directories":{},"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.3.3"},"_npmOperationalInternal":{"tmp":"tmp/motion_0.1.0_1772741739260_0.24573493720338457","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@andersseen/motion","version":"0.1.1","keywords":["animation","motion","typescript","css","framework-agnostic"],"author":{"name":"Andersseen"},"license":"MIT","_id":"@andersseen/motion@0.1.1","maintainers":[{"name":"andriipap","email":"andriipap01@gmail.com"}],"homepage":"https://github.com/Andersseen/and-web-components#readme","bugs":{"url":"https://github.com/Andersseen/and-web-components/issues"},"dist":{"shasum":"ab3cec3c80e1844b31b2756c57bd1203e04d02a7","tarball":"https://registry.npmjs.org/@andersseen/motion/-/motion-0.1.1.tgz","fileCount":10,"integrity":"sha512-wxH1jeJIpy1/P3DdafGQF60ePts0+/pKoF8WlGOKxOBVDgoqFzPCdli6rcHNwzLh6AU1zTSKkyIAwTtfFoynHQ==","signatures":[{"sig":"MEYCIQCNZyzraauc89yK666gLHKH/YHnmV0qUfjuQ8mLnNdngQIhAILQFtSWYU1nUleMRaISRNYM6kWWzirrJlHIyJKqnpyl","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":91300},"main":"./dist/index.js","type":"module","_from":"file:andersseen-motion-0.1.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist-cjs/index.js"},"./style.css":"./dist/style.css"},"scripts":{"lint":"eslint src","test":"vitest run","build":"rm -rf dist dist-cjs && tsc && tsc -p tsconfig.cjs.json && node scripts/build-css.cjs","test:watch":"vitest","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"andriipap","email":"andriipap01@gmail.com"},"_resolved":"/private/var/folders/wq/4bgf9dy51d5776cl3qgg362h0000gn/T/341ae05482ed34f49a77fbff048526f7/andersseen-motion-0.1.1.tgz","_integrity":"sha512-wxH1jeJIpy1/P3DdafGQF60ePts0+/pKoF8WlGOKxOBVDgoqFzPCdli6rcHNwzLh6AU1zTSKkyIAwTtfFoynHQ==","repository":{"url":"git+https://github.com/Andersseen/and-web-components.git","type":"git","directory":"packages/motion-core"},"_npmVersion":"11.6.2","description":"Framework-agnostic animation library for TypeScript and CSS","directories":{},"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^10.1.0","vitest":"^4.1.0","typescript":"^5.3.3","typescript-eslint":"^8.57.1","@vitest/coverage-v8":"^4.0.18"},"_npmOperationalInternal":{"tmp":"tmp/motion_0.1.1_1774194281277_0.9566768087523589","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@andersseen/motion","version":"0.2.0","sideEffects":["*.css","./dist/core.css"],"description":"Framework-agnostic animation library for TypeScript and CSS","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist-cjs/index.js"},"./style.css":"./dist/style.css"},"keywords":["animation","motion","typescript","css","framework-agnostic"],"author":{"name":"Andersseen"},"license":"MIT","devDependencies":{"@vitest/coverage-v8":"4.1.0","eslint":"^10.1.0","typescript":"^5.3.3","typescript-eslint":"^8.57.1","vitest":"^4.1.0"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/Andersseen/and-web-components.git","directory":"packages/motion-core"},"scripts":{"build":"rm -rf dist dist-cjs && tsc && node ../../scripts/fix-esm-extensions.cjs dist && tsc -p tsconfig.cjs.json && node scripts/build-css.cjs","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","format":"prettier --write \"src/**/*.{ts,tsx}\"","format:check":"prettier --check \"src/**/*.{ts,tsx}\""},"_id":"@andersseen/motion@0.2.0","bugs":{"url":"https://github.com/Andersseen/and-web-components/issues"},"homepage":"https://github.com/Andersseen/and-web-components#readme","_integrity":"sha512-A7y+B93eqi4c3hOLlF7vyRXRgJaBPi89l9W+xk8n2daV2hFyS5PUn66zj7BiPp+7Giq7p6ffiKbtw5FC4ZnngQ==","_resolved":"/tmp/7a75d215f46b239d5f3d03f185cdbb19/andersseen-motion-0.2.0.tgz","_from":"file:andersseen-motion-0.2.0.tgz","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-A7y+B93eqi4c3hOLlF7vyRXRgJaBPi89l9W+xk8n2daV2hFyS5PUn66zj7BiPp+7Giq7p6ffiKbtw5FC4ZnngQ==","shasum":"f9f12931a642e70108ecb63e3e16a43509e148f5","tarball":"https://registry.npmjs.org/@andersseen/motion/-/motion-0.2.0.tgz","fileCount":24,"unpackedSize":121234,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDYJFXAIljqrlAQwhD5+ajkZsZ54KOdOnl8mZ2uSppecwIhANrRJPR71CJ9MG1yiNmycyL2K55l0/CZzpmv5w3F09wf"}]},"_npmUser":{"name":"andriipap","email":"andriipap01@gmail.com"},"directories":{},"maintainers":[{"name":"andriipap","email":"andriipap01@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/motion_0.2.0_1784814154752_0.513873019912161"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-05T20:15:39.141Z","modified":"2026-07-23T13:42:35.065Z","0.1.0":"2026-03-05T20:15:39.415Z","0.1.1":"2026-03-22T15:44:41.414Z","0.2.0":"2026-07-23T13:42:34.879Z"},"bugs":{"url":"https://github.com/Andersseen/and-web-components/issues"},"author":{"name":"Andersseen"},"license":"MIT","homepage":"https://github.com/Andersseen/and-web-components#readme","keywords":["animation","motion","typescript","css","framework-agnostic"],"repository":{"type":"git","url":"git+https://github.com/Andersseen/and-web-components.git","directory":"packages/motion-core"},"description":"Framework-agnostic animation library for TypeScript and CSS","maintainers":[{"name":"andriipap","email":"andriipap01@gmail.com"}],"readme":"# @andersseen/motion\n\nFramework-agnostic animation library: attribute-driven CSS animations for\ndeclarative use, plus an imperative promise-based player for component-level\ntransitions (modal open/close, toast enter/exit, etc.). Zero in-repo\ndependencies.\n\n> Part of the Andersseen **product core** — usable entirely on its own, in plain\n> HTML or any framework, without `@andersseen/web-components`.\n\n## Installation\n\n```bash\npnpm add @andersseen/motion\n```\n\n```css\n@import '@andersseen/motion/style.css';\n```\n\n## Attribute-driven animations\n\nScan the DOM once (or after an SPA route change) and every `[and-motion]`\nelement gets wired up automatically:\n\n```ts\nimport { initMotion } from '@andersseen/motion';\n\nconst cleanup = initMotion();\n// …later, on unmount / route change:\ncleanup();\n```\n\n```html\n<!-- Animate once when scrolled into view -->\n<div and-motion=\"fade-in\" and-motion-trigger=\"enter\">Content</div>\n\n<!-- Animate on hover -->\n<div and-motion=\"zoom-in\" and-motion-trigger=\"hover\">Hover me</div>\n\n<!-- Custom timing -->\n<div\n  and-motion=\"slide-in-up\"\n  and-motion-trigger=\"enter\"\n  and-motion-duration=\"800ms\"\n  and-motion-delay=\"200ms\"\n>\n  Delayed slide\n</div>\n```\n\n### Attributes\n\n| Attribute             | Values                      | Default                     | Notes                                                                |\n| --------------------- | --------------------------- | --------------------------- | -------------------------------------------------------------------- |\n| `and-motion`          | animation name (below)      | —                           | required                                                             |\n| `and-motion-trigger`  | `enter` \\| `hover` \\| `tap` | inferred                    | names containing `-in` default to `enter` if omitted                 |\n| `and-motion-duration` | any CSS `<time>`            | stylesheet default          | forwarded to `--and-motion-duration`                                 |\n| `and-motion-delay`    | any CSS `<time>`            | `0s`                        | forwarded to `--and-motion-delay`                                    |\n| `and-motion-easing`   | any CSS easing              | stylesheet default          | forwarded to `--and-motion-easing`                                   |\n| `and-motion-once`     | `true` \\| `false`           | controller default (`true`) | per-element override of \"animate only the first time\"                |\n| `and-motion-state`    | —                           | —                           | set to `active` internally while the animation is running; read-only |\n\n`enter` uses `IntersectionObserver` (`threshold`/`rootMargin`/`once` are\nconfigurable via `initMotion({ threshold, rootMargin, once })` or the\n`MotionController` constructor). `hover` listens for `mouseenter`/`mouseleave`.\n`tap` listens for `pointerdown`/`pointerup`/`pointercancel`/`pointerleave`.\n\n`prefers-reduced-motion: reduce` is respected at both the CSS layer (via\n`@media`) and the JS layer (enter-triggered elements skip the initial\n`opacity: 0` so nothing is ever stuck invisible).\n\n### Animation catalog\n\nNames follow the `and-motion=\"<name>\"` value. Every family below ships `-in-*` /\n`-out-*` variants plus a directional base name; see\n`packages/motion-core/src/animations/` for the exhaustive list and exact\nkeyframes.\n\n| Family            | Examples                                                       |\n| ----------------- | -------------------------------------------------------------- |\n| Fading            | `fade-in`, `fade-out`, `fade-in-up`, `fade-in-down-big`, …     |\n| Sliding           | `slide-in-up`, `slide-in-left`, `slide-out-down`, …            |\n| Zooming           | `zoom-in`, `zoom-out`, `zoom-in-up`, `zoom-out-left`, …        |\n| Bouncing          | `bounce-in`, `bounce-out`, `bounce-in-down`, …                 |\n| Flippers          | `flip-in-x`, `flip-in-y`, `flip-out-x`, `flip-out-y`           |\n| Rotating          | `rotate-in`, `rotate-out`, `rotate-in-down-left`, …            |\n| Back              | `back-in-up`, `back-out-down`, …                               |\n| Light speed       | `light-speed-in-left`, `light-speed-out-right`                 |\n| Attention seekers | `pulse`, `shake-x`, `swing`, `tada`, `wobble`, `heart-beat`, … |\n| Specials          | `hinge`, `roll-in`, `roll-out`, `jack-in-the-box`              |\n\n## Imperative player\n\nFor component-driven lifecycles (open/close a modal, enter/exit a toast) where\nyou control timing in code rather than scroll/hover/tap:\n\n```ts\nimport { createMotionPlayer } from '@andersseen/motion';\n\nconst player = createMotionPlayer(element);\n\nawait player.play('fade-zoom-in');\n// …later…\nawait player.play('fade-zoom-out');\nplayer.destroy();\n```\n\n`play(name)` resolves on `animationend`. With `respectReducedMotion: true` (the\ndefault), it resolves immediately without running the animation when the user\nprefers reduced motion — callers don't need a separate branch for that case.\nThis is the mechanism `@andersseen/web-components` and\n`@andersseen/vanilla-components` use internally for the `animated` prop; use it\ndirectly if you're building your own component layer.\n\n## Development\n\n```bash\npnpm -C packages/motion-core test    # Vitest\npnpm -C packages/motion-core lint\npnpm -C packages/motion-core build   # ESM + CJS + CSS\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}