Blazorise Animate component

Animate your content by wrapping it with the Animate component.

The Animate component wraps the AOS JavaScript library to animate content as it enters the viewport.

Blazorise wraps the animation functionality provided by the AOS library. If you run into issues, also review the AOS repository.

Some content cannot be animated because of how it is structured or styled.

It is not possible to animate:

Modal

Note that certain elements on the page may affect how the AOS library finds the "offset" element needed to trigger animations. Sidebars are a known example. To make sure your content is successfully animated you may configure the Anchor parameter giving the Animate component the necessary information to work. For example, the animate example below is configured this way.

To use the Animate component, install the Blazorise.Animate package first.

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=2.0.0.0"></script>

Example

<Field>
    <Select TValue="string" ValueChanged="@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="HeadingSize.Is5">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

Parameters

Parameter	Description	Type	Default
`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`
`Animation`	Gets or sets the animation effect. Remarks The list of all supported animations can be found in Animations class.	`IAnimation`	`null`
`Attributes`	Captures all the custom attribute that are not part of Animate component.	`Dictionary<string, object>`	`null`
`Auto`	True if the animation will be executed automatically. Otherwise if false it needs to be run manually with Run method.	`bool`	`true`
`ChildContent`	Specifies the content to be rendered inside this Animate.	`RenderFragment`	`null`
`Delay`	Gets os sets the delay of the animation before it runs automatically, or manually. Remarks Values from 0 to 3000, with step 50ms.	`TimeSpan?`	`null`
`DelayMilliseconds`	Gets os sets the delay in milliseconds of the animation before it runs automatically, or manually. Remarks Values from 0 to 3000, with step 50ms.	`int?`	`null`
`Duration`	Gets os sets the total duration of the animation. Remarks Values from 0 to 3000, with step 50ms.	`TimeSpan?`	`null`
`DurationMilliseconds`	Gets os sets the total duration of the animation, in milliseconds. Remarks Values from 0 to 3000, with step 50ms.	`int?`	`null`
`Easing`	Gets or sets the easing effect. Remarks The list of all supported easings can be found in Easings class.	`IEasing`	`null`
`ElementId`	Gets or sets the animate element id.	`string`
`Mirror`	Whether elements should animate out while scrolling past them.	`bool?`	`null`
`Offset`	Shifts the trigger point of the animation.	`int`	`0`
`Once`	Whether animation should happen only once - while scrolling down.	`bool?`	`null`
`Options`	Defines the animate options.	`AnimateOptions`	`null`
`OptionsName`	Defines the custom name of the options to get from the configuration.	`string`	`Microsoft.Extensions.Options.Options.DefaultName`

Methods

Method	Description	Return	Parameters
`Run`	Runs the animation manually.	`void`