{"id":13810542,"url":"https://github.com/ismail9k/vue3-spring","last_synced_at":"2026-01-18T02:31:15.347Z","repository":{"id":42667221,"uuid":"268317901","full_name":"ismail9k/vue3-spring","owner":"ismail9k","description":"A spring-physics based animation library, and more","archived":false,"fork":false,"pushed_at":"2023-03-04T22:03:00.000Z","size":641,"stargazers_count":53,"open_issues_count":6,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-08T19:58:55.059Z","etag":null,"topics":["animation-components","animation-library","hacktoberfest","hacktoberfest2021","parallax","spring-physics","spring-props","vue","vue3"],"latest_commit_sha":null,"homepage":"https://ismail9k.github.io/vue3-spring","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ismail9k.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-05-31T16:22:53.000Z","updated_at":"2024-10-29T16:03:11.000Z","dependencies_parsed_at":"2024-08-04T02:05:21.522Z","dependency_job_id":"bd96a01b-e8fc-48c1-a109-afd42e6a46aa","html_url":"https://github.com/ismail9k/vue3-spring","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismail9k%2Fvue3-spring","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismail9k%2Fvue3-spring/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismail9k%2Fvue3-spring/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismail9k%2Fvue3-spring/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ismail9k","download_url":"https://codeload.github.com/ismail9k/vue3-spring/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254121188,"owners_count":22018118,"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-components","animation-library","hacktoberfest","hacktoberfest2021","parallax","spring-physics","spring-props","vue","vue3"],"created_at":"2024-08-04T02:00:58.956Z","updated_at":"2026-01-18T02:31:15.302Z","avatar_url":"https://github.com/ismail9k.png","language":"TypeScript","funding_links":[],"categories":["Packages","TypeScript"],"sub_categories":[],"readme":"# Vue 3 Spring\n\nA spring-physics based animation library, in addition to more components, to cover most of the UI related animations, when CSS is not enough for you.\nIt shipped with Composition-API-friendly [animation functions](#animation-functions) to support model-based API, in additional to [animation components](#animation-components) for the ones who prefer the template-based way\nThis library represents the Vue3 alternative for [react-spring](https://www.react-spring.io/) and [react-motion](https://github.com/chenglou/react-motion).\n\n## Animation Functions\n\nComposition-API-friendly functions to support model-based API\n\n- [`Spring`](#spring)\n- [`Parallax`](#parallax)\n- [`Present`](#present)\n\n### Spring\n\nThe primary animation component, which is a spring-physics based. Its main role is to move property from one value to another, with more natural animation and easing.\n\n#### Using\n\n`spring` function task [`SpringValue`](#spring-value) as its first argument, and [`SpringProps`](#spring-props) optional as the second argument.\n\n##### Single Value\n\n```js\nimport { spring } from 'vue3-spring';\n\nexport default {\n  name: 'App',\n  setup() {\n    // If you passed to the spring a number as it's value\n    // it return a Vue ref object.\n    const mySpring = spring(100 /* [, config] */);\n\n    // To update the spring desired value\n    mySpring.value = 200;\n\n    return { mySpring };\n  },\n};\n```\n\n##### Multiple Values\n\n```js\nimport { spring } from 'vue3-spring';\n\nexport default {\n  name: 'App',\n  setup() {\n    // If you passed to the spring an object of values\n    // it return a Vue reactive object, for those values\n    const mySpring = spring({ x: 100, y: 20 }, { dumping: 5 });\n\n    // To update the spring desired values\n    mySpring.x = 200;\n    mySpring.y = -10;\n\n    return { mySpring };\n  },\n};\n```\n\n##### Reactive Values\n\n`spring` also accepts Vue reactive data type (`reactive`, `ref`) as its value. It will automatically update the current spring value, when the reactive values changed.\n\n```js\nimport { ref, reactive } from 'vue';\nimport { spring } from 'vue3-spring';\n\nexport default {\n  setup() {\n    const mouse = reactive({ x: 0, y: 0 });\n    const mouseSpring = spring(mouse);\n\n    // this will update mouseSpring as well\n    mouse.x = 5;\n\n    const singleValue = ref(0);\n    const singleValueSpring = spring(singleValue);\n\n    // this will update singleValueSpring as well\n    singleValue.value = 5;\n\n    return {\n      mouseSpring,\n    };\n  },\n};\n```\n\n#### Spring Props\n\nTo config the spring physical properties, and initial values\n\n| prop            | type                 | default | description                                                                     |\n| --------------- | -------------------- | ------- | ------------------------------------------------------------------------------- |\n| from            | `number` \\| `object` | 0       | init value                                                                      |\n| stiffness       | `number`             | 170     | spring stiffness, in kg / s^2                                                   |\n| damping         | `number`             | 26      | damping constant, in kg / s                                                     |\n| mass            | `number`             | 1       | spring mass                                                                     |\n| velocity        | `number`             | 0       | initial velocity                                                                |\n| precision       | `number`             | 2       | number of digits to round the values, increase the number to increase precision |\n| framesPerSecond | `number`             | 60      | display refresh rate                                                            |\n| isPendulum      | `boolean`            | false   | is the animation will start agin after is dumped                                |\n\n#### Spring Value\n\nSpring value could be `number`, `object`, Vue `reactive` object, or Vue `ref` object.\n\n| type       | return type | auto update | multiple values |\n| ---------- | ----------- | ----------- | --------------- |\n| `number`   | `ref`       | false       | false           |\n| `object`   | `reactive`  | false       | true            |\n| `ref`      | `ref`       | true        | false           |\n| `reactive` | `reactive`  | true        | true            |\n\n### Parallax\n\nUsed move property from one value to another, based on the scrolled distance.\n\n#### COMING SOON\n\n### Present\n\nUsed to apply CSS animation class to an element, when it enters the view-port.\n\n#### COMING SOON\n\n## Animation Components\n\nComponents for the ones who prefer the template-based way\n\n- [`SpringProvider`](#springprovider)\n- [`ParallaxProvider`](#parallaxprovider)\n- [`PresentProvider`](#presentprovider)\n\n### SpringProvider\n\n`SpringProvider` accepts [props](#spring-props) same the [`spring`](#spring) function\n\n#### Using\n\n##### Single Value\n\n```vue\n\u003ctemplate\u003e\n  \u003cspring-provider v-slot=\"{ value }\" :to=\"positionX\" :damping=\"10\"\u003e\n    \u003cdiv class=\"circle\" :style=\"{ transform: `translateX(${value}px)` }\"\u003e\u003c/div\u003e\n  \u003c/spring-provider\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { SpringProvider } from 'vue3-spring';\n\nexport default {\n  name: 'App',\n  components: { SpringProvider },\n  data: () =\u003e ({\n    positionX: 100,\n  }),\n};\n\u003c/script\u003e\n```\n\n##### Multiple Values\n\n```vue\n\u003ctemplate\u003e\n  \u003cspring-provider v-slot=\"{ x, y }\" :to=\"mouse\" :damping=\"10\"\u003e\n    \u003cdiv class=\"circle\" :style=\"{ transform: `translate(${x}px, ${y}px)` }\"\u003e\u003c/div\u003e\n  \u003c/spring-provider\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { SpringProvider } from 'vue3-spring';\n\nexport default {\n  name: 'App',\n  components: { SpringProvider },\n  data: () =\u003e ({\n    mouse: { x: 0, y: 0 },\n  }),\n};\n\u003c/script\u003e\n```\n\n### ParallaxProvider\n\n#### COMING SOON\n\n### PresentProvider\n\n#### COMING SOON\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismail9k%2Fvue3-spring","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fismail9k%2Fvue3-spring","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismail9k%2Fvue3-spring/lists"}