Skip to content
Easily add fade, slide and zoom-effects into your Blazor applications.
C# HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
releases
samples/BlazorAnimate.Sample
src
.editorconfig
.gitignore
AOS_LICENSE.txt
LICENSE
README.md
blazoranimate.gif
global.json

README.md

Blazor.Animate

Easily add fade, slide and zoom-effects into your Blazor applications. Blazor.Animate is powered by the excellent AOS-library.

Blazor.Animate animation

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.

NuGet

Quick Start

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>

Getting Started

Few steps are required in order to use the library.

Add NuGet

Install-Package BlazorAnimate

Configure _Imports.razor

...
@using BlazorAnimate

Add JS interop into _Host.cshtml

    <script src="_content/BlazorAnimate/blazorAnimateInterop.js"></script>

Use the Animate-component

    <Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" Delay="TimeSpan.FromSeconds(1)">
        <Counter></Counter>
    </Animate>

Sample

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

Animations

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.

Available easings

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

Configuring the defaults

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>

Named configurations

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>

Authors

Blazor.Animate is created by Mikael Koskinen.

Contributions are welcome!

License

Blazor.Animate is MIT licensed. The library uses the following other libraries:

  • AOS: MIT-license
You can’t perform that action at this time.