{"id":15516695,"url":"https://github.com/alexvcasillas/animated-styled-components","last_synced_at":"2025-04-14T00:26:28.874Z","repository":{"id":48020661,"uuid":"101640557","full_name":"alexvcasillas/animated-styled-components","owner":"alexvcasillas","description":"React Animated Styled Components","archived":false,"fork":false,"pushed_at":"2022-12-03T03:18:56.000Z","size":1182,"stargazers_count":140,"open_issues_count":5,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T14:47:44.712Z","etag":null,"topics":["animated","animation","react","styled-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/animated-styled-components","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/alexvcasillas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"alexvcasillas","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-08-28T12:23:50.000Z","updated_at":"2025-03-05T13:28:54.000Z","dependencies_parsed_at":"2023-01-22T14:50:15.439Z","dependency_job_id":null,"html_url":"https://github.com/alexvcasillas/animated-styled-components","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Fanimated-styled-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Fanimated-styled-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Fanimated-styled-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexvcasillas%2Fanimated-styled-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexvcasillas","download_url":"https://codeload.github.com/alexvcasillas/animated-styled-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248800112,"owners_count":21163404,"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":["animated","animation","react","styled-components"],"created_at":"2024-10-02T10:09:33.627Z","updated_at":"2025-04-14T00:26:28.849Z","avatar_url":"https://github.com/alexvcasillas.png","language":"JavaScript","funding_links":["https://github.com/sponsors/alexvcasillas"],"categories":[],"sub_categories":[],"readme":"### Animated Styled Components\n\nReact Animated Styled Components is a library that aims to make ease to use plug and play animated components.\n\n### Installing Animated Styled Components\n\nNPM\n\n```\nnpm i --save animated-styled-components\n```\n\nYARN\n\n```\nyarn add animated-styled-components\n```\n\n### Demo\n\nYou can check for a working [CodeSandbox](https://codesandbox.io/s/1o4n5765rj) to see a small demonstration of this library.\n\n\n### Using the Animated Component\n\nTo make use of the **Animated** component you need to include the library into your project and create a new component just like you would do with any other react component.\n\n```\nimport React, { Component } from 'react';\n// Make the import into your react component file\nimport { Animated, FadeAnimations, RotateAnimations } from 'animated-styled-components';\n\nclass Showcase extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cAnimated\n          animation={{\n            delay_in: 5,\n            in: FadeAnimations.FadeInBottom,\n            duration_in: 1,\n            continuous: RotateAnimations.RotateCenter,\n            duration_continuous: 1,\n            out: FadeAnimations.FadeOutTop,\n            duration_out: 1,\n            delay_between: 5\n          }}\n          transitions={[\n            {\n              type: 'hover',\n              from: { property: 'border-radius', value: 0 },\n              to: { property: 'border-radius', value: 10 }\n            }\n          ]}\n        \u003e\n          This is an animated component\n        \u003c/Animated\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n```\n\nAt the above example you can see a basic structure of an **Animated Component**. We will dig more into all the props later on this documentation.\n\n### Props\n\nThe **Animated Component** doesn't need to be filled with any props, if you don't provide props, it will just simply do nothing, but, to make the magic happen, those props are the following: `animation` and `transitions`.\n\n### Animation Prop\n\nThe `animation` prop is an `object` that needs to have the following structure:\n\n```\nanimation={{\n  delay_in: 5,\n  in: FadeAnimations.FadeInBottom,\n  duration_in: 1,\n  continuous: RotateAnimations.RotateCenter,\n  duration_continuous: 1,\n  out: FadeAnimations.FadeOutTop,\n  duration_out: 1,\n  delay_between: 5,\n  iteration: \n}}\n```\n\n**Deconstructing the `animation` prop**\n\n* `in`: This property receives an animation keyframe that will be used to animate in the component.\n* `delay_in`: This property receives and integer and will set the time that the component will take to start being animated. While this time isn't reached, the component will be mounted but will display nothing. If this property is not setted there won't be any delay in for the component to start animating.\n* `duration_in`:  This property receives and integer greater than 0 and will set the duration in seconds for the `in` animation.\n* `continuous`: This property receives an animation keyframe that will be used to animate between `in` and `out` (if proceed).\n* `duration_continuous`: This property receives an integer greater than 0 and will set the duration in seconds for the `continuous` animation.\n* `out`: This property receives an animation keyframe that will be used to animate out the component.\n* `duration_out`: This property receives and integer greater than 0 and will set the duration in seconds for the `out` animation.\n* `delay_between`: This property receives and integer geater or equals to 0 and will set the time that will wait between the `in` and `out` animations.\n* `iteration`: This property receives and integer greater than 0 or the **literal** 'infinite' and will set the amount of iterations the animation should be doing until it goes out (if it should).\n\n### Transitions Prop\n\nThe `transitions` prop is an `array` of `objects` with the desired transitions that should be handled and needs to have the following structure:\n\n```\ntransitions={[\n  {\n    type: 'hover',\n    from: { property: 'border-radius', value: 0 },\n    to: { property: 'border-radius', value: 10 }\n  }\n]}\n```\n\n**Deconstructing the `transitions` prop**\n\nAn array of objects that must contain the following structure:\n\n* `type`: This property must be a string literal from the following literals available: `hover`, `focus`, `blur`, `active`. This property is the one who's going to set the type of transition we want to achieve.\n* `from`: This property will define the starting values of the properties to transition. This property must be an object with the following inner properties:\n  * `property`: This property must be a valid CSS property (it will be checked to avoid using unknown properties).\n  * `value`: This property must be a string or a number depending on the property type (will be automatically checked to prevent inconsistencies).\n* `to`: This property will define the ending values of the properties to transition. This property must be an object with the following inner properties:\n  * `property`: This property must be a valid CSS property (it will be checked to avoid using unknown properties).\n  * `value`: This property must be a string or a number depending on the property type (will be automatically checked to prevent inconsistencies).\n\n\n### Animations\n\nThis component gives you a lot of built-in animations that are well tested and ready to be used.\n\nIf you want to use our built-in animations you only need to to the following when importing `animated-styled-components`:\n\n`{ AnimationsType } from 'animated-styled-components';`\n\nWhere **AnimationsType** are one of the following avaible grouped animations. Each of this groups have the animations.\n\n#### BounceAnimations\n\nWith the following implemented animations:\n\n`BounceInForwards`\n\n---\n\n#### ScaleAnimations\n\nWith the following implemented animations:\n\n`ScaleInCenter`\n\n---\n\n#### FadeAnimations\n\nWith the following implemented animations:\n\n`FadeIn`\n\n`FadeInTop`\n\n`FadeOutTop`\n\n`FadeInBottom`\n\n`FadeInLeft`\n\n`FadeInRight`\n\n\n---\n\n#### RotateAnimations\n\nWith the following implemented animations:\n\n`RotateInCenter`\n\n`RotateCenter`\n\n---\n\n#### SlideAnimations\n\nWith the following implemented animations:\n\n`SlideTop`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexvcasillas%2Fanimated-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexvcasillas%2Fanimated-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexvcasillas%2Fanimated-styled-components/lists"}