{"id":20056214,"url":"https://github.com/devgru/redux-tween","last_synced_at":"2025-05-05T13:33:39.858Z","repository":{"id":57351823,"uuid":"82385139","full_name":"devgru/redux-tween","owner":"devgru","description":"Tween Redux store state 🕛🕑🕓🕕🕗🕙🕛","archived":false,"fork":false,"pushed_at":"2017-10-10T00:20:04.000Z","size":1120,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-17T18:11:55.323Z","etag":null,"topics":["animation","redux","tweening"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devgru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-18T12:27:49.000Z","updated_at":"2018-12-26T10:48:56.000Z","dependencies_parsed_at":"2022-09-18T23:50:51.390Z","dependency_job_id":null,"html_url":"https://github.com/devgru/redux-tween","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devgru%2Fredux-tween","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devgru%2Fredux-tween/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devgru%2Fredux-tween/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devgru%2Fredux-tween/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devgru","download_url":"https://codeload.github.com/devgru/redux-tween/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252506682,"owners_count":21759099,"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","redux","tweening"],"created_at":"2024-11-13T12:52:30.793Z","updated_at":"2025-05-05T13:33:39.486Z","avatar_url":"https://github.com/devgru.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux Tween\n\n\u003e Tween store state.\n\u003e\n\u003e Library is experimental and may not meet your expectations.\n\u003e\n\u003e If you need a simple way to animate several parameters in React-based elements try [Jeremy Stucki's approach](https://bl.ocks.org/herrstucki/27dc76b6f8411b4725bb) using well-known [React Motion](https://github.com/chenglou/react-motion) library.\n\n\u003cimg src=\"https://raw.githubusercontent.com/devgru/redux-tween/master/counter.gif\" alt=\"Counter Demo\" width=\"120\"\u003e\n\nRedux Tween provides a way to change state in Redux store smoothly, interpolating states in between.\n\nTo achieve this Redux Tween either enhances store or wraps some of action creators and reducers (i.e. some of your [ducks](https://github.com/erikras/ducks-modular-redux)).\n\n## How it works\n\nRedux Tween uses wrapped reducer to calculate next state. Instead of immediately applying new state, Redux Tween launches transition to push interpolated states on every frame.\n\nRedux Tween uses [d3-transition](https://github.com/d3/d3-transition) to start and interrupt transitions. Redux Tween allows running one transition per reducer, interrupting previous transition if necessary.\n\nRedux Tween uses [d3-interpolate](https://github.com/d3/d3-interpolate) which allows interpolating between numbers, strings, colors, dates. Most importantly, it supports objects and arrays interpolation so you can interpolate custom nested data structures (even the store itself).\n\n## Installing\n\n```sh\n$ yarn add redux-tween\n# or\n$ npm install --save redux-tween\n```\n\n## Integration and usage\n\n- [Basic](./docs/BASIC.md), store-based integration.\n- [Advanced](./docs/ADVANCED.md), per-reducer integration.\n\n## API Reference\n\nIs [here](./docs/API.md).\n\n## Running examples\n\n```sh\n$ cd examples/store\n$ # or\n$ cd examples/action-and-reducer\n$ yarn\n$ yarn start\n```\n\n## TODO\n\n- Add basic/advanced integrations comparison;\n- More tests;\n- Better examples;\n- Improve examples and dependencies organization (300 MiB is too much);\n- Check for corner cases;\n- Rewrite in TS.\n\n## Development\n\nYour input is highly appreciated.\n\nThis library is experimental, bug reports and PRs are welcome. I'd be happy to help you integrating Redux Tween into other software.\n\nTo modify library, follow these steps:\n\n* Install dependencies: `yarn`;\n* Develop;\n* Run tests: `yarn test`;\n* Build `yarn build`.\n\n## License\n\nMIT © [Dmitriy Semyushkin](https://devg.ru)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevgru%2Fredux-tween","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevgru%2Fredux-tween","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevgru%2Fredux-tween/lists"}