{"id":14986829,"url":"https://github.com/mikoskinen/blazor.animate","last_synced_at":"2025-04-12T21:33:53.378Z","repository":{"id":60773431,"uuid":"219540776","full_name":"mikoskinen/Blazor.Animate","owner":"mikoskinen","description":"Easily add fade, slide and zoom-effects into your Blazor applications.","archived":false,"fork":false,"pushed_at":"2023-02-18T00:17:46.000Z","size":406,"stargazers_count":289,"open_issues_count":20,"forks_count":38,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-04T01:09:22.646Z","etag":null,"topics":["animate","animation","blazor"],"latest_commit_sha":null,"homepage":"","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/mikoskinen.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":"2019-11-04T16:02:04.000Z","updated_at":"2025-04-01T13:00:02.000Z","dependencies_parsed_at":"2024-06-18T15:21:02.365Z","dependency_job_id":"f549e2eb-298e-4684-922d-d13716e55772","html_url":"https://github.com/mikoskinen/Blazor.Animate","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"b21038311e3142f347c2d88d2ada0d44fca222e4"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikoskinen%2FBlazor.Animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikoskinen%2FBlazor.Animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikoskinen%2FBlazor.Animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikoskinen%2FBlazor.Animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikoskinen","download_url":"https://codeload.github.com/mikoskinen/Blazor.Animate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248636830,"owners_count":21137527,"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":["animate","animation","blazor"],"created_at":"2024-09-24T14:13:37.060Z","updated_at":"2025-04-12T21:33:53.353Z","avatar_url":"https://github.com/mikoskinen.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Now part of Blazorise\n\nStarting from the 2020/12/1, Blazor.Animate is now proud to be part of the Blazorise: https://github.com/stsrki/Blazorise. All the updates and future work for Blazor.Animate will continue through Blazorise.\n\n# Blazor.Animate \n\nEasily add fade, slide and zoom-effects into your Blazor applications. Blazor.Animate is powered by the excellent [AOS-library](https://michalsnik.github.io/aos/).\n\n![Blazor.Animate animation](blazoranimate.gif)\n\nBlazor.Animate is an animation component for Blazor. With Blazor.Animate you can animate how other components are brought to the view. You can easily add fade, slide and zoom-effects and even add easing to the animations.\n\n[![NuGet](https://img.shields.io/nuget/v/BlazorAnimate.svg)](https://www.nuget.org/packages/BlazorAnimate/)\n\n## Quick Start\n\nTo animate a component, wrap it inside Animate-component and use the Animation-parameter to define the animation:\n\n```\n    \u003cAnimate Animation=\"Animations.ZoomIn\" Duration=\"TimeSpan.FromSeconds(0.5)\" \u003e\n        \u003cCounter\u003e\u003c/Counter\u003e\n    \u003c/Animate\u003e\n```\n\n## Getting Started\n\nFew steps are required in order to use the library.\n\n#### Add NuGet\n\n```csharp\nInstall-Package BlazorAnimate\n```\n\n#### Configure _Imports.razor\n\n```\n...\n@using BlazorAnimate\n```\n\n#### Add JS interop into _Host.cshtml\n\n```\n    \u003cscript src=\"_content/BlazorAnimate/blazorAnimateInterop.js\"\u003e\u003c/script\u003e\n```\n\n#### Use the Animate-component\n\n```\n    \u003cAnimate Animation=\"Animations.ZoomIn\" Duration=\"TimeSpan.FromSeconds(0.5)\" Delay=\"TimeSpan.FromSeconds(1)\"\u003e\n        \u003cCounter\u003e\u003c/Counter\u003e\n    \u003c/Animate\u003e\n```\n\n## Sample\n\nFor a sample, please view http://animateblazorsamplessvc.azurewebsites.net/\n\nThe sample's source code is available from GitHub: https://github.com/mikoskinen/Blazor.Animate/tree/master/samples/BlazorAnimate.Sample\n\n## Running animation manually\n\nIt's possible to run the animation manually. Please note that the animated component will be hidden until the animation is manually executed.\n\nTo animate component manually, first set the IsManual to true and also capture the reference to the component:\n\n```\n\t\u003cAnimate Animation=\"Animations.ZoomIn\" Duration=\"TimeSpan.FromSeconds(0.5)\" @ref=\"myAnim\" IsManual=\"true\"\u003e\n\t\t\u003cCounter\u003e\u003c/Counter\u003e\n\t\u003c/Animate\u003e\n```\n\nThen in code-behind, call Run-method to animate the component:\n\n```\n\t@code {\n\n\t\tprivate Animate myAnim;\n\n\t\tprivate void RunAnimation()\n\t\t{\n\t\t\tmyAnim.Run();\n\t\t}\n\t}\n```\n\nThe Manual.razor page in the sample illustrates this functionality.\n\n## Animations\n\nTo define an animation, use the Animation-property of the Animate-component. The built-in animations are available from BlazorAnimate.Animations:\n\n* Fade\n* FadeIn\n* FadeUp\n* FadeDown\n* FadeLeft\n* FadeRight\n* FadeUpRight\n* FadeUpLeft\n* FadeDownRight\n* FadeDownLeft\n* FlipUp\n* FlipDown\n* FlipLeft\n* FlipRight\n* SlideUp\n* SlideDown\n* SlideLeft\n* SlideRight\n* ZoomIn\n* ZoomInUp\n* ZoomInDown\n* ZoomInLeft\n* ZoomInRight\n* ZoomOut\n* ZoomOutUp\n* ZoomOutDown\n* ZoomOutLeft\n* ZoomOutRight\n\nUse Duration (TimeSpan) or DurationMs -property to define the duration of an animation.\n\nUse Delay (TimeSpan) or DelayMs -property to define how long the animation is delayed before it is started.\n\n## Available easings\n\nTo define an easing for the animation, use the Easing-property of the Animate-component. The built-in easings are available from BlazorAnimate.Easings:\n\n* Linear\n* Ease\n* EaseIn\n* EaseOut\n* EaseInOut\n* EaseInBack\n* EaseOutBack\n* EaseInOutBack\n* EaseInSine\n* EaseOutSine\n* EaseInOutSine\n* EaseInQuad\n* EaseOutQuad\n* EaseInOutQuad\n* EaseInCubic\n* EaseOutCubic \n* EaseInOutCubic\n* EaseInQuart\n* EaseOutQuart\n* EaseInOutQuart\n\n## Configuring the defaults\n\nASP.NET Core's options can be used to define the default animation settings:\n\n```\n            services.Configure\u003cAnimateOptions\u003e(options =\u003e\n            {\n                options.Animation = Animations.FadeDown;\n                options.Duration = TimeSpan.FromMilliseconds(100);\n            });\n```\n\nIf no animation parameters is defined on the Animate-component, the defaults are used:\n\n```\n\u003cAnimate\u003e\n    \u003ch1\u003eHello, world!\u003c/h1\u003e\n\u003c/Animate\u003e\n```\n\n## Named configurations\n\nBlazor.Animate supports named animation settings through the ASP.NET Core's named options. Here's an example where two configurations are provided, one without a name (the defaults) and one with a name:\n\n```\n            services.Configure\u003cAnimateOptions\u003e(\"my\", options =\u003e\n            {\n                options.Animation = Animations.FadeDown;\n                options.Duration = TimeSpan.FromSeconds(2);\n            });\n\n            services.Configure\u003cAnimateOptions\u003e(options =\u003e\n            {\n                options.Animation = Animations.FadeDown;\n                options.Duration = TimeSpan.FromMilliseconds(100);\n            });\n```\n\nTo use a named configuration, provide the OptionsName-parameter:\n\n```\n\u003cAnimate OptionsName=\"my\"\u003e\n    \u003ch1\u003eHello, world!\u003c/h1\u003e\n\u003c/Animate\u003e\n```\n## Authors\n\nBlazor.Animate is created by [Mikael Koskinen](https://mikaelkoskinen.net).\n\nContributions are welcome!\n\n## License\n\nBlazor.Animate is MIT licensed. The library uses the following other libraries:\n\n* [AOS](https://michalsnik.github.io/aos/): MIT-license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikoskinen%2Fblazor.animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikoskinen%2Fblazor.animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikoskinen%2Fblazor.animate/lists"}