{"_id":"@288-toolkit/animations","_rev":"9-6580d1f0edf6f257054bf4b2ec610806","name":"@288-toolkit/animations","dist-tags":{"latest":"4.1.3"},"versions":{"1.0.0":{"name":"@288-toolkit/animations","version":"1.0.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/animations@1.0.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"eead404b09b8b2b78524c9ad3013887b86b45c87","tarball":"https://registry.npmjs.org/@288-toolkit/animations/-/animations-1.0.0.tgz","fileCount":12,"integrity":"sha512-61B6C95YdXL1Wr0Qf7y1bQvsuAEh9xmHuyvgomP9Xhui/f5u5PPvjIqql9Y6Ms0k7MdY9/BQP/c74VW24nYDCA==","signatures":[{"sig":"MEYCIQDySNmPwbPCmdeEY/O3s17GjLx33tis1lze4fKeh2dJPwIhAI0e8Kr2WiD+izn+lOFQEIzpxBnFcklwTSpUBWKtdbpI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23757},"type":"module","_from":"file:288-toolkit-animations-1.0.0.tgz","exports":{".":{"default":"./src/index.ts"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/baa9e11e43e2d384e3228e10c75ba314/288-toolkit-animations-1.0.0.tgz","_integrity":"sha512-61B6C95YdXL1Wr0Qf7y1bQvsuAEh9xmHuyvgomP9Xhui/f5u5PPvjIqql9Y6Ms0k7MdY9/BQP/c74VW24nYDCA==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/animations ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"@288-toolkit/types":"1.3.3","@288-toolkit/device":"1.2.0","@288-toolkit/page-transition":"^1.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"motion":"10.x","svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/animations_1.0.0_1714489788073_0.9550002817692871","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@288-toolkit/animations","version":"3.0.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/animations@3.0.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"ff1898e1cdff0a6085375aef8bbdf79efdd0c9f9","tarball":"https://registry.npmjs.org/@288-toolkit/animations/-/animations-3.0.0.tgz","fileCount":22,"integrity":"sha512-rmXfgiEMj9dAcwUor0shFYWnzP12ritGfaNVxQZWjJtTljs34I5+4r7ICTV6DLjO6zYAOhTMZoYInT68Q4wc6Q==","signatures":[{"sig":"MEUCIDC6pUnei/3Z6Atm9EFkkzOEtlfgknE9vJYycUCz/qfZAiEAy1AX+AwDkqPFFpPh69HlgpTTHF4VBZLOT1shGntfRac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29025},"type":"module","_from":"file:288-toolkit-animations-3.0.0.tgz","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/faea65dca57ba4cfa48dfc431ae1d040/288-toolkit-animations-3.0.0.tgz","_integrity":"sha512-rmXfgiEMj9dAcwUor0shFYWnzP12ritGfaNVxQZWjJtTljs34I5+4r7ICTV6DLjO6zYAOhTMZoYInT68Q4wc6Q==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/animations ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"@288-toolkit/types":"3.0.0","@288-toolkit/device":"3.0.0","@288-toolkit/page-transition":"^3.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"motion":"10.x","svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/animations_3.0.0_1714509595751_0.10168121477786762","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@288-toolkit/animations","version":"4.0.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/animations@4.0.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"2a5ea11830e823cca0491d1b47ae5daad838904f","tarball":"https://registry.npmjs.org/@288-toolkit/animations/-/animations-4.0.0.tgz","fileCount":22,"integrity":"sha512-aXW4+96VcwqfVHjWj3elp0cjbpuNdVwaA9Zr8WlmGRYu7HR6gEwnH+wrpWTf5K4TaA/30Rmd5bknCJv9MaMM4Q==","signatures":[{"sig":"MEQCIFq4JTGz0IShhNyheNdYTFvko1Ln6uyelESTmcpcC0MVAiANnvsT2ZyN6MGl9YAIQ1CQXRVNalz71wcsNc5kUbqWqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29079},"type":"module","_from":"file:288-toolkit-animations-4.0.0.tgz","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/add8b5f2e8feb4eb2493913f1accfaae/288-toolkit-animations-4.0.0.tgz","_integrity":"sha512-aXW4+96VcwqfVHjWj3elp0cjbpuNdVwaA9Zr8WlmGRYu7HR6gEwnH+wrpWTf5K4TaA/30Rmd5bknCJv9MaMM4Q==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/animations ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"@288-toolkit/types":"3.0.0","@288-toolkit/device":"4.0.0","@288-toolkit/page-transition":"^3.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"motion":"10.x","svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/animations_4.0.0_1714522082512_0.043043487548725556","host":"s3://npm-registry-packages"}},"4.0.1":{"name":"@288-toolkit/animations","version":"4.0.1","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/animations@4.0.1","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"ed5c69281912585229759d34861c63c3aafca161","tarball":"https://registry.npmjs.org/@288-toolkit/animations/-/animations-4.0.1.tgz","fileCount":22,"integrity":"sha512-lVpe0Zqa72p9kRsR8PkGFiiOmiDSGQFL7kAus7wSaAiQogNbE0QbUsqdMtgABkj+YIudRYMhsAlaocFJ0ZFkAA==","signatures":[{"sig":"MEUCIQCwkwMh2LVt2X/DJsZElu0ndJeaZCL+S/PzYI2UfnHDBQIgYqWLQErw/CEGuNLAuYlGS3qxHNLrGC/zPFHaaJkPEzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29078},"type":"module","_from":"file:288-toolkit-animations-4.0.1.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/3e4847c423cf1db338e15300e30f2222/288-toolkit-animations-4.0.1.tgz","_integrity":"sha512-lVpe0Zqa72p9kRsR8PkGFiiOmiDSGQFL7kAus7wSaAiQogNbE0QbUsqdMtgABkj+YIudRYMhsAlaocFJ0ZFkAA==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/animations ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"@288-toolkit/types":"3.0.0","@288-toolkit/device":"4.0.0","@288-toolkit/page-transition":"^3.0.1"},"_hasShrinkwrap":false,"peerDependencies":{"motion":"10.x","svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/animations_4.0.1_1714569424478_0.8283595066242799","host":"s3://npm-registry-packages"}},"4.1.0":{"name":"@288-toolkit/animations","version":"4.1.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/animations@4.1.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"b1e4facbef038925d5e5ff621bb71dcd51f72c11","tarball":"https://registry.npmjs.org/@288-toolkit/animations/-/animations-4.1.0.tgz","fileCount":22,"integrity":"sha512-T1IQ7PmW2h9lgew8PH6cFH/cOg99vwjT/vc9clCxfyncQN96oYkPZusYIZ7/9ToF9Mgq8Z0QiaPK2uRh/Vw84w==","signatures":[{"sig":"MEUCIDoCWc2nBk7pv5rtlxg+hRoaBbGtByGuNzmG+pPS6xSYAiEAlunVaThPQ1Evx5T+u1Ruwq4XR3lq4GdXW6jtYMrP7hY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29561},"type":"module","_from":"file:288-toolkit-animations-4.1.0.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package -i src","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/e1826a7a336505098714fe843d1ed7a0/288-toolkit-animations-4.1.0.tgz","_integrity":"sha512-T1IQ7PmW2h9lgew8PH6cFH/cOg99vwjT/vc9clCxfyncQN96oYkPZusYIZ7/9ToF9Mgq8Z0QiaPK2uRh/Vw84w==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/animations ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"@288-toolkit/types":"3.0.0","@288-toolkit/device":"4.0.0","@288-toolkit/page-transition":"^3.0.1"},"_hasShrinkwrap":false,"peerDependencies":{"motion":"10.x","svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/animations_4.1.0_1715711775110_0.3068065303523413","host":"s3://npm-registry-packages"}},"4.1.1":{"name":"@288-toolkit/animations","version":"4.1.1","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/animations@4.1.1","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"719c26b4c9c0c0912eb2d0bb1e08eb54f425dfeb","tarball":"https://registry.npmjs.org/@288-toolkit/animations/-/animations-4.1.1.tgz","fileCount":22,"integrity":"sha512-YkgwtOYpk1GlfWVWNWywQTFY9syiY/eDjZrFA/rZDbBTy2b6xwccTh26tzOxtW1XbHyT2G2CH01DXZE20RroyA==","signatures":[{"sig":"MEUCICX3FHgKbj3UgdGN8d2pPM7MKIM8zNvcjXWWbFPUtIcmAiEAyM1UrXn3kzbcvVBkIyzzyvOegW6GTI5s8rBlExk+5Tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29561},"type":"module","_from":"file:288-toolkit-animations-4.1.1.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package -i src","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/d3a9501301cc220c085149a23644818b/288-toolkit-animations-4.1.1.tgz","_integrity":"sha512-YkgwtOYpk1GlfWVWNWywQTFY9syiY/eDjZrFA/rZDbBTy2b6xwccTh26tzOxtW1XbHyT2G2CH01DXZE20RroyA==","_npmVersion":"10.5.2","description":"```sh npm i @288-toolkit/animations ```","directories":{},"_nodeVersion":"20.13.1","dependencies":{"@288-toolkit/types":"3.1.0","@288-toolkit/device":"4.0.1","@288-toolkit/page-transition":"^3.0.2"},"_hasShrinkwrap":false,"peerDependencies":{"motion":"10.x","svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/animations_4.1.1_1715871163653_0.9585683796271167","host":"s3://npm-registry-packages"}},"4.1.2":{"name":"@288-toolkit/animations","version":"4.1.2","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/animations@4.1.2","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"eaec0b8117fbe81837b117af9a588967e13609af","tarball":"https://registry.npmjs.org/@288-toolkit/animations/-/animations-4.1.2.tgz","fileCount":22,"integrity":"sha512-aU6cBT6TVYHyYfhO2FhoeTMZvaKXFMlrVq0fSdUZzAHfZEdQ/BIhFFokXuP1kiSkvR8TQr67uXSEKbHZIL7Pjw==","signatures":[{"sig":"MEUCIHRTTo9ttTSu9MMXqt9YKe6HTBPGFSesfEvimG0Z2srSAiEAizAuVOE9zg7Uoa3mksA41+vjcxWvyQADMLvUS1R6Rqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29657},"type":"module","_from":"file:288-toolkit-animations-4.1.2.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package -i src","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/754934d922d6212a769d1430c714bad8/288-toolkit-animations-4.1.2.tgz","_integrity":"sha512-aU6cBT6TVYHyYfhO2FhoeTMZvaKXFMlrVq0fSdUZzAHfZEdQ/BIhFFokXuP1kiSkvR8TQr67uXSEKbHZIL7Pjw==","_npmVersion":"10.8.2","description":"```sh npm i @288-toolkit/animations ```","directories":{},"_nodeVersion":"20.17.0","dependencies":{"@288-toolkit/types":"3.1.0","@288-toolkit/device":"4.0.1","@288-toolkit/page-transition":"^3.0.2"},"_hasShrinkwrap":false,"peerDependencies":{"motion":"10.x","svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/animations_4.1.2_1725896445346_0.09326562462828702","host":"s3://npm-registry-packages"}},"4.1.3":{"name":"@288-toolkit/animations","version":"4.1.3","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/animations@4.1.3","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"6e6cd6391504b926462705816888f4b9671537f6","tarball":"https://registry.npmjs.org/@288-toolkit/animations/-/animations-4.1.3.tgz","fileCount":22,"integrity":"sha512-1OCKDWaUD/uEoezIIrxlvb255ajcqsiwWAQoil6FLg7CL9clrD3RR8uj/YyH0Xyxmk2ZZyk2mFVUBoyjn/Gb/g==","signatures":[{"sig":"MEQCIFrF508PZtdZd+IUcZTUSMVj/GKkrFNFU9ol4ijPo2uHAiBrNW8xIWjUr/LNKwE48uY00vrZpOTU7gA3yOTVOJlUaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29657},"type":"module","_from":"file:288-toolkit-animations-4.1.3.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package -i src","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/private/var/folders/k6/gmpb3s_x4kb4v14gmbp18y_40000gs/T/93eed70b1b53ef982066af61835200d6/288-toolkit-animations-4.1.3.tgz","_integrity":"sha512-1OCKDWaUD/uEoezIIrxlvb255ajcqsiwWAQoil6FLg7CL9clrD3RR8uj/YyH0Xyxmk2ZZyk2mFVUBoyjn/Gb/g==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/animations ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"@288-toolkit/types":"3.1.0","@288-toolkit/device":"5.0.0","@288-toolkit/page-transition":"^3.0.2"},"_hasShrinkwrap":false,"peerDependencies":{"motion":"10.x","svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/animations_4.1.3_1730469962372_0.06140084390580691","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-04-30T15:09:47.909Z","modified":"2025-09-23T15:34:31.427Z","1.0.0":"2024-04-30T15:09:48.220Z","3.0.0":"2024-04-30T20:39:55.999Z","4.0.0":"2024-05-01T00:08:02.678Z","4.0.1":"2024-05-01T13:17:04.652Z","4.1.0":"2024-05-14T18:36:15.240Z","4.1.1":"2024-05-16T14:52:43.798Z","4.1.2":"2024-09-09T15:40:45.493Z","4.1.3":"2024-11-01T14:06:02.552Z"},"author":{"name":"DeuxHuitHuit"},"license":"MIT","description":"```sh npm i @288-toolkit/animations ```","maintainers":[{"email":"open-source@deuxhuithuit.com","name":"nitriques"}],"readme":"# Animations\n\n```sh\nnpm i @288-toolkit/animations\n```\n\nA collection of functions and actions to animate elements.\n\n## `createAnimationArchitect()`\n\nAn architect allows you to register animation functions that will get played when transitioning out\nfrom a page, which is useful to coordinate multiple outro animations. The architect instance has to\nbe initialized with the provided `start` function in order to work, which is a wrapper around\n[`registerTransition`](../page-transition/README.md).\n\nThe animations will not be played if the user has reduced motion.\n\n### Options\n\n#### `outDuration`\n\nThe outro duration in ms that the animations must be played for. Default: `400`.\n\n### Returns\n\n#### `start`\n\nA wrapper around `registerTransition` that initializes the architect. This function MUST be called\nat component initialization. It accepts the same arguments and returns the `$transitioning` store\nfor the registered transition.\n\n#### `registerAnimation`\n\nThe function to register your outro animation. The outro animation is simply a function that\nreceives the `duration` in seconds and `durationMs` in milliseconds, which is the `outDuration`\npassed to the architect.\n\n### Example\n\n```ts\nconst architect = createAnimationArchitect({ outDuration: 350 });\n```\n\n```svelte\n<script lang=\"ts\">\n\timport { architect } from '$lib/animations/defaultArchitect';\n\n\tarchitect.start('default');\n</script>\n\n<script lang=\"ts\">\n\timport {onMount} from 'svelte';\n\n\tlet myEl: HTMLElement\n\n\tonMount(() => {\n\t\tarchitect.registerAnimation(({ durationMs }) => {\n\t\t\t// ... animate myEl before navigating away from the page\n\t\t})\n\t})\n</script>\n```\n\n## `createMotionArchitect`\n\nA wrapper around `createAnimationArchitect` to handle [Motion](https://motion.dev/) animations.\n\nIt accepts the same arguments and An architect instance extended with `registerMotionAnimation`.\nThis function takes the animation controls returned from `animate` or `timline` and automatically\nreverses the animation when transitioning out.\n\n```svelte\n<script lang=\"ts\">\n\tonMount(() => {\n\t\tarchitect.registerMotionAnimation(\n\t\t\tanimate(\n\t\t\t\tmyEl,\n\t\t\t\t{\n\t\t\t\t\topacity: [0, 1]\n\t\t\t\t},\n\t\t\t\t{ duration: 0.3 }\n\t\t\t)\n\t\t);\n\t});\n</script>\n```\n\n## `use:playMotionAnimationInView`\n\nPlays a [Motion](https://motion.dev/) animation when the element comes into view, using\n[Motion's `inView` function](https://motion.dev/dom/in-view). Registers it with an optional\narchitect (see `createMotionArchitect`) so that if the element is in view when a navigation occurs,\nthe animation will be reversed (which can be turned off with `reverse: false`). Make sure that the\nanimation is set to `autoplay: false`, otherwise it will play immediately, potentially before the\nelement is in view.\n\nThe animation will be skipped to its final state if the user has reduced motion.\n\n### Options\n\n#### animation\n\nThe animation to play, returned from either `animate` or `timeline` from Motion.\n\n```ts\nanimation: AnimationControls;\n```\n\n#### architect\n\nThe architect to register the animation with. If provided, the animation will be unregistered when\nthe element is out of view and reversed if the element is in view when a navigation occurs.\n\n```ts\narchitect?: ReturnType<typeof createMotionArchitect>;\n```\n\n#### reverse\n\nWhether to reverse the animation when the element is out of view. DEFAULT: `true`.\n\n```ts\nreverse?: boolean;\n```\n\n#### inViewOptions\n\nThe options to pass to the `inView` function.\n\n```ts\ninViewOptions?: InViewOptions;\n```\n\n### Example\n\n```svelte\n<div\n\tuse:playMotionAnimationInView={{\n\t\tanimation: animate(el, {\n\t\t\t/*...*/\n\t\t}),\n\t\treverse: false,\n\t\tinViewOptions: {\n\t\t\tamount: 0.8\n\t\t}\n\t}}\n></div>\n```\n\n## `use:animateInView`\n\nWraps `playMotionAnimationInView` and:\n\n-   Makes sure that the `animation` has `autoplay: false`\n-   Provides a nice API to select multiple elements within the node.\n-   Allows disabling the animation.\n\n### Options\n\n`animateInView` has the same options as `playMotionAnimationInView` except `animation`, as well as\nthe following.\n\n#### keyframes\n\nThe keyframes of the animation.\n\n```ts\nkeyframes: MotionKeyframesDefinition;\n```\n\n#### options\n\nThe animation options.\n\n```ts\noptions?: AnimationOptionsWithOverrides;\n```\n\n#### selector\n\nA CSS selector find elements within the node to animate. If omitted, the node itself will be\nanimated.\n\n```ts\nselector?: string;\n```\n\n#### disabled\n\nDisables the animation. DEFAULT: false.\n\n```ts\ndisabled?: boolean;\n```\n\n### Example\n\n```svelte\n<ul\n\tuse:playMotionAnimationInView={{\n\t\tkeyframes: {\n\t\t\ttransform: ['translateY(4rem)', 'none'],\n\t\t\topacity: [0, 1]\n\t\t},\n\t\toptions: {\n\t\t\ttransform: {\n\t\t\t\teasing: expoOut,\n\t\t\t\tduration: 0.7\n\t\t\t},\n\t\t\topacity: {\n\t\t\t\teasing: 'linear',\n\t\t\t\tduration: 0.2\n\t\t\t},\n\t\t\tdelay: stagger(0.1)\n\t\t},\n\t\tselector: 'li',\n\t\tinViewOptions: {\n\t\t\tamount: 0.4\n\t\t}\n\t}}\n>\n\t{#each items as item}\n\t\t<li>{item}</li>\n\t{/each}\n</ul>\n```\n\n## `use:slide`\n\nAn action to animate the height of an element.It uses `tweened` store to animate the element, which\nyou can configure.\n\n[!NOTE] Why not use `slide` from `svelte/transition`? It's still a very good choice, but svelte\ntransitions require the elements to be mounted/unmounted from the DOM to be animated. Sometimes you\nmight want to keep the elements in the DOM, for example to get a better SEO score for the page. In\nthat case, the `slide` action is prefered.\n\n### Options\n\n#### open\n\nDetermines if the element is collapsed or not.\n\n```ts\nopen: boolean;\n```\n\n#### options\n\nThe options of the `tweened` store, so you can adjust the duration, easing, etc. The `duration` will\nbe overriden to 0 if the user has reduced motion.\n\n```ts\noptions: Parameters < typeof tweened < number >> [1];\n```\n\n#### closedHeight\n\nThe height of the element when `open` is false.\n\n```ts\nclosedHeight: number;\n```\n\n### Example\n\n```svelte\n<div\n\tuse:slide={{ open: $open, options: { duration: 700, easing: expoOut }, closedHeight: 50 }}\n></div>\n```\n\n## `use:parallax`\n\nCreates a parallax effect on an element using [Motion](https://motion.dev/). The parallax will be\nre-initialized when the options change, so you can update them dynamically to match certain\nconditions, like mobile and desktop options.\n\n### Options\n\n#### speed\n\nSpeed of the animation. Negative values invert the direction. 0 disables the animation. DEFAULT:\n0.2.\n\n```ts\nspeed?: number;\n```\n\n#### easing\n\nEasing of the animation. DEFAULT: 'linear'.\n\n```ts\neasing?: Easing;\n```\n\n#### keyframes\n\nExtra keyframes to add more animation effects.\n\n```ts\nkeyframes?: MotionKeyframesDefinition;\n```\n\n## Example\n\n```svelte\n<script lang=\"ts\">\n\timport { createMatchMediaStore } from '@288-toolkit/device/media';\n\n\tconst isDesktop = createMatchMediaStore('(min-width: 1200px)');\n</script>\n\n<div\n\tuse:parallax={{\n\t\tspeed: $isDesktop ? 0.4 : 0.2\n\t}}\n></div>\n```\n\n## `use:parallaxFade`\n\nAdds a fade animation to the basic parallax.\n\n### Options\n\n#### from\n\nOpacity at the start of the animation. DEFAULT: 0.\n\n```ts\nfrom?: number;\n```\n\n#### to\n\nOpacity at the end of the animation. DEFAULT: 1.\n\n```ts\nto?: number;\n```\n\n#### speed\n\nSpeed of the animation. Negative values invert the direction. 0 disables the animation. DEFAULT:\n0.2.\n\n```ts\nspeed?: number;\n```\n\n#### easing\n\nEasing of the animation. DEFAULT: 'linear'.\n\n```ts\neasing?: Easing;\n```\n\n## `use:parallaxScale`\n\nAdds a scale animation to the basic parallax. The element has a scale of 1 at the middle of the\nanimation.\n\n### Options\n\n#### from\n\nScale at the start of the animation. DEFAULT: 0.5.\n\n```ts\nfrom?: number;\n```\n\n#### to\n\nScale at the end of the animation. DEFAULT: 0.5.\n\n```ts\nto?: number;\n```\n\n#### speed\n\nSpeed of the animation. Negative values invert the direction. 0 disables the animation. DEFAULT:\n0.2.\n\n```ts\nspeed?: number;\n```\n\n#### easing\n\nEasing of the animation. DEFAULT: 'linear'.\n\n```ts\neasing?: Easing;\n```\n\n### `augmentedParallax()`\n\nA convenience function to augment the basic `parallax` action with more animation effects.\n\nSee [`parallaxFade`](./src/parallaxFade.ts) and [`parallaxScale`](./src/parallaxScale.ts) for\nexamples.\n","readmeFilename":"README.md"}