{"id":20995126,"url":"https://github.com/blackboxvision/styled-animation","last_synced_at":"2025-09-11T13:32:42.024Z","repository":{"id":21675618,"uuid":"93670906","full_name":"BlackBoxVision/styled-animation","owner":"BlackBoxVision","description":"😎 Helper that implements react-animations for styled-components","archived":false,"fork":false,"pushed_at":"2024-09-06T09:02:37.000Z","size":1841,"stargazers_count":21,"open_issues_count":4,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-12T16:13:29.607Z","etag":null,"topics":["animation","library","react","react-animations","styled-components"],"latest_commit_sha":null,"homepage":"https://BlackBoxVision.github.io/styled-animation/","language":"TypeScript","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/BlackBoxVision.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2017-06-07T19:16:20.000Z","updated_at":"2022-08-13T16:13:05.000Z","dependencies_parsed_at":"2025-04-20T20:41:38.634Z","dependency_job_id":null,"html_url":"https://github.com/BlackBoxVision/styled-animation","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/BlackBoxVision%2Fstyled-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fstyled-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fstyled-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fstyled-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlackBoxVision","download_url":"https://codeload.github.com/BlackBoxVision/styled-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254230817,"owners_count":22036248,"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","library","react","react-animations","styled-components"],"created_at":"2024-11-19T07:21:49.612Z","updated_at":"2025-05-14T21:30:58.879Z","avatar_url":"https://github.com/BlackBoxVision.png","language":"TypeScript","readme":"# Styled Animation [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Fstyled-animation.svg)](https://badge.fury.io/js/%40blackbox-vision%2Fstyled-animation) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/blackboxvision/styled-animation/badge.svg)](https://snyk.io/test/github/blackboxvision/styled-animation)\n\nHandle animations with style :sunglasses:. Check out the [demo](https://blackboxvision.github.io/styled-animation/).\n\n## Installation\n\n### YARN\n\n```javascript\nyarn add @blackbox-vision/styled-animation\n```\n\n### NPM\n\n```javascript\nnpm install --save @blackbox-vision/styled-animation\n```\n\n## Use case\n\nIf you need to integrate react-animations and styled-components, this library solves the problem giving you an `Animation` component ready for you to use.\n\n## Usage\n\n### Styled-animation supports all the animations provided by [react-animations](http://react-animations.herokuapp.com/)\n\nThe usage is really simple:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Animation } from '@blackbox-vision/styled-animation';\n\nconst Example = () =\u003e (\n  \u003cAnimation name=\"fadeOutDown\" duration=\"2s\" timing=\"ease-out\"\u003e\n    Hey!, i'm animated!\n  \u003c/Animation\u003e\n);\n\nReactDOM.render(\u003cExample /\u003e, document.getElementById('root'));\n```\n\nAlso is possible to merge multiple animations, separating each animation name by a space:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Animation } from '@blackbox-vision/styled-animation';\n\nconst Example = () =\u003e (\n  \u003cAnimation name=\"shake bounce\"\u003eHey!, i'm mixed!\u003c/Animation\u003e\n);\n\nReactDOM.render(\u003cExample /\u003e, document.getElementById('root'));\n```\n\n## Props\n\n`Animation` component use the following props:\n\n| Properties | Types    | Default Value | Description                                          |\n| ---------- | -------- | ------------- | ---------------------------------------------------- |\n| name       | string   | none          | Name or names of the animations to start.            |\n| duration   | string   | none          | Indicates the duration of the Animation.             |\n| timing     | string   | none          | Indicates the timing of the animation.               |\n| fillMode   | string   | none          | Indicates the animation-fill-mode value.             |\n| onStart    | Function | none          | Callback called when the animation keyframes start.  |\n| onEnd      | Function | none          | Callback called when the animation keyframes finish. |\n\n## Issues\n\nPlease, open an [issue](https://github.com/BlackBoxVision/styled-animation/issues) following one of the issues templates. We will do our best to fix them.\n\n## Contributing\n\nIf you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/styled-animation/blob/master/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/styled-animation/blob/master/LICENSE) for more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Fstyled-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblackboxvision%2Fstyled-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Fstyled-animation/lists"}