Easily add fade, slide and zoom-effects into your Blazor applications. Blazor.Animate is powered by the excellent AOS-library.
Blazor.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.
To animate a component, wrap it inside Animate-component and use the Animation-parameter to define the animation:
<Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" >
<Counter></Counter>
</Animate>
Few steps are required in order to use the library.
Install-Package BlazorAnimate
...
@using BlazorAnimate
<script src="_content/BlazorAnimate/blazorAnimateInterop.js"></script>
<Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" Delay="TimeSpan.FromSeconds(1)">
<Counter></Counter>
</Animate>
For a sample, please view http://animateblazorsamplessvc.azurewebsites.net/
The sample's source code is available from GitHub: https://github.com/mikoskinen/Blazor.Animate/tree/master/samples/BlazorAnimate.Sample
To define an animation, use the Animation-property of the Animate-component. The built-in animations are available from BlazorAnimate.Animations:
- Fade
- FadeIn
- FadeUp
- FadeDown
- FadeLeft
- FadeRight
- FadeUpRight
- FadeUpLeft
- FadeDownRight
- FadeDownLeft
- FlipUp
- FlipDown
- FlipLeft
- FlipRight
- SlideUp
- SlideDown
- SlideLeft
- SlideRight
- ZoomIn
- ZoomInUp
- ZoomInDown
- ZoomInLeft
- ZoomInRight
- ZoomOut
- ZoomOutUp
- ZoomOutDown
- ZoomOutLeft
- ZoomOutRight
Use Duration (TimeSpan) or DurationMs -property to define the duration of an animation.
Use Delay (TimeSpan) or DelayMs -property to define how long the animation is delayed before it is started.
To define an easing for the animation, use the Easing-property of the Animate-component. The built-in easings are available from BlazorAnimate.Easings:
- Linear
- Ease
- EaseIn
- EaseOut
- EaseInOut
- EaseInBack
- EaseOutBack
- EaseInOutBack
- EaseInSine
- EaseOutSine
- EaseInOutSine
- EaseInQuad
- EaseOutQuad
- EaseInOutQuad
- EaseInCubic
- EaseOutCubic
- EaseInOutCubic
- EaseInQuart
- EaseOutQuart
- EaseInOutQuart
ASP.NET Core's options can be used to define the default animation settings:
services.Configure<AnimateOptions>(options =>
{
options.Animation = Animations.FadeDown;
options.Duration = TimeSpan.FromMilliseconds(100);
});
If no animation parameters is defined on the Animate-component, the defaults are used:
<Animate>
<h1>Hello, world!</h1>
</Animate>
Blazor.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:
services.Configure<AnimateOptions>("my", options =>
{
options.Animation = Animations.FadeDown;
options.Duration = TimeSpan.FromSeconds(2);
});
services.Configure<AnimateOptions>(options =>
{
options.Animation = Animations.FadeDown;
options.Duration = TimeSpan.FromMilliseconds(100);
});
To use a named configuration, provide the OptionsName-parameter:
<Animate OptionsName="my">
<h1>Hello, world!</h1>
</Animate>
Blazor.Animate is created by Mikael Koskinen.
Contributions are welcome!
Blazor.Animate is MIT licensed. The library uses the following other libraries:
- AOS: MIT-license