{"id":25656208,"url":"https://github.com/lumexui/lumexui-motion","last_synced_at":"2025-04-19T12:13:56.490Z","repository":{"id":278930622,"uuid":"912514092","full_name":"LumexUI/lumexui-motion","owner":"LumexUI","description":"🏃 A Blazor wrapper for the Motion library (vanilla JS).","archived":false,"fork":false,"pushed_at":"2025-02-22T16:39:16.000Z","size":56,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-14T12:54:28.220Z","etag":null,"topics":["blazor","blazor-components","library","motion"],"latest_commit_sha":null,"homepage":"https://www.nuget.org/packages/LumexUI.Motion","language":"C#","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/LumexUI.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":"2025-01-05T19:29:18.000Z","updated_at":"2025-02-24T04:35:47.000Z","dependencies_parsed_at":"2025-02-22T16:32:34.362Z","dependency_job_id":"0c3bec9b-c3e4-4c6c-a0d5-ce91cf4517cd","html_url":"https://github.com/LumexUI/lumexui-motion","commit_stats":null,"previous_names":["lumexui/lumexui-motion"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LumexUI%2Flumexui-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LumexUI%2Flumexui-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LumexUI%2Flumexui-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LumexUI%2Flumexui-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LumexUI","download_url":"https://codeload.github.com/LumexUI/lumexui-motion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249691654,"owners_count":21311379,"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":["blazor","blazor-components","library","motion"],"created_at":"2025-02-23T22:22:08.991Z","updated_at":"2025-04-19T12:13:56.468Z","avatar_url":"https://github.com/LumexUI.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 🚧 Notice 🚧\n\nThis project is in a very raw and experimental state. It may contain bugs, missing features, and breaking changes as development progresses.\n\nThis project was primarily created to support [the main LumexUI project](https://github.com/LumexUI/lumexui), and functionality is added only as needed to fulfill its requirements. As a result, it may lack certain features or general-purpose usability.\n\nIf you choose to explore or contribute, please be aware that stability is not guaranteed, and updates may be infrequent or focused on specific needs.\n\n## Installation\n\n1. Register the service in the DI:\n   \n```csharp\n// Program.cs\n\nusing LumexUI.Motion.Extensions;\n\nbuilder.Services.AddLumexMotion();\n```\n\n2. Globally add the necessary usings:\n\n```razor\n@* _Imports.razor *@\n\n@using LumexUI.Motion\n@using LumexUI.Motion.Types\n```\n\n## API\n\nSince this project is a Blazor wrapper, I mimic the original API, but it’s not fully implemented yet. \nFor more details, refer to the [original Motion React documentation](https://motion.dev/docs/react-animation).\n\n```csharp\npublic record MotionProps\n{\n    // Animations that are triggered on after render.\n    public object? Enter { get; init; }\n\n    // Animations that are triggered before component is removed from the render tree.\n    public object? Exit { get; init; }\n\n    // Transition settings for all animations.\n    public object? Transition { get; init; }\n};\n```\n\nThe properties are of type `object` purely for simplicity, as they are later serialized into JavaScript objects.\nAdditionally, this makes it easier to follow the Motion's usage examples.\n\n## Examples\n\nThe Motion library is one of the most powerful animation libraries available, allowing you to create almost any animation you want.\nCheck out the full list of Motion vanilla JavaScript examples [here](https://examples.motion.dev/js).\n\nBelow are some of the simplest animation examples to give you an idea of how it works in this library.\n\n#### Simple Fade-In Animation\n\n```razor\n@* A component that wraps content for animation. *@\n\u003cMotion Enter=\"@_motionProps.Enter\"\u003e\n    \u003ch1\u003eHello, world!\u003c/h1\u003e\n\u003c/Motion\u003e\n\n@code {\n    private MotionProps _motionProps = new MotionProps\n    {\n        Enter = new\n        {\n            Opacity = new float[] { 0, 1 } // Animate opacity from 0 to 1.\n        }\n    };\n}\n```\n\nhttps://github.com/user-attachments/assets/7b86932e-7e5c-422e-959d-a091f11ee4ef\n\n#### Simple Fade-Out Animation\n\n```razor\n\u003cbutton @onclick=\"@(() =\u003e _isVisible = !_isVisible)\"\u003e\n    @(_isVisible ? \"Hide\" : \"Show\")\n\u003c/button\u003e\n\n@* A component that detects when its direct children are removed from the render tree. *@\n\u003cAnimatePresence\u003e\n    @if( _isVisible )\n    {\n        \u003cMotion Exit=\"@_motionProps.Exit\"\u003e\n            \u003ch1\u003eHello, world!\u003c/h1\u003e\n        \u003c/Motion\u003e\n    }\n\u003c/AnimatePresence\u003e\n\n@code {\n    private bool _isVisible = false;\n\n    private MotionProps _motionProps = new MotionProps\n    {\n        Exit = new\n        {\n            Opacity = 0 // Animate opacity from initial (1) to 0.\n        }\n    };\n}\n```\n\nhttps://github.com/user-attachments/assets/ee0139fb-0e83-45b4-a095-907c0b2947c8\n\n#### Simple Fade-In-Out Animation\n\n```razor\n\u003cbutton @onclick=\"@(() =\u003e _isVisible = !_isVisible)\"\u003e\n    @(_isVisible ? \"Hide\" : \"Show\")\n\u003c/button\u003e\n\n\u003cAnimatePresence\u003e\n    @if( _isVisible )\n    {\n        \u003cMotion Enter=\"@_motionProps.Enter\" Exit=\"@_motionProps.Exit\"\u003e\n            \u003ch1\u003eHello, world!\u003c/h1\u003e\n        \u003c/Motion\u003e\n    }\n\u003c/AnimatePresence\u003e\n\n@code {\n    private bool _isVisible = false;\n\n    private MotionProps _motionProps = new MotionProps\n    {\n        Enter = new\n        {\n            Opacity = new float[] { 0, 1 } // Animate opacity from 0 to 1.\n        },\n\n        Exit = new\n        {\n            Opacity = 0 // Animate opacity from current (1) to 0.\n        }\n    };\n}\n```\n\nhttps://github.com/user-attachments/assets/e98c272d-977e-4ad9-b919-630db6d84016\n\nUltimately, the component is actually removed from the DOM.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flumexui%2Flumexui-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flumexui%2Flumexui-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flumexui%2Flumexui-motion/lists"}