{"id":20055500,"url":"https://github.com/solidjs-community/solid-motionone","last_synced_at":"2025-05-05T13:32:43.621Z","repository":{"id":215154785,"uuid":"738123238","full_name":"solidjs-community/solid-motionone","owner":"solidjs-community","description":"A tiny, performant animation library for SolidJS","archived":false,"fork":false,"pushed_at":"2024-01-04T10:27:38.000Z","size":177,"stargazers_count":55,"open_issues_count":5,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-14T00:25:52.162Z","etag":null,"topics":["animation","solidjs","waapi"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solidjs-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-02T13:31:58.000Z","updated_at":"2024-04-17T17:23:54.378Z","dependencies_parsed_at":null,"dependency_job_id":"61030542-1182-4d31-959c-8e015a6fca31","html_url":"https://github.com/solidjs-community/solid-motionone","commit_stats":{"total_commits":12,"total_committers":3,"mean_commits":4.0,"dds":0.25,"last_synced_commit":"ba9005ffe20ae3b4327739c0e83ff0f1623cdb03"},"previous_names":["solidjs-community/solid-motionone"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-motionone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-motionone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-motionone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-motionone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solidjs-community","download_url":"https://codeload.github.com/solidjs-community/solid-motionone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224452981,"owners_count":17313668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","solidjs","waapi"],"created_at":"2024-11-13T12:48:13.646Z","updated_at":"2024-11-13T12:48:14.147Z","avatar_url":"https://github.com/solidjs-community.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?background=tiles\u0026project=solid-motionone\" alt=\"solid-motionone\"\u003e\n\u003c/p\u003e\n\n# Solid MotionOne\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge\u0026logo=pnpm)](https://pnpm.io/)\n[![npm](https://img.shields.io/npm/v/solid-motionone?style=for-the-badge)](https://www.npmjs.com/package/solid-motionone)\n[![downloads](https://img.shields.io/npm/dw/solid-motionone?color=blue\u0026style=for-the-badge)](https://www.npmjs.com/package/solid-motionone)\n\n**A tiny, performant animation library for SolidJS. Powered by [Motion One](https://motion.dev/).**\n\n## Introduction\n\nMotion One for Solid is a 5.8kb animation library for SolidJS. It takes advantage of Solid's excellent performance and simple declarative syntax. This package supplies springs, independent transforms, and hardware accelerated animations.\n\n## Installation\n\nMotion One for Solid can be installed via npm:\n\n```bash\nnpm install solid-motionone\n# or\npnpm add solid-motionone\n# or\nyarn add solid-motionone\n```\n\n## Create an animation\n\nImport the `Motion` component and use it anywhere in your Solid components:\n\n```tsx\nimport {Motion} from \"solid-motionone\"\n\nfunction MyComponent() {\n  return \u003cMotion\u003eHello world\u003c/Motion\u003e\n}\n```\n\nThe `Motion` component can be used to create an animatable HTML or SVG element. By default, it will render a `div` element:\n\n```tsx\nimport {Motion} from \"solid-motionone\"\n\nfunction App() {\n  return (\n    \u003cMotion.div\n      animate={{opacity: [0, 1]}}\n      transition={{duration: 1, easing: \"ease-in-out\"}}\n    /\u003e\n  )\n}\n```\n\nBut any HTML or SVG element can be rendered, by defining it like this: `\u003cMotion.button\u003e`\n\nOr like this: `\u003cMotion tag=\"button\"\u003e`\n\n## Transition options\n\nWe can change the type of animation used by passing a `transition` prop.\n\n```tsx\n\u003cMotion\n  animate={{rotate: 90, backgroundColor: \"yellow\"}}\n  transition={{duration: 1, easing: \"ease-in-out\"}}\n/\u003e\n```\n\nBy default transition options are applied to all values, but we can also override on a per-value basis:\n\n```tsx\n\u003cMotion\n  animate={{rotate: 90, backgroundColor: \"yellow\"}}\n  transition={{\n    duration: 1,\n    rotate: {duration: 2},\n  }}\n/\u003e\n```\n\nTaking advantage of Solid's reactivity is just as easy. Simply provide any of the Motion properties as accessors to have them change reactively:\n\n```tsx\nconst [bg, setBg] = createSignal(\"red\")\n\nreturn (\n  \u003cMotion.button\n    onClick={() =\u003e setBg(\"blue\")}\n    animate={{backgroundColor: bg()}}\n    transition={{duration: 3}}\n  \u003e\n    Click Me\n  \u003c/Motion.button\u003e\n)\n```\n\nThe result is a button that begins red and upon being pressed transitions to blue. `animate` doesn't accept an accessor function. For reactive properties simply place signals in the object similar to using style prop.\n\n## Keyframes\n\nValues can also be set as arrays, to define a series of keyframes.\n\n```tsx\n\u003cMotion animate={{x: [0, 100, 50]}} /\u003e\n```\n\nBy default, keyframes are spaced evenly throughout `duration`, but this can be adjusted by providing progress values to `offset`:\n\n```tsx\n\u003cMotion animate={{x: [0, 100, 50]}} transition={{x: {offset: [0, 0.25, 1]}}} /\u003e\n```\n\n## Enter animations\n\nElements will automatically `animate` to the values defined in animate when they're created.\n\nThis can be disabled by setting the `initial` prop to `false`. The styles defined in `animate` will be applied immediately when the element is first created.\n\n```tsx\n\u003cMotion initial={false} animate={{x: 100}} /\u003e\n```\n\n## Exit animations\n\nWhen an element is removed with `\u003cShow\u003e` it can be animated out with the `Presence` component and the `exit` prop:\n\n```tsx\nimport {createSignal, Show} from \"solid-js\"\nimport {Motion, Presence} from \"solid-motionone\"\n\nfunction App() {\n  const [isShown, setShow] = createSignal(true)\n\n  return (\n    \u003cdiv\u003e\n      \u003cPresence exitBeforeEnter\u003e\n        \u003cShow when={isShown()}\u003e\n          \u003cMotion\n            initial={{opacity: 0, scale: 0.6}}\n            animate={{opacity: 1, scale: 1}}\n            exit={{opacity: 0, scale: 0.6}}\n            transition={{duration: 0.3}}\n          /\u003e\n        \u003c/Show\u003e\n      \u003c/Presence\u003e\n      \u003cbutton onClick={() =\u003e setShow(p =\u003e !p)}\u003eToggle\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n`exit` can be provided a `transition` of its own, that override the component's `transition`:\n\n```tsx\n\u003cPresence\u003e\n  \u003cShow when={isShown()}\u003e\n    \u003cMotion\n      animate={{opacity: 1}}\n      exit={{opacity: 0, transition: {duration: 0.8}}}\n    /\u003e\n  \u003c/Show\u003e\n\u003c/Presence\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs-community%2Fsolid-motionone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolidjs-community%2Fsolid-motionone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs-community%2Fsolid-motionone/lists"}