{"id":22014061,"url":"https://github.com/beeplin/vue-tweener","last_synced_at":"2025-05-06T22:14:59.152Z","repository":{"id":57396732,"uuid":"70673042","full_name":"beeplin/vue-tweener","owner":"beeplin","description":"Tweening vue's reactive data over time.","archived":false,"fork":false,"pushed_at":"2016-11-12T14:15:54.000Z","size":11,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-06T22:14:52.200Z","etag":null,"topics":[],"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/beeplin.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}},"created_at":"2016-10-12T07:10:03.000Z","updated_at":"2018-10-07T17:12:28.000Z","dependencies_parsed_at":"2022-09-13T12:02:26.144Z","dependency_job_id":null,"html_url":"https://github.com/beeplin/vue-tweener","commit_stats":null,"previous_names":["beeplin/vue-tweening"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeplin%2Fvue-tweener","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeplin%2Fvue-tweener/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeplin%2Fvue-tweener/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beeplin%2Fvue-tweener/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beeplin","download_url":"https://codeload.github.com/beeplin/vue-tweener/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252776600,"owners_count":21802469,"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":[],"created_at":"2024-11-30T03:26:04.872Z","updated_at":"2025-05-06T22:14:59.128Z","avatar_url":"https://github.com/beeplin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-tweener\n\nTween Vue's reactive data over time. A Vue wrapper for [tween.js](https://github.com/tweenjs/tween.js).\n\n## Install\n\n```bash\nnpm i -g vue-tweener\n```\n\n## Plugin into Vue\n\n```js\nimport Vue from 'vue'\nimport VueTweener from 'vue-tweener'\n\nVue.use(VueTweener)\n```\n\n## Usage\n\n```js\ndata() {\n  return {\n    source: 1,\n    test1: 0,\n    test2: {a: 1, b: 2},\n    test3: 0,\n    test4: {a: 1, b: 2}\n  }\n}\n\n// Declarative syntax:\ntween: {\n  tweened() { // when this.source changes, refer to this.tweened to get the tweened source\n    return {\n      watch: 'source', // NOTE: can only watch expression returning single number, not object or others.\n      duration: 1000, // 1500 by default\n      easing: this.$tween.Easing.Quadratic.InOut, // this.$tween.Easing.Quadratic.Out by default\n      rounded: false // true by default, rounded to integer\n    }\n  }\n}\n\n// Imperative syntax:\nInSomeMethodsOrHooks() {\n\n  // tween one number to a string output, which is the name of the tweened outcome\n  this.$tween({\n    start: 1,\n    end: 100,\n    duration: 2000,\n    easing: this.$tween.Easing.Quadratic.Out,\n    rounded: true,\n    output: 'test1' //this.test1 as the tweened outcome. test1 must be in the data list.\n  });\n\n  // tween multiple numbers in an object at the same time\n  this.$tween({\n    start: {a: 0.1, b: 0.2},\n    end: {a: 1, b: -1},\n    duration: 1000,\n    easing: this.$tween.Easing.Quadratic.InOut,\n    rounded: false,\n    output: 'test2' //this.test2 as the tweened outcome. test2 must be in the data list.\n  });\n\n  // tween one number with callback syntax for post-processing\n  this.$tween({\n    start: 1,\n    end: 100,\n    duration: 5000,\n    easing: this.$tween.Easing.Quadratic.Out,\n    rounded: false,\n    output: (value) =\u003e this.test3 = value * 2 // test3 must be in the data list.\n  });\n\n  // tween multiple numbers in an object at the same time, with callback syntax for post-processing\n  this.$tween({\n    start: {a: 1, b: 2},\n    end: {a: 10, b: -20},\n    duration: 2000,\n    easing: this.$tween.Easing.Quadratic.InOut,\n    rounded: false,\n    output: (value) =\u003e {\n      this.test4.a = this.$tween.toInteger(value.a)\n      this.test4.b = Number(value.b.toFixed(0)) // test4 must be in the data list.\n    }\n  });\n}\n```\n\n## Injected Globals\n\n`this.$tween.Easing`: equivalent to `TWEEN.Easing`;\n\n`this.$tween.toInteger()`: use this when you don't set `rouned: true` but still want integers.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeeplin%2Fvue-tweener","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeeplin%2Fvue-tweener","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeeplin%2Fvue-tweener/lists"}