# Reflex Motion
A Reflex wrapper for [Framer Motion](https://www.framer.com/motion/), a production-ready motion library for React.
<div align="center">
<img src="/docs/demo.gif" alt="Reflex Motion Demo" />
</div>
# Installation
```bash
pip install reflex-motion
```
# Usage
Right now Reflex Motion is a simple wrapper around Framer Motion. It provides a single component, `motion`, which is a drop-in replacement for `motion.div` from Framer Motion.
```python
motion(
rx.button(
"Bounce me!",
),
while_hover={"scale": 1.2},
while_tap={"scale": 0.9},
transition={"type": "spring", "stiffness": 400, "damping": 17},
)
```
There are a few different props motion supports:
# Props
**inital**: The initial state of the animation. This is the state the animation will start in when the component is first rendered.
**animate**: The state the animation will end in. This is the state the animation will end in when the component is first rendered.
**while_hover**: The state the animation will be in while the user is hovering over the component.
**while_tap**: The state the animation will be in while the user is tapping on the component.
**while_in_view**: The state the animation will be in while the component is in view.
**while_focus**: The state the animation will be in while the component is focused.
### Animation Props
| Name | Key | Values | Description |
| ----------- | ----------- | ----------- | ----------- |
| Translate | 'x', 'y', 'z' | int | The amount to translate the component by. |
| Scale | 'scale', 'scale_x', 'scale_y' | int | The amount to scale the component by. |
| Rotate | 'rotate', 'rotate_x', 'rotate_y', 'rotate_z' | int | The amount to rotate the component by. |
| Skew | 'skew', 'skew_x', 'skew_y' | int | The amount to skew the component by. |
Additionally you can pass in any Reflex style prop (css prop).
## Transitions
**transition**: The transition to use when animating between states. This can be a single transition or an array of transitions.
| Name | Key | Values | Description |
| ----------- | ----------- | ----------- | ----------- |
| Type | 'tpye' | tween', 'spring', 'keyframes' | The type of transition to use. |
| Easing | 'ease' | 'linear', 'ease_in', 'ease_out', 'ease_in_out', 'circ_in', 'circ_out', 'circ_in_out', 'back_in', 'back_out', 'back_in_out' | The easing function to use for the transition. |
| Duration | 'duration' | int | The duration of the transition in milliseconds. |
| Delay | 'delay' | int | The delay before the transition starts in milliseconds. |
Additonally you can pass in any of the **Animation Props** and **Reflex style prop (css prop)**.
# Examples
## Transition
```python
motion(
rx.button(
"Spin me!",
variant="soft",
),
initial={"scale": 1},
while_hover={"scale": 1.2, "rotate": 45},
while_tap={"scale": 0.9},
transition={"type": "spring", "stiffness": 260, "damping": 20},
)
```
Raw data
{
"_id": null,
"home_page": "",
"name": "reflex-motion",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": "",
"keywords": "reflex,reflex-custom-components",
"author": "",
"author_email": "Your Name <YOUREMAIL@domain.com>",
"download_url": "https://files.pythonhosted.org/packages/8a/8c/85f74b9e5729448c7fc81f958f2a53d0757d31b80fcc88b13efb3c30018b/reflex-motion-0.0.1.tar.gz",
"platform": null,
"description": "# Reflex Motion\n\nA Reflex wrapper for [Framer Motion](https://www.framer.com/motion/), a production-ready motion library for React.\n\n<div align=\"center\">\n <img src=\"/docs/demo.gif\" alt=\"Reflex Motion Demo\" />\n</div>\n\n# Installation\n\n```bash\npip install reflex-motion\n```\n\n# Usage\n\nRight now Reflex Motion is a simple wrapper around Framer Motion. It provides a single component, `motion`, which is a drop-in replacement for `motion.div` from Framer Motion.\n\n```python\nmotion(\n rx.button(\n \"Bounce me!\",\n ),\n while_hover={\"scale\": 1.2},\n while_tap={\"scale\": 0.9},\n transition={\"type\": \"spring\", \"stiffness\": 400, \"damping\": 17},\n)\n```\n\nThere are a few different props motion supports:\n\n# Props\n\n**inital**: The initial state of the animation. This is the state the animation will start in when the component is first rendered.\n\n**animate**: The state the animation will end in. This is the state the animation will end in when the component is first rendered.\n\n**while_hover**: The state the animation will be in while the user is hovering over the component.\n\n**while_tap**: The state the animation will be in while the user is tapping on the component.\n\n**while_in_view**: The state the animation will be in while the component is in view.\n\n**while_focus**: The state the animation will be in while the component is focused.\n\n### Animation Props\n\n| Name | Key | Values | Description |\n| ----------- | ----------- | ----------- | ----------- |\n| Translate | 'x', 'y', 'z' | int | The amount to translate the component by. |\n| Scale | 'scale', 'scale_x', 'scale_y' | int | The amount to scale the component by. |\n| Rotate | 'rotate', 'rotate_x', 'rotate_y', 'rotate_z' | int | The amount to rotate the component by. |\n| Skew | 'skew', 'skew_x', 'skew_y' | int | The amount to skew the component by. |\n\n\nAdditionally you can pass in any Reflex style prop (css prop).\n\n## Transitions\n\n**transition**: The transition to use when animating between states. This can be a single transition or an array of transitions.\n\n| Name | Key | Values | Description |\n| ----------- | ----------- | ----------- | ----------- |\n| Type | 'tpye' | tween', 'spring', 'keyframes' | The type of transition to use. |\n| Easing | 'ease' | 'linear', 'ease_in', 'ease_out', 'ease_in_out', 'circ_in', 'circ_out', 'circ_in_out', 'back_in', 'back_out', 'back_in_out' | The easing function to use for the transition. |\n| Duration | 'duration' | int | The duration of the transition in milliseconds. |\n| Delay | 'delay' | int | The delay before the transition starts in milliseconds. |\n\nAdditonally you can pass in any of the **Animation Props** and **Reflex style prop (css prop)**.\n\n# Examples\n\n## Transition\n\n```python \nmotion( \n rx.button(\n \"Spin me!\",\n variant=\"soft\",\n ),\n initial={\"scale\": 1},\n while_hover={\"scale\": 1.2, \"rotate\": 45},\n while_tap={\"scale\": 0.9},\n transition={\"type\": \"spring\", \"stiffness\": 260, \"damping\": 20},\n)\n```\n\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "Reflex custom component motion",
"version": "0.0.1",
"project_urls": {
"Homepage": "https://github.com"
},
"split_keywords": [
"reflex",
"reflex-custom-components"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "4b9e5c7c2f414fd77c3c3e229a2175223f3c89c8cca05c6ebefd1bd7c2d2ab2e",
"md5": "f900a6cda8820adb5fee869445bbeb36",
"sha256": "3c76b47920ab6d979f9e93728108d97c9da41dad3fc239493f53fba17ae43202"
},
"downloads": -1,
"filename": "reflex_motion-0.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "f900a6cda8820adb5fee869445bbeb36",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 3043,
"upload_time": "2024-03-08T20:45:28",
"upload_time_iso_8601": "2024-03-08T20:45:28.134961Z",
"url": "https://files.pythonhosted.org/packages/4b/9e/5c7c2f414fd77c3c3e229a2175223f3c89c8cca05c6ebefd1bd7c2d2ab2e/reflex_motion-0.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "8a8c85f74b9e5729448c7fc81f958f2a53d0757d31b80fcc88b13efb3c30018b",
"md5": "93845e7a2e123a83558596e29d27d1ff",
"sha256": "1d404d270ae725fce8c8a2dd7c1dba4bbc4e821ac5858b25419cc27e56449e38"
},
"downloads": -1,
"filename": "reflex-motion-0.0.1.tar.gz",
"has_sig": false,
"md5_digest": "93845e7a2e123a83558596e29d27d1ff",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 2924,
"upload_time": "2024-03-08T20:45:29",
"upload_time_iso_8601": "2024-03-08T20:45:29.450830Z",
"url": "https://files.pythonhosted.org/packages/8a/8c/85f74b9e5729448c7fc81f958f2a53d0757d31b80fcc88b13efb3c30018b/reflex-motion-0.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-03-08 20:45:29",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "reflex-motion"
}
JSON