{"id":13532042,"url":"https://github.com/solidjs-community/solid-spring","last_synced_at":"2025-07-28T06:05:47.112Z","repository":{"id":48410342,"uuid":"456502557","full_name":"solidjs-community/solid-spring","owner":"solidjs-community","description":"Like react-spring, but for SolidJS.","archived":false,"fork":false,"pushed_at":"2024-03-03T23:33:54.000Z","size":248,"stargazers_count":84,"open_issues_count":7,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-07-19T21:07:00.443Z","etag":null,"topics":["animation","react-spring","solidjs","spring"],"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/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":"2022-02-07T12:47:30.000Z","updated_at":"2025-07-08T19:16:51.000Z","dependencies_parsed_at":"2023-01-22T15:00:11.812Z","dependency_job_id":"7d537a15-c684-4ffc-9d55-00201be51321","html_url":"https://github.com/solidjs-community/solid-spring","commit_stats":{"total_commits":38,"total_committers":1,"mean_commits":38.0,"dds":0.0,"last_synced_commit":"4662846133c82e8170c4024d0493d114ed66bdd3"},"previous_names":["solidjs-community/solid-spring","aslemammad/solid-spring"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/solidjs-community/solid-spring","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-spring","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-spring/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-spring/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-spring/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solidjs-community","download_url":"https://codeload.github.com/solidjs-community/solid-spring/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs-community%2Fsolid-spring/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266802654,"owners_count":23986384,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","react-spring","solidjs","spring"],"created_at":"2024-08-01T07:01:07.770Z","updated_at":"2025-07-28T06:05:47.060Z","avatar_url":"https://github.com/solidjs-community.png","language":"TypeScript","readme":"\n\u003ch1 align=\"center\"\u003esolid-spring\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eA port of react-spring, for SolidJS\u003c/h3\u003e\n\n`solid-spring` is a spring-physics first animation library for SolidJS based on react-spring/core.\n\n\u003e This an experimental project that was made to be submitted in hack.solidjs.com, feel free to create github ticket\n\nThe API looks like this:\n\n```jsx\nconst styles = createSpring({\n  from: {\n    opacity: 0\n  },\n  to: {\n    opacity: 1\n  }\n})\n\n\u003canimated.div style={styles()} /\u003e\n```\n\nThe API is similar to what we have in react-spring, with small differences to make the library compatible with SolidJS\n\n## Preview\nClick on the below gifs for exploring the code of each preview (ported from Poimandres examples).\n\n\n\u003cp align=\"middle\"\u003e\n\u003ca href=\"https://codesandbox.io/s/spring-gestures-5xb9p8\"\u003e\u003cimg src=\"https://i.imgur.com/qLKJod3.gif\" width=\"400\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/spring-gestures-cards-vhitbu\"\u003e\u003cimg src=\"https://i.imgur.com/H6nXQEq.gif\" width=\"400\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Install\n\n```shell\nnpm install solid-spring\n```\n## Examples\n\n[Hello (opacity animation)](https://codesandbox.io/s/hello-qe3eq5?file=/index.tsx)\n\u003cbr /\u003e\n[Svg (animating svg elements)](https://codesandbox.io/s/svg-omnp4c?file=/index.tsx)\n\u003cbr /\u003e\n[Numbers (non style use case)](https://codesandbox.io/s/numbers-kbc57h?file=/index.tsx)\n\n## API\n\n### `createSpring`\n\u003e Turns values into animated-values.\n\n```jsx\nimport { createSpring, animated } from \"solid-spring\";\n\nfunction ChainExample() {\n  const styles = createSpring({\n    loop: true,\n    to: [\n      { opacity: 1, color: '#ffaaee' },\n      { opacity: 0, color: 'rgb(14,26,19)' },\n    ],\n    from: { opacity: 0, color: 'red' },\n  })\n\n  return \u003canimated.div style={styles()}\u003eI will fade in and out\u003c/animated.div\u003e\n}\n```\n`createSpring` also takes a function in case you want to pass a reactive value as a style!\n```jsx\nconst [disabled, setDisabled] = createSignal(false)\n\nconst styles = createSpring(() =\u003e ({\n  pause: disabled(),\n}))\n```\n### `createSprings`\n\u003e Creates multiple springs, each with its own config. Use it for static lists, etc.\n\nSimilar to `useSprings` in react-spring, It takes number or a function that returns a number (for reactivity) as the first argument, and a list of springs or a function that returns a spring as the second argument.\n\n```jsx\nfunction createSprings\u003cProps extends CreateSpringsProps\u003e(\n  lengthFn: number | (() =\u003e number),\n  props: Props[] \u0026 CreateSpringsProps\u003cPickAnimated\u003cProps\u003e\u003e[]\n): Accessor\u003cSpringValues\u003cPickAnimated\u003cProps\u003e\u003e[]\u003e \u0026 {\n  ref: SpringRefType\u003cPickAnimated\u003cProps\u003e\u003e;\n};\n\nfunction createSprings\u003cProps extends CreateSpringsProps\u003e(\n  lengthFn: number | (() =\u003e number),\n  props: (i: number, ctrl: Controller) =\u003e Props\n): Accessor\u003cSpringValues\u003cPickAnimated\u003cProps\u003e\u003e[]\u003e \u0026 {\n  ref: SpringRefType\u003cPickAnimated\u003cProps\u003e\u003e;\n};\n```\n","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs-community%2Fsolid-spring","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolidjs-community%2Fsolid-spring","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs-community%2Fsolid-spring/lists"}