Blazorise Animate component

Animate your content by wrapping it with the Animate component.

The Animate component provides a wrapper that will animate your content. It is based on the AOS javascript library.

Installation

NuGet

Install extension from NuGet. 
Install-Package Blazorise.Animate

Imports

In your main _Imports.razor add: 
@using Blazorise.Animate

Static Files

Add animate.js to your index.html or _Host.cshtml file, depending if you’re using a Blazor WebAssembly or Blazor Server side project. 
<script src="_content/Blazorise.Animate/blazorise.animate.js?v=1.6.2.0"></script>

Example

<Field>
    <Select TValue="string" SelectedValueChanged="@OnSelectedAnimationChanged">
        @foreach ( var availableAnimation in Animations.GetNames() )
        {
            <SelectItem Value="@availableAnimation">@availableAnimation</SelectItem>
        }
    </Select>
</Field>

@if ( showAnimate )
{
    <Div ElementId="#b-animate">
        <Animate Anchor="#b-animate" Auto Animation="selectedAnimation" DelayMilliseconds="500">
            <Card Margin="Margin.Is4.OnY">
                <CardBody>
                    <CardTitle Size="5">Animation Example</CardTitle>
                    <CardText>
                        Some content.
                    </CardText>
                </CardBody>
            </Card>
        </Animate>
    </Div>
}
<Button Color="Color.Primary" Clicked="@Animate">
    @buttonText
</Button>

@code {
    private IAnimation selectedAnimation = Animations.FadeIn;
    private bool showAnimate = false;
    private string buttonText = "Animate!";

    private Task OnSelectedAnimationChanged( string selectedAnimationName )
    {
        showAnimate = false;

        if ( Animations.TryParse( selectedAnimationName, out var animation ) )
            selectedAnimation = animation;
        else
            selectedAnimation = null;

        return Task.CompletedTask;
    }

    private async Task Animate()
    {
        if ( !showAnimate )
        {
            showAnimate = true;
            await InvokeAsync( StateHasChanged );
            buttonText = "Restart!";
        }
        else
        {
            showAnimate = false;
            buttonText = "Animate!";
        }

        await InvokeAsync( StateHasChanged );
    }
}

API

Attributes

Name Description Type Default
ElementId Gets or sets the animate element id. string
Animation Gets or sets the animation effect. IAnimation
Easing Gets or sets the easing effect. IEasing
Duration Gets os sets the total duration of the animation. Values from 0 to 3000, with step 50ms. TimeSpan?
DurationMilliseconds Gets os sets the total duration of the animation, in milliseconds. Values from 0 to 3000, with step 50ms. int?
Delay Gets os sets the delay of the animation before it runs automatically, or manually. Values from 0 to 3000, with step 50ms. TimeSpan?
DelayMilliseconds Gets os sets the delay in milliseconds of the animation before it runs automatically, or manually. Values from 0 to 3000, with step 50ms. int?
Mirror Whether elements should animate out while scrolling past them. bool?
Once Whether animation should happen only once - while scrolling down. bool?
Anchor Element whose offset will be used to trigger animation instead of an actual one. string
AnchorPlacement Defines which position of the element regarding to window should trigger the animation. string
OptionsName Defines the custom name of the options to get from the configuration. Options
Options Defines the animate options. AnimateOptions
Auto True if the animation will be executed automatically. Otherwise if false it needs to be run manually with Run method. bool true
Attributes Captures all the custom attribute that are not part of Animate component. Dictionary<string, object>
ChildContent Specifies the content to be rendered inside this Animate. RenderFragment
On this page