{"id":13437356,"url":"https://github.com/souporserious/react-motion-ui-pack","last_synced_at":"2025-03-19T06:31:02.852Z","repository":{"id":34866460,"uuid":"38868450","full_name":"souporserious/react-motion-ui-pack","owner":"souporserious","description":"Wrapper component around React Motion for easier UI transitions","archived":true,"fork":false,"pushed_at":"2018-04-18T00:53:00.000Z","size":463,"stargazers_count":624,"open_issues_count":30,"forks_count":40,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-12T02:23:46.913Z","etag":null,"topics":[],"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/souporserious.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-07-10T07:55:31.000Z","updated_at":"2025-01-01T17:11:02.000Z","dependencies_parsed_at":"2022-08-03T23:00:30.933Z","dependency_job_id":null,"html_url":"https://github.com/souporserious/react-motion-ui-pack","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souporserious%2Freact-motion-ui-pack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souporserious%2Freact-motion-ui-pack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souporserious%2Freact-motion-ui-pack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souporserious%2Freact-motion-ui-pack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/souporserious","download_url":"https://codeload.github.com/souporserious/react-motion-ui-pack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244370966,"owners_count":20442319,"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-07-31T03:00:56.284Z","updated_at":"2025-03-19T06:31:00.156Z","avatar_url":"https://github.com/souporserious.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","UI Animation","Ferramentas"],"sub_categories":["Uncategorized","Form Components"],"readme":"## ☢️ THIS PROJECT IS NO LONGER MAINTAINED 💀\nPlease use [react-spring](https://github.com/drcmda/react-spring) for all of your animation needs.\n\n## React Motion UI Pack\n\n[![npm version](https://badge.fury.io/js/react-motion-ui-pack.svg)](https://badge.fury.io/js/react-motion-ui-pack)\n[![Dependency Status](https://david-dm.org/souporserious/react-motion-ui-pack.svg)](https://david-dm.org/souporserious/react-motion-ui-pack)\n[![CDNJS](https://img.shields.io/cdnjs/v/react-motion-ui-pack.svg)](https://cdnjs.com/libraries/react-motion-ui-pack)\n\n[React Motion](https://github.com/chenglou/react-motion) is an amazing animation library for React. React Motion UI Pack tries to help ease entry level / common use cases with React Motion by providing a higher level way to work with it and create common UI transitions easier. If you need more complex animations I suggest using React Motion directly.\n\n### Usage\n\n`yarn add react-motion-ui-pack`\n\n`npm install react-motion-ui-pack --save`\n\n```html\n\u003cscript src=\"https://unpkg.com/react-motion-ui-pack/dist/react-motion-ui-pack.js\"\u003e\u003c/script\u003e\n(UMD library exposed as `Transition`)\n```\n\n### Example\n\n```js\n\nimport Transition from 'react-motion-ui-pack'\n\n// Animate a list of items as they are added\n\u003cTransition\n  component=\"ul\"\n  enter={{\n    opacity: 1,\n  }}\n  leave={{\n    opacity: 0,\n  }}\n\u003e  \n  { this.state.items.map(item =\u003e\n      \u003cli key={item.id}\u003e{item.content}\u003c/li\u003e\n    )\n  }\n\u003c/Transition\u003e\n\n// Animate a modal\n\u003cTransition\n  component={false} // don't use a wrapping component\n  enter={{\n    opacity: 1,\n    translateY: spring(0, {stiffness: 400, damping: 10})\n  }}\n  leave={{\n    opacity: 0,\n    translateY: 250\n  }}\n\u003e\n  { this.state.modalOpen \u0026\u0026\n    \u003cdiv key=\"modal\" className=\"modal__content\"\u003e\n      // modal code\n    \u003c/div\u003e\n  }\n\u003c/Transition\u003e\n```\n\n## Props\n\n#### `component`: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, isElement])\n\nDefine the wrapping tag/component around the children passed in, pass `false` to not use a wrapping component at all for only child components.\n\n#### `runOnMount`: PropTypes.bool\n\nDetermines whether the animation runs on mount or not\n\n#### `appear`: PropTypes.object\n\nWhere the animation starts, defaults to leave value if nothing passed\n\n#### `enter`: PropTypes.object\n\nThe resting state of the animation\n\n#### `leave`: PropTypes.object\n\nThe ending value of the animation\n\n#### `onEnter`: PropTypes.func\n\nCallback right before an element enters, passes in your current animating values `onEnter={currentValues =\u003e /* do something */}` called only once.\n\n#### `onLeave`: PropTypes.func\n\nSame as `onEnter`, but fires multiple times as an element is leaving.\n\n## FAQ\n\n#### How `appear`, `enter`, \u0026 `leave` work\n\nThese values are automatically wrapped in a React Motion `spring` to keep the API simple. If you need a custom config you can pass your own spring e.g. `spring(22, { stiffness: 30, damping: 300 })`.\n\n#### My animation values aren't being applied to any elements\n\nIf you decide to use a custom component as a child, `style` and `dimensions` props will be passed into that component for you to use however you want. If you pass a regular React DOM element, `\u003cTransition/\u003e` will take care of applying the values for you by cloning your element and passing it in.\n\n## Running Locally\n\nclone repo\n\n`git clone git@github.com:souporserious/react-motion-ui-pack.git`\n\nmove into folder\n\n`cd ~/react-motion-ui-pack`\n\ninstall dependencies\n\n`npm install`\n\nrun dev mode\n\n`npm run dev`\n\nopen your browser and visit: `http://localhost:8080/`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouporserious%2Freact-motion-ui-pack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsouporserious%2Freact-motion-ui-pack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouporserious%2Freact-motion-ui-pack/lists"}