{"id":13624754,"url":"https://github.com/jeremyckahn/shifty","last_synced_at":"2025-05-13T18:14:21.638Z","repository":{"id":1516379,"uuid":"1774600","full_name":"jeremyckahn/shifty","owner":"jeremyckahn","description":"The fastest TypeScript animation engine on the web","archived":false,"fork":false,"pushed_at":"2025-03-05T15:03:27.000Z","size":8049,"stargazers_count":1545,"open_issues_count":0,"forks_count":86,"subscribers_count":29,"default_branch":"main","last_synced_at":"2025-04-24T04:16:06.177Z","etag":null,"topics":["animation","javascript","shifty","tweening","tweening-engine","typescript"],"latest_commit_sha":null,"homepage":"https://jeremyckahn.github.io/shifty/doc/","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/jeremyckahn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":"FUNDING.yml","license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["jeremyckahn"]}},"created_at":"2011-05-20T02:54:00.000Z","updated_at":"2025-04-21T11:08:39.000Z","dependencies_parsed_at":"2024-08-01T21:45:17.985Z","dependency_job_id":"329b202f-5f3c-440f-b288-dc763a2d4ad4","html_url":"https://github.com/jeremyckahn/shifty","commit_stats":{"total_commits":768,"total_committers":18,"mean_commits":"42.666666666666664","dds":0.07942708333333337,"last_synced_commit":"fee93af69c9b4fa9ad462095920adb558ff19ee3"},"previous_names":[],"tags_count":133,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeremyckahn%2Fshifty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeremyckahn%2Fshifty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeremyckahn%2Fshifty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeremyckahn%2Fshifty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeremyckahn","download_url":"https://codeload.github.com/jeremyckahn/shifty/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250560057,"owners_count":21450173,"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","javascript","shifty","tweening","tweening-engine","typescript"],"created_at":"2024-08-01T21:01:45.959Z","updated_at":"2025-04-24T04:16:33.198Z","avatar_url":"https://github.com/jeremyckahn.png","language":"TypeScript","funding_links":["https://github.com/sponsors/jeremyckahn"],"categories":["TypeScript","javascript","typescript","JavaScript"],"sub_categories":[],"readme":"# Shifty - The fastest TypeScript animation engine on the web\n\n[![Current Shifty version](https://badgen.net/npm/v/shifty)](https://www.npmjs.com/package/shifty)\n\n- `main`: [![CI](https://github.com/jeremyckahn/shifty/workflows/CI/badge.svg?branch=main)](https://github.com/jeremyckahn/shifty/actions?query=workflow%3ACI+branch%3Amain)\n\nShifty is a tweening engine for TypeScript. It is a lightweight library meant\nto be encapsulated by higher level tools. At its core, Shifty provides:\n\n- Best-in-class animation performance\n- Playback control of an individual tween\n- Extensibility hooks for key points in the tween lifecycle\n- `Promise` support for `async`/`await` programming\n\nThis is useful because it is the least amount of functionality needed to build\ncustomizable animations. Shifty is optimized to run with the minimal processing\nand memory overhead.\n\n```js\nimport { tween } from 'shifty'\n;(async () =\u003e {\n  const element = document.querySelector('#tweenable')\n\n  const { tweenable } = await tween({\n    render: ({ scale, x }) =\u003e {\n      element.style.transform = `translateX(${x}px) scale(${scale})`\n    },\n    easing: 'easeInOutQuad',\n    duration: 500,\n    from: { scale: 1, x: 0 },\n    to: { x: 200 },\n  })\n\n  await tweenable.tween({\n    to: { x: 0 },\n  })\n\n  await tweenable.tween({\n    to: { scale: 3 },\n  })\n})()\n```\n\n## Installation\n\n```\nnpm install --save shifty\n```\n\n## Environment compatibility\n\nShifty officially supports Evergreen browsers, Safari, and Node 10 and above.\nInternet Explorer is supported by\n[v2](https://github.com/jeremyckahn/shifty/tree/v2) If you encounter a\nbrowser-specific bug, please [open an issue about\nit](https://github.com/jeremyckahn/shifty/issues/new)!\n\n## Support this project!\n\nShifty is a labor of love that will always be free and open source. If you've\ngotten value out of Shifty, **[please consider supporting the developer with a\nsmall donation](https://github.com/jeremyckahn#please-help-support-my-work)**!\n\n## Developing Shifty\n\nFirst, install the development dependencies via NPM:\n\n```\nnpm ci\n```\n\nOnce those are installed, you can generate `dist/shifty.js` with:\n\n```\nnpm run build\n```\n\nTo run the tests:\n\n```\nnpm test\n```\n\nTo generate the documentation (in `dist/doc`):\n\n```\nnpm run doc\n```\n\n## Loading Shifty\n\nShifty exposes a UMD module, so you can load it however you like:\n\n```javascript\n// ES6\nimport { tween } from 'shifty'\n```\n\nOr:\n\n```javascript\n// AMD\ndefine(['shifty'], function(shifty) {\n  shifty.tween({ from: { x: 0 }, to: { x: 10 } })\n})\n```\n\nOr even:\n\n```javascript\n// CommonJS\nconst { tween } = require('shifty')\n\ntween({ from: { x: 0 }, to: { x: 10 } })\n```\n\n## Using Shifty\n\nSee the [Getting\nStarted](https://jeremyckahn.github.io/shifty/doc/pages/tutorials/getting-started.html)\nguide and check out the API documentation.\n\n### Troubleshooting\n\n#### Jest\n\nWith later versions of Jest [it is\nknown](https://github.com/jeremyckahn/shifty/issues/156) that by default Shifty\nmay cause warnings that look like:\n\n```\nJest has detected the following 1 open handle potentially keeping Jest from exiting:\n```\n\nTo prevent this, use\n[`shouldScheduleUpdate`](https://jeremyckahn.github.io/shifty/doc/shifty.html#.shouldScheduleUpdate)\nin your test setup like so:\n\n```js\nimport { shouldScheduleUpdate } from 'shifty'\n\nafterAll(() =\u003e {\n  shouldScheduleUpdate(false)\n})\n```\n\n## Breaking changes\n\n### From v2 to v3\n\nShifty's legacy version 2 remains available in the\n[v2](https://github.com/jeremyckahn/shifty/tree/v2) branch. Legacy\ndocumentation can be found at:\nhttps://shifty-git-v2-jeremyckahn.vercel.app/\n\n- `Tweenable.formulas` has been renamed to `Tweenable.easing`\n- `tweenConfig.step` has been removed in favor of `tweenConfig.render`\n  (behavior and API is unchanged).\n- `tweenConfig.attachment` has been removed in favor of `tweenConfig.data`\n  (behavior and API is unchanged).\n- `Tweenable#tweenable` has been removed.\n- `Tweenable#set()` is now `Tweenable#setState`.\n- `Tweenable#get()` is now `Tweenable#state` (a getter, not a method).\n- `Tweenable#hasEnded()` is now `Tweenable#hasEnded` (a getter, not a method).\n- `Tweenable#isPlaying()` is now `Tweenable#isPlaying` (a getter, not a\n  method).\n- `Tweenable#setScheduleFunction` has been removed. The static method\n  `Tweenable.setScheduleFunction` method should be used instead.\n- Render handler parameters have been reordered:\n  - In v2, the function signature was `(state: TweenState, data: Data, timeElapsed: number) =\u003e void`\n  - In v3, the function signature was `(state: TweenState, timeElapsed: number, data: Data) =\u003e void`\n- `Scene#play()` has been renamed to `Scene#tween`.\n- `Scene#isPlaying()` is now `Scene#isPlaying` (a getter, not a method).\n- `Scene#playingTweenables()` has been removed.\n- `unsetBezierFunction` has been removed.\n- Shifty \"Core\" build has been removed.\n\n#### Non-breaking changes\n\n- Token extension is now baked into Shifty Core.\n\n## Contributors\n\nTake a look at the [Network](https://github.com/jeremyckahn/shifty/network)\npage to see all of the Shifty contributors.\n\nSpecial thanks goes to [Thomas Fuchs](https://twitter.com/thomasfuchs):\nShifty's easing functions and Bezier curve code was adapted from his awesome\n[Scripty2](https://github.com/madrobby/scripty2) project.\n\n## License\n\nShifty is distributed under the [MIT\nlicense](http://opensource.org/licenses/MIT). You are encouraged to use and\nmodify the code to suit your needs, as well as redistribute it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeremyckahn%2Fshifty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeremyckahn%2Fshifty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeremyckahn%2Fshifty/lists"}