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.

Blazorise acts as a wrapper for the animation functionality provided by the aos library. If you're having any issues please make sure to also take a look at the aos library repository.

There might be certain content, that due to how they are structured/styled might not be possible to animate.

It is not possible to animate:

Modal

Take note, that certain elements in the page may affect how the aos library finds the "offset" element necessary to trigger the animation. It is known that Sidebars for instance can affect this behaviour. 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 given below, is configured as explained.

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.3.4.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`