{"id":18419052,"url":"https://github.com/kazuma512/react-animations","last_synced_at":"2025-04-07T13:31:28.076Z","repository":{"id":176370244,"uuid":"648983232","full_name":"kazuma512/react-animations","owner":"kazuma512","description":"React Animations is a library of customizable animations for React components. It provides a simple way to add visually appealing transitions and animations to your app, without having to spend hours writing your own CSS animations.","archived":false,"fork":false,"pushed_at":"2023-06-03T12:08:47.000Z","size":113,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T19:03:41.711Z","etag":null,"topics":["animation","css","javascript","kazuma512","library","npm"],"latest_commit_sha":null,"homepage":"https://animate.style/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kazuma512.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-06-03T12:08:17.000Z","updated_at":"2024-09-16T19:20:42.000Z","dependencies_parsed_at":"2024-01-28T16:02:31.764Z","dependency_job_id":null,"html_url":"https://github.com/kazuma512/react-animations","commit_stats":null,"previous_names":["uchiha123456/react-animations","kazuma512/react-animations"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazuma512%2Freact-animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazuma512%2Freact-animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazuma512%2Freact-animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazuma512%2Freact-animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kazuma512","download_url":"https://codeload.github.com/kazuma512/react-animations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247661710,"owners_count":20975106,"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","javascript","kazuma512","library","npm"],"created_at":"2024-11-06T04:15:39.758Z","updated_at":"2025-04-07T13:31:27.665Z","avatar_url":"https://github.com/kazuma512.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 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### 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\n\n```js\nimport { bounce } from 'react-animations';\nimport Radium from 'radium';\n\nconst styles = {\n  bounce: {\n    animation: 'x 1s',\n    animationName: Radium.keyframes(bounce, 'bounce')\n  }\n}\n```\n\n### Usage with 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\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## Animations\n\nBelow is a list of all available animations\n\n`bouceOut`\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazuma512%2Freact-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkazuma512%2Freact-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazuma512%2Freact-animations/lists"}