{"id":15131029,"url":"https://github.com/formidablelabs/react-animations","last_synced_at":"2025-09-28T21:30:40.799Z","repository":{"id":46227420,"uuid":"68654825","full_name":"FormidableLabs/react-animations","owner":"FormidableLabs","description":"🎊 A collection of animations for inline style libraries","archived":true,"fork":false,"pushed_at":"2022-08-19T13:22:42.000Z","size":132,"stargazers_count":3058,"open_issues_count":12,"forks_count":161,"subscribers_count":74,"default_branch":"master","last_synced_at":"2025-01-08T21:43:49.570Z","etag":null,"topics":["animation","react","react-animations"],"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/FormidableLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-19T23:21:24.000Z","updated_at":"2024-12-27T15:37:34.000Z","dependencies_parsed_at":"2022-08-03T17:31:08.299Z","dependency_job_id":null,"html_url":"https://github.com/FormidableLabs/react-animations","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FormidableLabs","download_url":"https://codeload.github.com/FormidableLabs/react-animations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234563130,"owners_count":18853058,"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","react","react-animations"],"created_at":"2024-09-26T03:21:26.395Z","updated_at":"2025-09-28T21:30:35.510Z","avatar_url":"https://github.com/FormidableLabs.png","language":"JavaScript","readme":"[![Maintenance Status][maintenance-image]](#maintenance-status)\n\n# react-animations\n\n\nA collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from [animate.css](https://daneden.github.io/animate.css/).\n\n[Check out the interactive demo](http://react-animations.herokuapp.com/).\n\n[Explore component collection](https://bit.dev/formidablelabs/react-animations).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bit.dev/formidablelabs/react-animations\"\u003e\u003cimg src=\"https://i.imagesup.co/images2/1934ceb412dc8bf060b488ba037d7302a8a64087.gif\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n### Usage\n\nYou can import each animation directly from the main package\n\n```js\nimport { fadeIn } from 'react-animations'\n```\n\nor you can import a specific animation directly\n\n```js\nimport fadeIn from 'react-animations/lib/fade-in'\n```\n\n\n### Usage with [Radium](https://github.com/FormidableLabs/radium)\n\n```js\nimport React from 'react';\nimport { bounce } from 'react-animations';\nimport Radium, {StyleRoot} from 'radium';\n\nconst styles = {\n  bounce: {\n    animation: 'x 1s',\n    animationName: Radium.keyframes(bounce, 'bounce')\n  }\n}\n\nclass Test extends React.Component {\n  render() {\n    \u003cStyleRoot\u003e\n      \u003cdiv className=\"test\" style={styles.bounce}\u003e\n      \u003c/div\u003e\n    \u003c/StyleRoot\u003e\n  }\n}\n\n```\n\n### Usage with [Aphrodite](https://github.com/Khan/aphrodite)\n\n```js\nimport { bounce } from 'react-animations';\nimport { StyleSheet, css } from 'aphrodite';\n\nconst styles = StyleSheet.create({\n  bounce: {\n    animationName: bounce,\n    animationDuration: '1s'\n  }\n})\n```\n\n### Usage with [JSS](https://github.com/cssinjs/react-jss)\n\n```js\nimport { bounce } from 'react-animations';\nimport jss from 'jss'\nimport preset from 'jss-preset-default'\n\njss.setup(preset())\n\nconst {classes} = jss.createStyleSheet({\n  '@keyframes bounce': bounce,\n  bounce: {\n    animationName: 'bounce',\n    animationDuration: '1s',\n  },\n}).attach()\n```\n\n### Usage with [`styled-components`](https://github.com/styled-components/styled-components)\n\n```js\nimport styled, { keyframes } from 'styled-components';\nimport { bounce } from 'react-animations';\n\nconst bounceAnimation = keyframes`${bounce}`;\n\nconst BouncyDiv = styled.div`\n  animation: 1s ${bounceAnimation};\n`;\n```\n\n### Usage with [`fela-js`](https://github.com/robinweser/fela)\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { createRenderer } from 'fela';\nimport { createComponent, Provider } from 'react-fela';\nimport { bounce } from 'react-animations';\n\nconst mapStylesToProps = ({ background, height, width }, renderer) =\u003e ({\n\tanimationName: renderer.renderKeyframe(() =\u003e bounce, {}),\n\tanimationDuration: '2s',\n\tbackground,\n\theight,\n\twidth,\n});\n\nconst BouncingDiv = createComponent(mapStylesToProps, 'div');\n\nrender(\n\t\u003cProvider renderer={createRenderer()}\u003e\n\t\t\u003cBouncingDiv background=\"red\" height=\"100px\" width=\"100px\" /\u003e\n\t\u003c/Provider\u003e,\n\tdocument.getElementById('root'),\n);\n```\n\n## Animations\n\nBelow is a list of all available animations\n\n`bounceOut`\n\n`bounce`\n\n`bounceIn`\n\n`bounceInDown`\n\n`bounceInLeft`\n\n`bounceInRight`\n\n`bounceInUp`\n\n`bounceOutDown`\n\n`bounceOutLeft`\n\n`bounceOutRight`\n\n`bounceOutUp`\n\n`fadeIn`\n\n`fadeInDown`\n\n`fadeInDownBig`\n\n`fadeInLeft`\n\n`fadeInLeftBig`\n\n`fadeInRight`\n\n`fadeInRightBig`\n\n`fadeInUp`\n\n`fadeInUpBig`\n\n`fadeOut`\n\n`fadeOutDown`\n\n`fadeOutDownBig`\n\n`fadeOutLeft`\n\n`fadeOutLeftBig`\n\n`fadeOutRight`\n\n`fadeOutRightBig`\n\n`fadeOutUp`\n\n`fadeOutUpBig`\n\n`flash`\n\n`flip`\n\n`flipInX`\n\n`flipInY`\n\n`flipOutX`\n\n`flipOutY`\n\n`headShake`\n\n`hinge`\n\n`jello`\n\n`lightSpeedIn`\n\n`lightSpeedOut`\n\n`pulse`\n\n`rollIn`\n\n`rollOut`\n\n`rotateIn`\n\n`rotateInDownLeft`\n\n`rotateInDownRight`\n\n`rotateInUpLeft`\n\n`rotateInUpRight`\n\n`rotateOut`\n\n`rotateOutDownLeft`\n\n`rotateOutDownRight`\n\n`rotateOutUpLeft`\n\n`rotateOutUpRight`\n\n`rubberBand`\n\n`shake`\n\n`slideInDown`\n\n`slideInLeft`\n\n`slideInRight`\n\n`slideInUp`\n\n`slideOutDown`\n\n`slideOutLeft`\n\n`slideOutRight`\n\n`slideOutUp`\n\n`swing`\n\n`tada`\n\n`wobble`\n\n`zoomIn`\n\n`zoomInDown`\n\n`zoomInLeft`\n\n`zoomInRight`\n\n`zoomInUp`\n\n`zoomOut`\n\n`zoomOutDown`\n\n`zoomOutLeft`\n\n`zoomOutRight`\n\n`zoomOutUp`\n\n\n## Merge\n\nreact-animations also exports a `merge` function that takes two animations and returns a new animation that combines the transforms from both. This is experimental and wont work (well) with animations that have conflicting transforms, such as `fadeIn` and `fadeOut`. The merged animation can be used just like any of the imported animations.\n\n\n```js\n\nimport { merge, tada, flip } from 'react-animations';\nconst tadaFlip = merge(tada, flip);\n```\n\n### Maintenance Status\n\n**Archived:** This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!\n\n[maintenance-image]: https://img.shields.io/badge/maintenance-archived-red.svg\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Freact-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformidablelabs%2Freact-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Freact-animations/lists"}