{"id":27398036,"url":"https://github.com/devin6391/react-animation-suite","last_synced_at":"2026-04-30T10:07:23.152Z","repository":{"id":126606608,"uuid":"145018135","full_name":"devin6391/react-animation-suite","owner":"devin6391","description":"Highly customizable and developer friendly animation library for React","archived":false,"fork":false,"pushed_at":"2019-02-13T06:11:29.000Z","size":624,"stargazers_count":1,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T12:01:48.362Z","etag":null,"topics":["animation","customizable","developer-friendly","react-animations","react-transition-group","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://devin6391.github.io/react-animation-suite","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/devin6391.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","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":"2018-08-16T17:13:40.000Z","updated_at":"2018-11-15T15:02:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"eedf9d3a-f3cc-498d-961e-7097bd2fa3bd","html_url":"https://github.com/devin6391/react-animation-suite","commit_stats":{"total_commits":75,"total_committers":3,"mean_commits":25.0,"dds":0.1466666666666666,"last_synced_commit":"5bd13408c1f6700c608a0c050f2a7e71cb10632a"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devin6391%2Freact-animation-suite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devin6391%2Freact-animation-suite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devin6391%2Freact-animation-suite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devin6391%2Freact-animation-suite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devin6391","download_url":"https://codeload.github.com/devin6391/react-animation-suite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248806773,"owners_count":21164566,"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","customizable","developer-friendly","react-animations","react-transition-group","reactjs","typescript"],"created_at":"2025-04-14T01:28:45.488Z","updated_at":"2026-04-30T10:07:18.103Z","avatar_url":"https://github.com/devin6391.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/devin6391/react-animation-suite.svg?branch=master)](https://travis-ci.org/devin6391/react-animation-suite) [![Coverage Status](https://coveralls.io/repos/github/devin6391/react-animation-suite/badge.svg)](https://coveralls.io/github/devin6391/react-animation-suite) [![npm version](https://badge.fury.io/js/react-animation-suite.svg)](https://badge.fury.io/js/react-animation-suite)\n\n# React Animation Suite\n\n## Finally an animation library which is developer friendly!\n\nThis is a customisable developer-friendly library for animating react components. This library is unopinionated about what should be the theory of animation, rather it focuses on how it should be implemented in React.\n\n## Usage\n\n#### Install\n\n    npm i react-animation-suite -g\n        OR\n    yarn add react-animation-suite\n\n#### Importing\n\n    import { Slider } from \"react-animation-suite\"\n        OR\n    import { Slider } from \"react-transition-suite/dist/lib/Slider\"\n\n#### Using\n\nSay you have a component whose JSX is like below:\n\n    \u003cdiv className=\"container\"\u003e\n        \u003cWannabeSlider {...props} /\u003e\n    \u003c/div\u003e\n\nNow you can slide the WannabeSlider like this:\n\n    \u003cdiv className=\"container\"\u003e\n      \u003cSlider {...sliderProps} direction={0} childProps={{height: 100, width: 100, transitionTime: 300}}\u003e\n        \u003cWannabeSlider {...props} /\u003e\n      \u003c/Slider\u003e\n    \u003c/div\u003e\n\n## Prior learnings required from a developer implementing it:\n\n- ReactJS\n- Javascript\n- CSS\n\n  ** Yes, that’s it! **\n\n\u003e You don’t need to know complicated physics concepts like spring, animation basics, using react component's lifecycle methods, nothing! Just plug and play.\n\n## Problem Statement\n\n- Animation libraries are very opinionated about how animations should be done, how to implement timings, stiffness, etc.\n- Almost all libraries require a lot of learning before implementing.\n- Animation libraries tend to do magic underneath, reading their source code is a difficult task if you want to know their internal working. So it is difficult to contribute in them.\n- Implementing any animation library requires a developer to implement it from starting phase of development of target component. Implementing a library in the middle or end stage of development is very tough.\n- Some animation libraries create dom element and try to handle async processes. This should ideally be a part of developer’s app.\n\n### Solution proposed in this library:\n\n- Do not create DOM elements for consumer(developer implementing this library), many Slider libraries do so.\n- Do not handle dom events, observables, timeouts or any async operation for consumer. If something can cause bad user experience then throw an error or give a warning.\n- Take least data from consumer.\n- Provide more control to consumer.\n- Taking data or providing controls should be done only through props. In case of HOCs, it should be simple json config data.\n- Animation should be generic for any scenario that a developer may face, but it should be specific for a particular animation type, ex. Slider.\n- Expressing the implementation of animation should be as easy as possible, preferably plain js or css properties should be written.\n- **Most important of all** - Applying animation should be like decorating a component. Animation components should not affect the logic of developer's component and it should not be thought prior to development of any component.\n- [Checkout the codesandbox](https://codesandbox.io/embed/7377yqr9vj). Keep your eyes on two components - _SliderWithAnimation_ and _SliderWithoutAnimation_. Just check the render method of both(rest of the code is just any other react typescript app). Check how _SingleElement_ is written in both, and you will know how easy it is to implement _Slider_ provided from this library.\n\n#### Try it out yourself:\n\n[![Edit 7377yqr9vj](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/7377yqr9vj)\n\n#### Documentations exported components:\n\n- [Slider](/src/Slider/README.md)\n\n# Features\n\n- For now we have only Slider component.\n\n### Tech\n\n- [ReactJS] - Obvious!\n- [React Transition Group] - This library is being used internally. This is a transition state management library and is very simple. Please read about how to use this in [CONTRIBUTING.md][contri].\n- [Typescript] - This won't be downloaded as dependency, but just to point out - I am using typescript and I would suggest other developers to use typescript as it makes life so good!!!\n\n##### Don't get intimidated by typescript if you don't know it. You can use this library in your **plain javascript** project too!\n\n\u003e Note -- There is no flow implementation as of now but if someone can contribute for that, it will be great.\n\n#### Want to contribute? Great!\n\nPlease read [CONTRIBUTING.md][contri].\n\n#### Special thanks to [TypeScript library starter](https://github.com/alexjoverm/typescript-library-starter) for simplifying the process to create a javascript library with typescript.\n\n## Author - [Vineet Dev](mailto:vineetdev2008@gmailcom)\n\nI am currently working in Microsoft and I am a big enthusiast of javascript.\n\n[reactjs]: https://reactjs.org/\n[react transition group]: https://reactcommunity.org/react-transition-group/\n[typescript]: https://www.typescriptlang.org/\n[contri]: CONTRIBUTING.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevin6391%2Freact-animation-suite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevin6391%2Freact-animation-suite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevin6391%2Freact-animation-suite/lists"}