{"id":13529121,"url":"https://github.com/playcanvas/playcanvas-tween","last_synced_at":"2025-06-22T07:08:56.880Z","repository":{"id":16079072,"uuid":"79244696","full_name":"playcanvas/playcanvas-tween","owner":"playcanvas","description":"A tween library for PlayCanvas","archived":false,"fork":false,"pushed_at":"2025-01-30T12:09:45.000Z","size":212,"stargazers_count":64,"open_issues_count":14,"forks_count":44,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-06-14T21:07:47.271Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/playcanvas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-01-17T16:01:51.000Z","updated_at":"2025-04-16T12:21:53.000Z","dependencies_parsed_at":"2022-09-17T01:01:47.769Z","dependency_job_id":"3279ea8c-87fb-4a88-b2e5-1cd08bc3723e","html_url":"https://github.com/playcanvas/playcanvas-tween","commit_stats":{"total_commits":35,"total_committers":14,"mean_commits":2.5,"dds":0.6857142857142857,"last_synced_commit":"de493fd57261c0a96689b61bc91e9c723cdb149f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/playcanvas/playcanvas-tween","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fplaycanvas-tween","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fplaycanvas-tween/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fplaycanvas-tween/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fplaycanvas-tween/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/playcanvas","download_url":"https://codeload.github.com/playcanvas/playcanvas-tween/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playcanvas%2Fplaycanvas-tween/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261250335,"owners_count":23130544,"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-08-01T07:00:33.409Z","updated_at":"2025-06-22T07:08:51.868Z","avatar_url":"https://github.com/playcanvas.png","language":"JavaScript","funding_links":[],"categories":["Extensions and Utilities"],"sub_categories":[],"readme":"# Overview\n\nThis is a tween library for PlayCanvas. You can include `tween.js` in your Editor Project to start using the library.\n\nIf you create your application *after* loading this library, you can call the following method to enable\ntweening on your application:\n\n```javascript\napp.addTweenManager();\n```\n\n# Usage\n\n## Editor \n\nCopy the the [tween.umd.js](./dist/tween.umd.js) file from the build directory into your editor project\n\nTweening `pc.Entity` properties looks like this:\n\n```javascript\nvar tween = entity.tween(fromProperty).to(toProperty, duration, easing);\ntween.start();\n```\n\nFor example, this tweens the entity's local position with duration 1.0 and `SineOut` easing:\n\n```javascript\nvar tween = entity.tween(entity.getLocalPosition()).to({x: 10, y: 0, z: 0}, 1.0, pc.SineOut);\ntween.start();\n```\n\nIf you are dealing with rotations you should use `rotate` instead of `to`. This takes euler angles and uses an internal quaternion or it can take quaternions to slerp between angles. For example:\n\n```javascript\nentity.tween(entity.getLocalEulerAngles()).rotate({x: 0, y: 180, z: 0}, 1.0, pc.Linear);\n```\n\n```javascript\nentity.tween(entity.getLocalRotation()).rotate(targetQuaternionRotation, 1.0, pc.Linear);\n```\n\nYou can also tween properties of any other object not just entities. For example:\n\n```javascript\n// some object with a property called 'value'\nvar data = {\n    value: 0\n};\n\n// create a new tween using pc.Application#tween\n// passing another object as the target. Any properties\n// that are common between the target and the source object\n// will be tweened\napp.tween(data).to({value: 1}, 1.0, pc.BackOut);\n```\n\n## ESM \n\nYou can also use this library as an ES Module, either from withing an ESM Script or an engine only project\n\nSave the esm [`tween.mjs`](./dist/tween.mjs) to your project and import it.\n\n```javascript\nimport { tweenEntity, SineOut } from './tween.mjs'\n\ntweenEntity(entity, entity.getLocalPosition())\n    .to({x: 10}, 1.0, SineOut));\n```\n\nThe ESM won't automatically add `tween()` methods to Entity and Application, however you can manually add these using `addTweenExtensions(pc)`\n\n```javascript\nimport { addTweenExtensions, SineOut } from './tween.mjs'\nimport * as pc from 'playcanvas'\n\n// Adds .tween() to Entity and Application\naddTweenExtensions(pc);\n\nentity.tween(entity.getLocalPosition())\n    .to({x: 10}, 1.0, SineOut));\n```\n\n# Chaining\n\nYou can chain method calls for a tween. For example:\n\n```javascript\n// delay, yoyo and loop tween\nentity\n.tween(entity.getLocalPosition()).to({x: 10, y: 0, z: 0}, 1.0, pc.SineOut)\n.delay(1.0)\n.yoyo(true)\n.loop(true)\n.start();\n```\n\n# Methods\n\n## `start()`\n\nTo start playing a tween call `tween.start()`.\n\n## `stop()`\n\nTo stop a tween  call `tween.stop()`.\n\n## `pause()`\n\nTo pause a tween call `tween.pause()`.\n\n## `resume()`\n\nTo resume a paused tween call `tween.resume()`.\n\n## `delay(duration)`\n\nTo delay a tween call `tween.delay(duration)` where duration is in seconds.\n\n## `repeat(count)`\n\nTo repeat a tween `count` times call `tween.repeat(count)`.\n\n## `loop(true / false)`\n\nTo loop a tween forever call `tween.loop(true)`.\n\n## `yoyo(true / false)`\n\nTo make a tween play in reverse after it finishes call `tween.yoyo(true)`. Note that to actually see the tween play in reverse in the end, you have to either repeat the tween at least 2 times or set it to loop forever. E.g. to only play a tween from start to end and then from end to start 1 time you need to do:\n```javascript\ntween.yoyo(true).repeat(2);\n```\n\n## `reverse()`\n\nTo reverse a tween call `tween.reverse()`.\n\n# Events\n\nTo subscribe to events during Tween execution, use a these methods:\n\n## `onUpdate`\n\nThis is called on every update cycle. You can use this method to manually update something in your code using the tweened value.\nIt provides `dt` argument.\n\nE.g.\n\n```javascript\nvar color = new pc.Color(1, 0, 0);\n\nvar tween = app.tween(color).to(new pc.Color(0, 1, 1), 1, pc.Linear);\ntween.onUpdate((dt) =\u003e {\n    material.diffuse = color;\n    material.update();\n});\n```\n\n## `onComplete`\n\nThis is called when the tween is finished. If the tween is looping the `onLoop` will be called instead.\n\nE.g.\n\n```javascript\nentity\n.tween(entity.getLocalPosition())\n.to({x: 10, y: 0, z: 0}, 1, pc.Linear)\n.onComplete(() =\u003e {\n   console.log('tween completed');\n});\n```\n\n## `onLoop`\n\nThis is called whenever a looping tween finishes a cycle. This is called instead of the `onComplete` for looping tweens.\n\nE.g.\n\n```javascript\nentity\n.tween(entity.getLocalPosition())\n.to({x: 10, y: 0, z: 0}, 1, pc.Linear)\n.loop(true)\n.onLoop(() =\u003e {\n   console.log('tween loop');\n});\n```\n\n# Easing methods\n\nThere are various easing methods you can use that change the way that values are interpolated. The available easing methods are:\n\n- `pc.Linear`\n- `pc.QuadraticIn`\n- `pc.QuadraticOut`\n- `pc.QuadraticInOut`\n- `pc.CubicIn`\n- `pc.CubicOut`\n- `pc.CubicInOut`\n- `pc.QuarticIn`\n- `pc.QuarticOut`\n- `pc.QuarticInOut`\n- `pc.QuinticIn`\n- `pc.QuinticOut`\n- `pc.QuinticInOut`\n- `pc.SineIn`\n- `pc.SineOut`\n- `pc.SineInOut`\n- `pc.ExponentialIn`\n- `pc.ExponentialOut`\n- `pc.ExponentialInOut`\n- `pc.CircularIn`\n- `pc.CircularOut`\n- `pc.CircularInOut`\n- `pc.BackIn`\n- `pc.BackOut`\n- `pc.BackInOut`\n- `pc.BounceIn`\n- `pc.BounceOut`\n- `pc.BounceInOut`\n- `pc.ElasticIn`\n- `pc.ElasticOut`\n- `pc.ElasticInOut`\n\n# Tutorial\n\nYou can find a tutorial with various use cases [here][1].\n\n[1]: http://developer.playcanvas.com/en/tutorials/tweening/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaycanvas%2Fplaycanvas-tween","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplaycanvas%2Fplaycanvas-tween","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaycanvas%2Fplaycanvas-tween/lists"}