{"id":16370277,"url":"https://github.com/cyan33/react-animation-wrapper","last_synced_at":"2026-03-14T10:33:56.662Z","repository":{"id":84133396,"uuid":"115802678","full_name":"cyan33/react-animation-wrapper","owner":"cyan33","description":":crystal_ball: Components animation wrapper done right","archived":false,"fork":false,"pushed_at":"2018-03-07T21:26:15.000Z","size":333,"stargazers_count":11,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T07:21:35.198Z","etag":null,"topics":["animation","css","react","react-components-wrapper"],"latest_commit_sha":null,"homepage":"https://cyan33.github.io/react-animation-wrapper/","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/cyan33.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-30T14:41:22.000Z","updated_at":"2018-11-25T15:26:43.000Z","dependencies_parsed_at":"2023-06-07T21:45:19.912Z","dependency_job_id":null,"html_url":"https://github.com/cyan33/react-animation-wrapper","commit_stats":{"total_commits":36,"total_committers":2,"mean_commits":18.0,"dds":0.02777777777777779,"last_synced_commit":"d47a011635244255521f6fca47b4e617df3ccabb"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyan33%2Freact-animation-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyan33%2Freact-animation-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyan33%2Freact-animation-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyan33%2Freact-animation-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cyan33","download_url":"https://codeload.github.com/cyan33/react-animation-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221843044,"owners_count":16890250,"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","react","react-components-wrapper"],"created_at":"2024-10-11T03:04:32.720Z","updated_at":"2025-10-09T17:16:50.436Z","avatar_url":"https://github.com/cyan33.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-animation-wrapper\n\nA declarative set of react components wrapper to bring in animation, like animate.css.\n\nCheck the demo page [here](https://cyan33.github.io/react-animation-wrapper/)\n\n![npm version](https://img.shields.io/npm/v/react-animation-wrapper.svg)\n![downloads per months](https://img.shields.io/npm/dm/react-animation-wrapper.svg)\n\n## Why Another Animate.css\n\nCompared to animate.css, react-animation-wrapper has many uncomparable advantages:\n\n* 📦 Extremely light-weight: **6kb** (uglified) vs **72kb** (animate.css)\n* 🙅 No global CSS variable polution (css in js).\n* ✂️ Much More configurable and customizable via JavaScript and React.\n\n## Usage\n\n```sh\nnpm install --save react-animation-wrapper\n```\n\nWrite a custom, normal react component:\n\n```js\nconst Header = () =\u003e \u003ch1 style={{ textAlign: 'center' }}\u003eHello World\u003c/h1\u003e\n```\n\nWrap it up with the name of the animation wrapper: **(Check out all the available ones in the [demo page](https://cyan33.github.io/react-animation-wrapper/)!)**\n\n```js\nimport { BounceIn } from 'react-animation-wrapper'\nReactDOM.render(\n  \u003cBounceIn\u003e\n    \u003cHeader /\u003e\n  \u003c/BounceIn\u003e,\n  document.querySelector('.root')\n)\n```\n\nYou are all set!\n\nAnimations available:\n\n| WrapperName   |               |       |\n| ------------- | ------------- | ----- |\n| Bounce        | Flash         | Pulse |\n| Shake         | RubberBand    | Swing |\n| Jello         | Wobble        | FadeIn |\n| Tada          | Bounce        | Flip  |\n| ZoomIn        | ZoomOut       | JackInTheBox |\n| RotateIn      | RollIn        |       |\n\nCheck the demo page [here](https://cyan33.github.io/react-animation-wrapper/) to see what they look like.\n\n## CHANGELOG\n\n### `v0.1.0`\n\nadd 17 animations presets\n\n### `v0.2.0`\n\nexpose `createAnimationWrapper` for customzied animation and could configure the animation properties (`delay`, `iterationCount`, `delay`) via passing props into the animation wrapper component\n\n## FAQ\n\n### Why is my animation acting weird, not as expected\n\nThe most possible reason is that you didn't specify the size and alignment of the container box of the content. This leads to the issue where your CONTAINER BOX is being animated, rather than its content. Make sure your content size is the same as its container.\n\n### Why there appears a scroll bar in the middle of the animation\n\nDue to different OS, browser and animations that transform its shape during the animation, it's likely that it goes beyond its container box, which then shows up a scroll bar. A quick fix: add `overflow: hidden` in the container box of the wrapper component.\n\n## Contribution\n\nThis project is in a sense very beginner-friendly project for those who want to get some fun of open source. It's well modularized, and the logic of each components is quite easy and similar to each other.\n\nSee the issues with the `good first issue` tag and I welcome all kinds of support and can provide some guide.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyan33%2Freact-animation-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyan33%2Freact-animation-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyan33%2Freact-animation-wrapper/lists"}