{"id":19220041,"url":"https://github.com/nativescript-community/tween","last_synced_at":"2025-05-13T01:10:08.212Z","repository":{"id":56447870,"uuid":"215075721","full_name":"nativescript-community/tween","owner":"nativescript-community","description":"A NativeScript plugin that natively wraps tween.js, a tweening engine for easy animations, incorporating optimized Robert Penner's equations.","archived":false,"fork":false,"pushed_at":"2024-01-10T17:43:43.000Z","size":7088,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-13T01:09:56.715Z","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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2019-10-14T15:13:17.000Z","updated_at":"2024-01-10T15:40:56.000Z","dependencies_parsed_at":"2025-04-20T21:44:49.672Z","dependency_job_id":null,"html_url":"https://github.com/nativescript-community/tween","commit_stats":null,"previous_names":["farfromrefug/nativescript-tween"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ftween","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ftween/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ftween/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ftween/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/tween/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851070,"owners_count":21973674,"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-09T14:33:46.132Z","updated_at":"2025-05-13T01:10:08.184Z","avatar_url":"https://github.com/nativescript-community.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["UI Plugins"],"readme":"# NativeScript Tween\n\n[![npm downloads](https://img.shields.io/npm/dm/@nativescript-community/tween.svg)](https://www.npmjs.com/package/@nativescript-community/tween)\n[![npm downloads](https://img.shields.io/npm/dt/@nativescript-community/tween.svg)](https://www.npmjs.com/package/@nativescript-community/tween)\n[![npm](https://img.shields.io/npm/v/@nativescript-community/tween.svg)](https://www.npmjs.com/package/@nativescript-community/tween)\n\nA NativeScript plugin that natively wraps [tween.js](https://github.com/tweenjs/tween.js/), a tweening engine for easy animations, incorporating optimized Robert Penner's equations.\n\n| \u003cimg src=\"images/demo-ios.gif\" height=\"500\" /\u003e | \u003cimg src=\"images/demo-android.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo | \n\n## Table of Contents\n1. [Installation](#installation)\n2. [Configuration](#configuration)\n3. [API](#api)\n4. [Usage in Angular](#usage-in-angular)\n5. [Usage in Vue](#usage-in-vue)\n6. [Usage in Svelte](#usage-in-svelte)\n7. [Usage in React](#usage-in-react)\n8. [Demos](#demos)\n\n## Installation\n\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/tween`\n\n## Configuration\n\nNo futher configuration is needed.\n\n## API\n\nThis plugin exports the same API as `tween.js`.\n\nRefer to the offical [tween.js user guide](https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md) additional examples and information.\n\nFor now grouping, chaining, repeating... are not supported. Just basic tweening.\n\nAny view property that is a number should technically be able to be tweened. All of these have not been tested, but some of the common ones that work are:\n - `width`\n - `height`\n - `rotate`\n - `scaleX`\n - `scaleY`\n - `translateX`\n - `translateY`\n - `opacity`\n\nThe following are available tween easing options:\n\n - `TWEEN.Easing.Linear.None`\n - `TWEEN.Easing.Quadratic.In`\n - `TWEEN.Easing.Quadratic.Out`\n - `TWEEN.Easing.Cubic.In`\n - `TWEEN.Easing.Cubic.Out`\n - `TWEEN.Easing.Quartic.In`\n - `TWEEN.Easing.Quartic.Out`\n - `TWEEN.Easing.Quintic.In`\n - `TWEEN.Easing.Quintic.Out`\n - `TWEEN.Easing.Sinusoidal.In`\n - `TWEEN.Easing.Sinusoidal.Out`\n - `TWEEN.Easing.Exponential.In`\n - `TWEEN.Easing.Exponential.Out`\n - `TWEEN.Easing.Circular.In`\n - `TWEEN.Easing.Circular.Out`\n - `TWEEN.Easing.Elastic.In`\n - `TWEEN.Easing.Elastic.Out`\n - `TWEEN.Easing.Back.In`\n - `TWEEN.Easing.Back.Out`\n - `TWEEN.Easing.Bounce.In`\n - `TWEEN.Easing.Bounce.Out`\n\n## Usage in Angular\n\nThe following is a very simple example of getting tweens to run in your Angular project.\n\nCreate a view that you would like to animate as well as a button to trigger it in your component's HTML file.\n```xml\n\u003cStackLayout\u003e\n    \u003cButton text=\"Start Animation\" (tap)=\"startTween()\" verticalAlignment=\"top\"\u003e\u003c/Button\u003e\n\n    \u003cAbsoluteLayout #box width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"center\"\u003e\u003c/AbsoluteLayout\u003e\n\u003c/StackLayout\u003e\n```\n\nReference the view you want to animate in your component's typescript file with the following (and add required imports):\n\n```typescript\nboxRef: AbsoluteLayout;\n@ViewChild(\"box\", { static: true }) boxElementRef: ElementRef;\n\nngOnInit(): void {\n    this.boxRef = this.boxElementRef.nativeElement;\n}\n```\n\nImport the tween module in your component's typescript file:\n```typescript\nimport { TWEEN } from '@nativescript-community/tween';\n```\n\nCreate a function that will contain the call to run the tween.\n\n```typescript\nstartTween() {\n    new TWEEN.Tween({ value: 30 })\n        .easing(TWEEN.Easing.Quadratic.In)\n        .to({ value: 300 }, 1000)\n        .onStart(() =\u003e {\n            console.log(\"The tween has stated...\");\n        })\n        .onComplete(() =\u003e {\n            console.log(\"The tween has completed...\");\n        })\n        .onUpdate(obj =\u003e {\n            this.boxRef.width = obj.value;\n        })\n        .start();\n}\n```\n\nThat should be all you need! Now, when you tap the button `Start Animation`, the box's width should go from `30` to `300`.\n\nLook in the `demo-ng` directory for a more advanced demo.\n\n## Usage in Vue\n\nThe following is a very simple example of getting tweens to run in your Vue project.\n\nCreate a view that you would like to animate as well as a button to trigger it.\n```xml\n\u003cStackLayout\u003e\n    \u003cButton text=\"Start Animation\" @tap=\"startTween\" /\u003e\n    \u003cAbsoluteLayout ref=\"box\" width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"center\"\u003e\u003c/AbsoluteLayout\u003e\n\u003c/StackLayout\u003e\n```\n\nReference the view you want to animate in your component `computed` section:\n\n```typescript\n// ...\ncomputed: {\n    boxRef(){\n        return this.$refs.box.nativeView;\n    }     \n},\n// ...\n```\n\nImport the tween module in your component:\n```typescript\nimport { TWEEN } from '@nativescript-community/tween';\n```\n\nCreate a function that will contain the call to run the tween.\n\n```typescript\nstartTween() {\n    new TWEEN.Tween({ value: 30 })\n        .easing(TWEEN.Easing.Quadratic.In)\n        .to({ value: 300 }, 1000)\n        .onStart(() =\u003e {\n            console.log(\"The tween has stated...\");\n        })\n        .onComplete(() =\u003e {\n            console.log(\"The tween has completed...\");\n        })\n        .onUpdate(obj =\u003e {\n            this.boxRef.width = obj.value;\n        })\n        .start();\n}\n```\n\nThat should be all you need! Now, when you tap the button `Start Animation`, the box's width should go from `30` to `300`.\n\nLook in the `demo-vue` directory for a more advanced demo.\n\n## Usage in Svelte\n\nThe following is a very simple example of getting tweens to run in your Svelte project.\n\nCreate a view that you would like to animate as well as a button to trigger it.\n```xml\n\u003cstackLayout\u003e\n    \u003cbutton text=\"Start Animation\" on:tap=\"{startTween}\" /\u003e\n    \u003cabsoluteLayout bind:this=\"{boxRef}\" width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"center\"\u003e\u003c/absoluteLayout\u003e\n\u003c/stackLayout\u003e\n```\n\nReference the view you want to animate in your component.\n\n```typescript\nlet boxRef: AbsoluteLayout;\nonMount(() =\u003e {\n    boxRef = boxRef.nativeView;\n})\n```\n\nImport the tween module in your component:\n```typescript\nimport { TWEEN } from '@nativescript-community/tween';\n```\n\nCreate a function that will contain the call to run the tween.\n\n```typescript\nfunction startTween() {\n    new TWEEN.Tween({ value: 30 })\n        .easing(TWEEN.Easing.Quadratic.In)\n        .to({ value: 300 }, 1000)\n        .onStart(() =\u003e {\n            console.log(\"The tween has stated...\");\n        })\n        .onComplete(() =\u003e {\n            console.log(\"The tween has completed...\");\n        })\n        .onUpdate(obj =\u003e {\n            boxRef.width = obj.value;\n        })\n        .start();\n}\n```\n\nThat should be all you need! Now, when you tap the button `Start Animation`, the box's width should go from `30` to `300`.\n\nLook in the `demo-svelte` directory for a more advanced demo.\n\n## Usage in React\n\nThe following is a very simple example of getting tweens to run in your React project.\n\nCreate a view that you would like to animate as well as a button to trigger it.\n```xml\n\u003cstackLayout\u003e\n    \u003cbutton text=\"Start Animation\" onTap={startTween} /\u003e\n    \u003cabsoluteLayout ref={boxRef} width=\"30\" height=\"30\" backgroundColor=\"red\" horizontalAlignment=\"center\" verticalAlignment=\"middle\"\u003e\u003c/absoluteLayout\u003e\n\u003c/stackLayout\n```\n\nReference the view you want to animate in your component.\n\n```typescript\nconst boxRef = React.useRef\u003cNSVElement\u003cAbsoluteLayout\u003e\u003e(null);\n```\n\nImport the tween module in your component:\n```typescript\nimport { TWEEN } from '@nativescript-community/tween';\n```\n\nCreate a function that will contain the call to run the tween.\n\n```typescript\nfunction startTween() {\n    new TWEEN.Tween({ value: 30 })\n        .easing(TWEEN.Easing.Quadratic.In)\n        .to({ value: 300 }, 1000)\n        .onStart(() =\u003e {\n            console.log(\"The tween has stated...\");\n        })\n        .onComplete(() =\u003e {\n            console.log(\"The tween has completed...\");\n        })\n        .onUpdate(obj =\u003e {\n            boxRef.current!.nativeView.width = obj.value;\n        })\n        .start();\n}\n```\n\nThat should be all you need! Now, when you tap the button `Start Animation`, the box's width should go from `30` to `300`.\n\nLook in the `demo-react` directory for a more advanced demo\n\n## Demos\n\nThis repository includes Angular, Vue.js, Svelte, and React demos. In order to run these execute the following in your shell:\n```shell\n$ git clone https://github.com/@nativescript-community/tween\n$ cd tween\n$ npm i\n$ npm run build\n$ cd demo-ng # or demo-vue or demo-svelte or demo-react\n$ ns run ios|android\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Ftween","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Ftween","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Ftween/lists"}