{"id":16446026,"url":"https://github.com/qwtel/rxjs-create-tween","last_synced_at":"2025-03-21T05:30:34.679Z","repository":{"id":27374889,"uuid":"113591377","full_name":"qwtel/rxjs-create-tween","owner":"qwtel","description":"Create observables that sample from a easing function on every animation frame.","archived":false,"fork":false,"pushed_at":"2023-01-03T15:14:34.000Z","size":610,"stargazers_count":9,"open_issues_count":13,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T17:49:18.526Z","etag":null,"topics":["animation","animation-frame","easing-functions","observable","robert-penner","rxjs","tween"],"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/qwtel.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":"2017-12-08T15:55:20.000Z","updated_at":"2024-07-11T17:51:54.000Z","dependencies_parsed_at":"2023-01-14T06:36:33.798Z","dependency_job_id":null,"html_url":"https://github.com/qwtel/rxjs-create-tween","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qwtel%2Frxjs-create-tween","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qwtel%2Frxjs-create-tween/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qwtel%2Frxjs-create-tween/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qwtel%2Frxjs-create-tween/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qwtel","download_url":"https://codeload.github.com/qwtel/rxjs-create-tween/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244115430,"owners_count":20400573,"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","animation-frame","easing-functions","observable","robert-penner","rxjs","tween"],"created_at":"2024-10-11T09:46:11.323Z","updated_at":"2025-03-21T05:30:34.303Z","avatar_url":"https://github.com/qwtel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RxJS Create Tween\n\n[![Build Status](https://travis-ci.org/qwtel/rxjs-create-tween.svg?branch=master)](https://travis-ci.org/qwtel/rxjs-create-tween)\n\nCreates an observable that emits samples from an easing function on every animation frame\nfor a fixed duration.\n\nSupports arbitrary easing functions. Works well with [`tween-functions`](https://www.npmjs.com/package/tween-functions).\n\n## Example\n```js\nimport { createTween } from 'rxjs-create-tween';\nimport { easeOutSine } from 'tween-functions';\n\nclick$\n  .switchMap(() =\u003e {\n    const startX   =   0; // px\n    const endX     = 300; // px\n    const duration = 250; // ms\n    return createTween(easeOutSine, startX, endX, duration);\n  })\n  .subscribe({\n    // emits a value on every animation frame\n    next: (x) =\u003e {\n      // guaranteed to start with `startX` and end with `endX`.\n      el.style.transform = `translateX(${x})`;\n    },\n    // completes 1 frame after the last value was emitted\n    complete: () =\u003e {\n      el.style.transform = '';\n      el.classList.add('completed');\n    },\n  });\n```\n\n## Source\n```js\nexport function createTween(easingFunction, b, c, d, s) {\n  return Observable.create(function(observer) {\n    let startTime;\n    let id = requestAnimationFrame(function sample(time) {\n      startTime = startTime || time;\n      const t = time - startTime;\n      if (t \u003c d) {\n        observer.next(easingFunction(t, b, c, d, s));\n        id = requestAnimationFrame(sample);\n      } else {\n        observer.next(easingFunction(d, b, c, d, s));\n        id = requestAnimationFrame(function() {\n          return observer.complete();\n        });\n      }\n    });\n    return function() {\n      if (id) {\n        cancelAnimationFrame(id);\n      }\n    };\n  });\n}\n\nexport default createTween;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqwtel%2Frxjs-create-tween","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqwtel%2Frxjs-create-tween","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqwtel%2Frxjs-create-tween/lists"}