{"id":15414854,"url":"https://github.com/lxsmnsyc/solid-auto-animate","last_synced_at":"2025-06-15T20:34:16.773Z","repository":{"id":44381337,"uuid":"494770048","full_name":"lxsmnsyc/solid-auto-animate","owner":"lxsmnsyc","description":"SolidJS bindings for FormKit's AutoAnimate","archived":false,"fork":false,"pushed_at":"2024-01-28T03:46:48.000Z","size":184,"stargazers_count":36,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-04T14:36:25.606Z","etag":null,"topics":["animation","solid-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/lxsmnsyc.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,"publiccode":null,"codemeta":null}},"created_at":"2022-05-21T11:57:42.000Z","updated_at":"2025-05-16T16:08:53.000Z","dependencies_parsed_at":"2024-10-20T15:51:48.783Z","dependency_job_id":null,"html_url":"https://github.com/lxsmnsyc/solid-auto-animate","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"c874ff55d6d7c633f74010d8a1742e2c2c63c4f6"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/lxsmnsyc/solid-auto-animate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-auto-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-auto-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-auto-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-auto-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxsmnsyc","download_url":"https://codeload.github.com/lxsmnsyc/solid-auto-animate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-auto-animate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260046103,"owners_count":22950801,"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","solid-js"],"created_at":"2024-10-01T17:05:03.733Z","updated_at":"2025-06-15T20:34:16.718Z","avatar_url":"https://github.com/lxsmnsyc.png","language":"TypeScript","readme":"# solid-auto-animate\n\n\u003e SolidJS bindings for FormKit's AutoAnimate\n\n[![NPM](https://img.shields.io/npm/v/solid-auto-animate.svg)](https://www.npmjs.com/package/solid-auto-animate) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-auto-animate/tree/main/examples/demo)\n\n## Install\n\n```bash\nnpm install --save solid-js @formkit/auto-animate solid-auto-animate\n```\n\n```bash\nyarn add solid-js @formkit/auto-animate solid-auto-animate\n```\n\n```bash\npnpm add solid-js @formkit/auto-animate solid-auto-animate\n```\n\n## Usage\n\n### As directive\n\n```js\nimport { createSignal } from 'solid-js';\nimport { autoAnimate } from 'solid-auto-animate';\n\nfunction App() {\n  // Required to prevent TS from removing the directive\n  autoAnimate;\n\n  const [items, setItems] = createSignal([0, 1, 2]);\n  const add = () =\u003e setItems((current) =\u003e [...current, current.length]);\n\n  return (\n    \u003c\u003e\n      \u003cul use:autoAnimate={/* optional config */}\u003e\n        \u003cFor each={items()}\u003e\n          {(item) =\u003e \u003cli\u003e{item}\u003c/li\u003e}\n        \u003c/For\u003e\n      \u003c/ul\u003e\n      \u003cbutton onClick={add}\u003eAdd number\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### As primitive\n\n```js\nimport { createSignal } from 'solid-js';\nimport { useAutoAnimate } from 'solid-auto-animate';\n\nfunction App() {\n  const [items, setItems] = createSignal([0, 1, 2]);\n  const add = () =\u003e setItems((current) =\u003e [...current, current.length])\n\n  let parent;\n\n  useAutoAnimate(() =\u003e parent, /* optional config */)\n\n  return (\n    \u003c\u003e\n      \u003cul ref={parent}\u003e\n        \u003cFor each={items()}\u003e\n          {(item) =\u003e \u003cli\u003e{item}\u003c/li\u003e}\n        \u003c/For\u003e\n      \u003c/ul\u003e\n      \u003cbutton onClick={add}\u003eAdd number\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## License\n\nMIT © [lxsmnsyc](https://github.com/lxsmnsyc)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Fsolid-auto-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flxsmnsyc%2Fsolid-auto-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Fsolid-auto-animate/lists"}