{"id":18335286,"url":"https://github.com/bhovhannes/additween","last_synced_at":"2025-04-06T04:34:03.622Z","repository":{"id":38388662,"uuid":"76232955","full_name":"bhovhannes/additween","owner":"bhovhannes","description":"Additive tweening implementation for smooth animations","archived":false,"fork":false,"pushed_at":"2024-10-29T18:03:37.000Z","size":3519,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T20:10:44.251Z","etag":null,"topics":["animation","framework-agnostic","tweening"],"latest_commit_sha":null,"homepage":null,"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/bhovhannes.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,"publiccode":null,"codemeta":null}},"created_at":"2016-12-12T07:34:48.000Z","updated_at":"2024-10-27T07:12:28.000Z","dependencies_parsed_at":"2023-09-24T06:47:45.525Z","dependency_job_id":"a9234660-5882-4d34-b62c-87a37024c05a","html_url":"https://github.com/bhovhannes/additween","commit_stats":{"total_commits":925,"total_committers":7,"mean_commits":"132.14285714285714","dds":"0.26054054054054054","last_synced_commit":"9b5960e98f6749c404719b2fc7ea9880e0383713"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fadditween","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fadditween/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fadditween/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fadditween/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhovhannes","download_url":"https://codeload.github.com/bhovhannes/additween/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423497,"owners_count":20936622,"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","framework-agnostic","tweening"],"created_at":"2024-11-05T19:54:33.472Z","updated_at":"2025-04-06T04:34:03.246Z","avatar_url":"https://github.com/bhovhannes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# additween\n\n[![NPM version][npm-version-image]][npm-url] [![NPM downloads][npm-downloads-image]][npm-url] [![MIT License][license-image]][license-url] [![Coverage][codecov-image]][codecov-url]\n\nAdditive tweening implementation for smooth animations.\n\nIt combines concurrent animations of the same object into one smooth continuous animation.\n\n## How to install\n\n```bash\nnpm install additween --save\n```\n\n## Why the name?\n\nIn short, **additween** = **Addi**tive + **tween**ing.\n\nSpeaking about animation, inbetweening or **tweening** is the process of generating intermediate frames between two states to give the appearance that the first state evolves smoothly into the second state.\n\n**Additive** algorithm ensures that if some animation process starts while there are some processes still in progress, all these process will be combined to produce a single animation process.\n\nAdditive animation algorithm is described [here](http://iosoteric.com/additive-animations-animatewithduration-in-ios-8/) or in [this video](https://developer.apple.com/videos/wwdc/2014/#236).\n\n## Usage Example\n\nLet's move the span smooth vertically. Create animation object and provide the options. You need to provide at least **onRender** callback:\n\n```javascript\nvar additween = require(\"additween\");\n\nvar mySpan = document.getElementById(\"mySpan\");\n\nfunction onRender(state) {\n  mySpan.style.top = state.top;\n}\n\nvar anim = new additween.AdditiveTweening({\n  onRender: onRender,\n});\n```\n\nNow call **tween** method to start animation:\n\n```javascript\nvar fromState = { top: 0 };\nvar toState = { top: 1000 };\nvar duration = 1000;\n\nanim.tween(fromState, toState, duration);\n```\n\nTo add new animation with another final state, just call it again:\n\n```javascript\nfromState = { top: parseInt(mySpan.style.top) };\ntoState = { top: 2000 };\n\nanim.tween(fromState, toState, duration);\n```\n\n## API\n\n#### anim = new AdditiveTweening(options)\n\nCreates animation object. Possible options:\n\n| Name             | Signature              | Description                                                                                             |\n| :--------------- | :--------------------- | :------------------------------------------------------------------------------------------------------ |\n| **onRender**     | `function(state)`      | (**required**) a callback for rendering current animation state.                                        |\n| **onFinish**     | `function(finalState)` | Fires after the last animation is completed.                                                            |\n| **onCancel**     | `function()`           | Fires if animation is canceled.                                                                         |\n| **stateReducer** | `IStateReducer`        | An object, which provides `clone()` and `reduce()` methods thus implementing `IStateReducer` interface. |\n\n##### State reducers\n\nState reducer is an object, which provides `clone()` and `reduce()` methods thus implementing `IStateReducer` interface.\n\n```typescript\ninterface IStateReducer\u003cT\u003e {\n  clone: (state: T) =\u003e T;\n  reduce: (targetState: T, toState: T, fromState: T, pos: number) =\u003e T;\n}\n```\n\n`clone()` method is called once per each animation frame in order to get full clone of the target animation state.\n\n`reduce()` method is called at least once per each animation frame in order to get animation state for the given tweening position `pos` - a number from [0,1] interval. `targetState` - is the current animation state.\n\nIf there are more than one tweening processes in progress, `reduce()` will be called once for each tweening process during single animation frame.\n\nThe default state reducer is called and exported as `PlainObjectReducer`. Its implementation is below:\n\n```javascript\nvar PlainObjectReducer = {\n  clone: function (obj) {\n    var target = {},\n      key;\n    for (key in obj) {\n      target[key] = obj[key];\n    }\n    return target;\n  },\n\n  reduce: function (targetState, toState, fromState, pos) {\n    var key;\n    for (key in targetState) {\n      targetState[key] -= (toState[key] - fromState[key]) * pos;\n    }\n    return targetState;\n  },\n};\n```\n\nIt can be used to animate states which are plain JavaScript objects with numeric values, such as `{ width: 10, height: 20 }`.\n\n#### anim.tween(fromState, toState, duration, easing)\n\nAnimates object state. `fromState` and `toState` are expected to be the objects with number values, e.g. `{ x: 100, y: 200 }`. `duration` is animation duration in milliseconds.\n\n`easing` is a function used for easing. It could be one of functions described here: https://gist.github.com/gre/1650294) or your own function (assuming it's input and output values are in range `[0, 1]`). Linear easing is the default.\n\n#### anim.isTweening()\n\nReturns `true` if animation process is currently in progress.\n\n#### anim.cancel()\n\nCancels current animation.\n\n#### anim.finish()\n\nPuts animation into the last state.\n\n## Mocks\n\nSee [`additween-mocks`](https://github.com/bhovhannes/additween-mocks)\n\n## Browser support\n\nThis will work for all browsers with `requestAnimationFrame` support (see [here](http://caniuse.com#search=requestAnimationFrame)).\n\nFor the other browsers you will need to polyfill `requestAnimationFrame`. [`raf`](https://www.npmjs.com/package/raf) package provides a good one.\n\n## Thanks\n\nThanks to @alexkuz for the [original implementation](https://github.com/alexkuz/additive-animation).\n\n## License\n\nMIT (http://www.opensource.org/licenses/mit-license.php)\n\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: LICENSE\n[npm-url]: https://www.npmjs.org/package/additween\n[npm-version-image]: https://img.shields.io/npm/v/additween.svg?style=flat\n[npm-downloads-image]: https://img.shields.io/npm/dm/additween.svg?style=flat\n[codecov-url]: https://codecov.io/gh/bhovhannes/additween\n[codecov-image]: https://img.shields.io/codecov/c/github/bhovhannes/additween.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhovhannes%2Fadditween","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhovhannes%2Fadditween","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhovhannes%2Fadditween/lists"}