{"id":22540882,"url":"https://github.com/dalm1/flowmotion","last_synced_at":"2026-02-15T03:31:03.300Z","repository":{"id":262110532,"uuid":"886232970","full_name":"DALM1/Flowmotion","owner":"DALM1","description":"FlowMotion est une librairie React légère et intuitive pour gérer des transitions fluides entre des pages ou des composants. Basée sur @react-spring/web, elle vous permet de créer des animations dynamiques avec une configuration minimale.","archived":false,"fork":false,"pushed_at":"2024-11-16T21:48:37.000Z","size":18,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-18T04:56:19.043Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/DALM1.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,"publiccode":null,"codemeta":null}},"created_at":"2024-11-10T14:47:56.000Z","updated_at":"2024-11-28T14:11:13.000Z","dependencies_parsed_at":"2024-11-10T16:28:48.923Z","dependency_job_id":"63afd2ce-6f4d-4bb0-a9d9-741185ce90a7","html_url":"https://github.com/DALM1/Flowmotion","commit_stats":null,"previous_names":["dalm1/flowmotion"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DALM1/Flowmotion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DALM1%2FFlowmotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DALM1%2FFlowmotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DALM1%2FFlowmotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DALM1%2FFlowmotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DALM1","download_url":"https://codeload.github.com/DALM1/Flowmotion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DALM1%2FFlowmotion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29466929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T01:01:38.065Z","status":"online","status_checked_at":"2026-02-15T02:00:07.449Z","response_time":118,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-07T12:13:01.413Z","updated_at":"2026-02-15T03:31:03.280Z","avatar_url":"https://github.com/DALM1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# **FlowMotion**\n![GitHub commit activity](https://img.shields.io/github/commit-activity/t/DALM1/Flowmotion?style=for-the-badge)\n![GitHub last commit](https://img.shields.io/github/last-commit/DALM1/Flowmotion?style=for-the-badge)\n![GitHub Issues or Pull Requests](https://img.shields.io/github/issues/DALM1/Flowmotion?style=for-the-badge)\n![GitHub forks](https://img.shields.io/github/forks/DALM1/Flowmotion?style=for-the-badge)\n![GitHub Repo stars](https://img.shields.io/github/stars/DALM1/Flowmotion?style=for-the-badge)\n![GitHub License](https://img.shields.io/github/license/DALM1/Flowmotion?style=for-the-badge)\n\n**FlowMotion** is a lightweight and intuitive React library for managing smooth transitions between pages or components. Based on **@react-spring/web**, it allows you to create dynamic animations with minimal configuration.\n\n---\n\n## 🚀 **Installation**\n\nAdd FlowMotion to your project with npm :\n\n```bash\nnpm install flowmotion\n```\n\n---\n\n## 📖 **Usage**\n\nHere’s how to use **FlowMotion** to animate page or component transitions.\n\n### Basic usage example\n\n```javascript\nimport React, { useState } from 'react';\nimport { PageTransition } from 'flowmotion';\n\nconst App = () =\u003e {\n  const [location, setLocation] = useState('home');\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e setLocation('home')}\u003eHome\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setLocation('about')}\u003eAbout\u003c/button\u003e\n\n      \u003cPageTransition location={location}\u003e\n        {(item) =\u003e (\n          \u003cdiv style={{ padding: 20 }}\u003e\n            {item === 'home' ? \u003ch1\u003eWelcome to Home Page\u003c/h1\u003e : \u003ch1\u003eAbout Us\u003c/h1\u003e}\n          \u003c/div\u003e\n        )}\n      \u003c/PageTransition\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n---\n\n## ⚙️ **API**\n\n### **PageTransition**\n\nThe main component for managing transitions.\n\n| Prop         | Type     | Description                                                                 |\n|--------------|----------|-----------------------------------------------------------------------------|\n| `location`   | `any`    | A unique key to identify the current state or page (e.g., route, ID).       |\n| `children`   | `func`   | A function that returns the content to display during the transition.       |\n\n---\n\n## 🧙‍♂️ **How does it work?**\n\nFlowMotion uses `useTransition` from **@react-spring/web** to animate transitions based on the `location` property. Each new `location` triggers an exit and entry animation.\n\n---\n\n## 📦 **Advanced Example**\n\nHere is an example with custom styles and complex transitions:\n\n```javascript\nimport React, { useState } from 'react';\nimport { PageTransition } from 'flowmotion';\n\nconst App = () =\u003e {\n  const [location, setLocation] = useState('page1');\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e setLocation('page1')}\u003ePage 1\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setLocation('page2')}\u003ePage 2\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setLocation('page3')}\u003ePage 3\u003c/button\u003e\n\n      \u003cPageTransition location={location}\u003e\n        {(item) =\u003e (\n          \u003cdiv\n            style={{\n              height: '100vh',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              fontSize: '2rem',\n              background: item === 'page1' ? '#f4a261' : item === 'page2' ? '#2a9d8f' : '#e76f51',\n              color: '#fff',\n            }}\n          \u003e\n            {item === 'page1' \u0026\u0026 'This is Page 1'}\n            {item === 'page2' \u0026\u0026 'Welcome to Page 2'}\n            {item === 'page3' \u0026\u0026 'You are on Page 3'}\n          \u003c/div\u003e\n        )}\n      \u003c/PageTransition\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n---\n\n## 🛠️ **Advanced Configuration**\n\nYou can customize the animations by modifying the styles or the entry/exit settings in `PageTransition`:\n\n```javascript\nconst transitions = useTransition(location, {\n  from: { opacity: 0, transform: 'translateY(100%)' },\n  enter: { opacity: 1, transform: 'translateY(0)' },\n  leave: { opacity: 0, transform: 'translateY(-100%)' }\n});\n```\n\n---\n\n## 👩‍💻 **Contributions**\n\nContributions are welcome! If you find a bug or have a suggestion, please create an issue or submit a pull request on [GitHub](https://github.com/DALM1/flowmotion).\n\n---\n\n## 📝 **License**\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdalm1%2Fflowmotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdalm1%2Fflowmotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdalm1%2Fflowmotion/lists"}