{"id":13544265,"url":"https://github.com/pleasetrythisathome/react.animate","last_synced_at":"2025-04-25T15:09:19.722Z","repository":{"id":15186906,"uuid":"17914932","full_name":"pleasetrythisathome/react.animate","owner":"pleasetrythisathome","description":"state animation plugin for react.js","archived":false,"fork":false,"pushed_at":"2021-10-25T17:47:30.000Z","size":20,"stargazers_count":165,"open_issues_count":1,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-25T15:09:15.401Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/pleasetrythisathome.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":"2014-03-19T18:09:24.000Z","updated_at":"2025-02-16T16:46:56.000Z","dependencies_parsed_at":"2022-09-15T13:30:52.648Z","dependency_job_id":null,"html_url":"https://github.com/pleasetrythisathome/react.animate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleasetrythisathome%2Freact.animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleasetrythisathome%2Freact.animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleasetrythisathome%2Freact.animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleasetrythisathome%2Freact.animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pleasetrythisathome","download_url":"https://codeload.github.com/pleasetrythisathome/react.animate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250840609,"owners_count":21495910,"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":[],"created_at":"2024-08-01T11:00:44.730Z","updated_at":"2025-04-25T15:09:19.703Z","avatar_url":"https://github.com/pleasetrythisathome.png","language":"JavaScript","funding_links":[],"categories":["Awesome React","UI Animation","Ferramentas"],"sub_categories":["Tools","Form Components"],"readme":"React.Animate\n=============\n\nA simple state animation mixin for React.js\n\nPhilosophy\n------------\n\nReact.Animate is a different approach to animate based on state rather than direct DOM mutation using $.animate or similar.\n\nWhile it's great that you can use refs to get DOM nodes after render, the biggest benefit to using react is that there is always a direct, observable, and testable relationship between component props, state, and the rendered output.\n\nMutating the dom directly is an antipattern.\n\nWhat we really want to animate is not the DOM, it's component state.\n\nIf you think about animation as a transition from one state value from another, you can just interpolate state over an interval, and your component can rerender precisely in response to the current component state at every step.\n\nAt it's most simple, React.Animate allows you to transition between one state and another over a set interval. The implementation supports the same syntax as $.animate.\n\nyou can pass either\n\n```javascript\nthis.animate(properties [, duration ] [, easing ] [, complete ] );\n```\n\nor\n\n```javascript\nthis.animate(key, value [, duration ] [, easing ] [, complete ] );\n```\n\nExample\n------------\n\nReact.Animate can be included in any React class by adding it to the mixins array\n\nBy animating state instead of the DOM directly, we can define logic that acts during certain parts of our animations.\n\n```javascript\nvar component = React.createClass({\n  mixins: [React.Animate],\n  getInitialState: function() {\n    return {\n      width: 100\n    };\n  },\n  render: function() {\n    var heightBounds = [50, 100];\n\n    return React.DOM.div({\n      style: {\n        width: this.state.width,\n        height: Math.min(heightBounds[1], Math.max(heightBounds[0], this.state.width / 2))\n      },\n      onClick: this.randomSize\n    });\n  },\n  randomSize: function() {\n    this.animate({\n      width: _.random(20, 300)\n    }, 500, function() {\n      console.log(\"random size reached!\");\n    });\n  }\n});\n```\n\nview in [jsfiddle](http://jsfiddle.net/mWAnw/2/)\n\n\nInstallation\n------------\n\nReact.Animate can be installed with [bower](http://bower.io/) using\n\n```\nbower install react.animate --save\n```\n\nReact.Animate can be installed with [npm](https://www.npmjs.com/) using\n\n```\nnpm install react.animate --save\n```\n\nBoth will automatically pull the required React and Underscore dependencies.\n\nto use React.Animate, include it in your page or build process after React and Underscore\n\nDependencies\n------------\n\n[easing functions](https://github.com/component/ease).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpleasetrythisathome%2Freact.animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpleasetrythisathome%2Freact.animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpleasetrythisathome%2Freact.animate/lists"}