{"id":21769430,"url":"https://github.com/sylvenas/react-magic","last_synced_at":"2025-04-09T22:15:44.469Z","repository":{"id":17673366,"uuid":"82452974","full_name":"Sylvenas/react-magic","owner":"Sylvenas","description":"A collection of magic animations for react components.","archived":false,"fork":false,"pushed_at":"2022-02-21T03:43:15.000Z","size":1073,"stargazers_count":266,"open_issues_count":14,"forks_count":27,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-09T22:15:40.744Z","etag":null,"topics":["animation","css-animations","css-in-js","inline-styles","magic","react"],"latest_commit_sha":null,"homepage":"https://sylvenas.github.io/react-magic","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/Sylvenas.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":"2017-02-19T11:04:30.000Z","updated_at":"2025-02-28T11:09:35.000Z","dependencies_parsed_at":"2022-07-26T19:02:01.588Z","dependency_job_id":null,"html_url":"https://github.com/Sylvenas/react-magic","commit_stats":null,"previous_names":["react-map/react-magic"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sylvenas%2Freact-magic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sylvenas%2Freact-magic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sylvenas%2Freact-magic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sylvenas%2Freact-magic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sylvenas","download_url":"https://codeload.github.com/Sylvenas/react-magic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119289,"owners_count":21050755,"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","css-animations","css-in-js","inline-styles","magic","react"],"created_at":"2024-11-26T14:08:42.625Z","updated_at":"2025-04-09T22:15:44.440Z","avatar_url":"https://github.com/Sylvenas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-magic\n\n[![npm version](https://badge.fury.io/js/react-magic.svg)](https://www.npmjs.com/package/react-magic)\n\u003ca href=\"https://github.com/facebook/react\"\u003e\u003cimg src=\"https://img.shields.io/badge/react-v15.4.2-blue.svg\" alt=\"react\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/miniMAC/magic\"\u003e\u003cimg src=\"https://img.shields.io/badge/magic-v1.2.0-blue.svg\" alt=\"react\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Khan/aphrodite\"\u003e\u003cimg src=\"https://img.shields.io/badge/aphrodite-v1.1.0-blue.svg\" alt=\"react\"\u003e\u003c/a\u003e\n\nA collection of magic animations for react components. Although React provides a way to implement arbitrary animations,\nit is not an easy task to do it, even for simple animations. That's where react-magic package comes in. It supports inline styles work with [aphrodite](https://github.com/Khan/aphrodite).\nMost animations was implemented base on [magic](https://github.com/miniMAC/magic).\n\n\u003e How to work with [tailwindcss](https://tailwindcss.com/)? Try [tailwindcss-magic](https://github.com/Sylvenas/tailwindcss-magic).\n\n\u003cdiv style=\"text-align:center\" align=\"center\"\u003e\n  \u003cimg src=\"https://p1.music.126.net/T4JA1NmZlSTZZZK4EgBncA==/109951164699178486.gif\" /\u003e\n\u003c/div\u003e    \n   \n## Demo online\n\nA demo is available on the Github Pages webpage for react-magic [Check out demo](https://lit-forest.github.io/react-magic/react-magic.html)!\n\n## Installation\n\nReact-magic is distributed via [npm](https://www.npmjs.com/package/react-magic):\n\n```\nnpm install --save react-magic\n```\n\n## Usage\n\nYou can import each animation directly from the main package\n\n```js\nimport { swap } from \"react-magic\";\n```\n\nor you can import a specific animation directly\n\n```js\nimport swap from \"react-magic/lib/magic/swap\";\n```\n\nusage with [Aphrodite](https://github.com/Khan/aphrodite)\n\n```js\nimport React, { Component, PropTypes } from \"react\";\nimport { StyleSheet, css } from \"aphrodite\";\n\nimport { swap } from \"react-magic\";\n\nconst styles = StyleSheet.create({\n  magic: {\n    animationName: swap,\n    animationDuration: \"1s\",\n  },\n});\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cdiv className={css(styles.magic)}\u003e\n          \u003ch2\u003ereact-magic\u003c/h2\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n## Animations\n\n```\n.\n├── magic\n│   |── magic\n│   |── twisterInDown\n│   |── twisterInUp\n│   └── swap\n├── bling\n│   |── puffIn\n│   |── puffOut\n│   |── vanishIn\n│   └── vanishOut\n├── staticEffects\n│   |── openDownLeft\n│   |── openDownLeftReturn\n│   |── openDownRight\n│   |── openDownRightReturn\n│   |── openUpLeft\n│   |── openUpLeftReturn\n│   |── openUpRight\n│   └── openUpRightReturn\n├── staticEffectsOut\n│   |── openDownLeftOut\n│   |── openDownRightOut\n│   |── openUpLeftOut\n│   └── openUpRightOut\n├── perspective\n│   |── perspectiveDown\n│   |── perspectiveDownReturn\n│   |── perspectiveLeft\n│   |── perspectiveLeftReturn\n│   |── perspectiveRight\n│   |── perspectiveRightReturn\n│   |── perspectiveUp\n│   └── perspectiveUpReturn\n├── rotate\n│   |── rotateDownIn\n│   |── rotateDownOut\n│   |── rotateLeftIn\n│   |── rotateLeftOut\n│   |── rotateRightIn\n│   |── rotateRightOut\n│   |── rotateUpIn\n│   └── rotateUpOut\n├── slide\n│   |── slideDown\n│   |── slideDownReturn\n│   |── slideLeft\n│   |── slideLeftReturn\n│   |── slideRight\n│   |── slideRightReturn\n│   |── slideUp\n│   └── slideUpReturn\n├── math\n│   |── foolishIn\n│   |── foolishOut\n│   |── holeIn\n│   |── holeOut\n│   |── swashIn\n│   └── swashOut\n├── tin\n│   |── tinDownIn\n│   |── tinDownOut\n│   |── tinLeftIn\n│   |── tinLeftOut\n│   |── tinRightIn\n│   |── tinRightOut\n│   |── tinUpIn\n│   └── tinUpOut\n├── bomb\n│   |── bombLeftOut\n│   └── bombRightOut\n├── boing\n│   |── boingInUp\n│   └── boingOutDown\n├── space\n│   |── spaceInDown\n│   |── spaceInLeft\n│   |── spaceInRight\n│   |── spaceInUp\n│   |── spaceOutDown\n│   |── spaceOutLeft\n│   |── spaceOutRight\n│   └── spaceOutUp\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvenas%2Freact-magic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsylvenas%2Freact-magic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvenas%2Freact-magic/lists"}