Blazorise Animate component

Animate your content by wrapping it with the Animate component.

The Animate component uses the Motion runtime to animate content as it enters the viewport or when component visibility changes.

Viewport animations observe the rendered Animate element by default. Use Anchor only when the viewport trigger should be based on another element, such as a shared container that starts several animations together.

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

No script tag is required. The Animate component imports its JavaScript module automatically.

<!-- No script tag is required. Animate imports its JavaScript module automatically. -->

Animation Picker

Select an animation and restart it to compare the built-in effects.

<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 );
    }
}

Viewport Reveal

The default trigger runs when content enters the viewport. Use Once when the animation should only happen the first time the element is seen.

Profile

Reveal content as it enters the viewport.

Activity

Add a small delay to create a simple sequence.

Summary

Keep the animation vocabulary in Blazor code.

<Div ElementId="animate-viewport-example" Padding="Padding.Is3">
    <Div Flex="Flex.Row.Wrap" Gap="Gap.Is3">
        <Animate Anchor="#animate-viewport-example" Animation="Animations.FadeUp" DurationMilliseconds="250" Once>
            <Card Width="Width.Px( 220 )">
                <CardBody>
                    <CardTitle Size="HeadingSize.Is6">Profile</CardTitle>
                    <CardText>
                        Reveal content as it enters the viewport.
                    </CardText>
                </CardBody>
            </Card>
        </Animate>

        <Animate Anchor="#animate-viewport-example" Animation="Animations.FadeUp" DurationMilliseconds="250" DelayMilliseconds="100" Once>
            <Card Width="Width.Px( 220 )">
                <CardBody>
                    <CardTitle Size="HeadingSize.Is6">Activity</CardTitle>
                    <CardText>
                        Add a small delay to create a simple sequence.
                    </CardText>
                </CardBody>
            </Card>
        </Animate>

        <Animate Anchor="#animate-viewport-example" Animation="Animations.FadeUp" DurationMilliseconds="250" DelayMilliseconds="200" Once>
            <Card Width="Width.Px( 220 )">
                <CardBody>
                    <CardTitle Size="HeadingSize.Is6">Summary</CardTitle>
                    <CardText>
                        Keep the animation vocabulary in Blazor code.
                    </CardText>
                </CardBody>
            </Card>
        </Animate>
    </Div>
</Div>

Visibility Toggle

Bind Visible to component state and use AnimationTrigger.Render for enter and leave animations that are not tied to scrolling.

This content stays in normal Blazor markup. The animation is controlled by the Visible parameter.

<Div Display="Display.Flex" Flex="Flex.Column" Gap="Gap.Is3">
    <Div>
        <Button Color="Color.Primary" Outline Clicked="@ToggleDetails">
            @( detailsVisible ? "Hide details" : "Show details" )
        </Button>
    </Div>

    <Animate Animation="Animations.FadeDown" Trigger="AnimationTrigger.Render" Visible="@detailsVisible" AnimateOnInitialRender="false" DurationMilliseconds="220">
        <Alert Color="Color.Info" Visible>
            <AlertDescription>
                This content stays in normal Blazor markup. The animation is controlled by the <Code>Visible</Code> parameter.
            </AlertDescription>
        </Alert>
    </Animate>
</Div>

@code {
    private bool detailsVisible = true;

    private void ToggleDetails()
    {
        detailsVisible = !detailsVisible;
    }
}

Animated Size

Use AnimatedSize when the animated element should also change the space it occupies, such as a drawer, sidebar, or disclosure panel.

Filters

Width is animated together with the slide.

Results

The content area moves because the animated panel changes its occupied width.

<Div Display="Display.Flex" Flex="Flex.Column" Gap="Gap.Is3">
    <Div>
        <Button Color="Color.Primary" Outline Clicked="@TogglePanel">
            @( panelVisible ? "Collapse panel" : "Expand panel" )
        </Button>
    </Div>

    <Div Flex="Flex.Row.AlignItems.Stretch" Border="Border.Is1.Rounded" Background="Background.Light" Height="Height.Px( 220 )" Overflow="Overflow.Hidden">
        <Animate Animation="Animations.SlideRight" Trigger="AnimationTrigger.Render" Visible="@panelVisible" AnimateOnInitialRender="false" AnimatedSize="AnimatedSize.Width" DurationMilliseconds="250" Height="Height.Is100">
            <Div Width="Width.Px( 180 )" Height="Height.Is100" Background="Background.Primary" TextColor="TextColor.White" Padding="Padding.Is3">
                <Heading Size="HeadingSize.Is6" Margin="Margin.Is0.FromBottom">
                    Filters
                </Heading>
                <Paragraph TextColor="TextColor.White50" Margin="Margin.Is2.FromTop">
                    Width is animated together with the slide.
                </Paragraph>
            </Div>
        </Animate>

        <Div Flex="Flex.Grow.Is1" Padding="Padding.Is3">
            <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">
                Results
            </Heading>
            <Paragraph Margin="Margin.Is2.FromTop">
                The content area moves because the animated panel changes its occupied width.
            </Paragraph>
        </Div>
    </Div>
</Div>

@code {
    private bool panelVisible = true;

    private void TogglePanel()
    {
        panelVisible = !panelVisible;
    }
}

Custom Keyframes

Use AnimationDefinition when an animation should be defined in C# instead of by a built-in animation name.

<Div Display="Display.Flex" Flex="Flex.Column" Gap="Gap.Is3">
    <Div>
        <Button Color="Color.Primary" Clicked="@RunAnimation">
            Run custom animation
        </Button>
    </Div>

    <Animate @ref="@animateRef" Auto="false" Animation="@SoftEnter" Easing="@SoftBack" Trigger="AnimationTrigger.Render" DurationMilliseconds="360">
        <Card Width="Width.Px( 320 )">
            <CardBody>
                <CardTitle Size="HeadingSize.Is6">Custom keyframes</CardTitle>
                <CardText>
                    This animation is defined in C# with opacity, translation, scale, and rotation keyframes.
                </CardText>
            </CardBody>
        </Card>
    </Animate>
</Div>

@code {
    private static readonly IAnimation SoftEnter = new AnimationDefinition(
        "soft-enter",
        new[]
        {
            new AnimationFrame { Opacity = 0, Y = "1rem", Scale = 0.96, Rotate = "-2deg" },
            new AnimationFrame { Opacity = 0.7, Y = "0.25rem", Scale = 1.02, Rotate = "1deg" },
            new AnimationFrame { Opacity = 1, Y = "0", Scale = 1, Rotate = "0deg" },
        } );

    private static readonly IEasing SoftBack = new EasingDefinition(
        "soft-back",
        new[] { 0.175, 0.885, 0.32, 1.275 } );

    private Blazorise.Animate.Animate animateRef;

    private void RunAnimation()
    {
        animateRef?.Run();
    }
}

Manual Run

Set Auto to false and call Run() when the animation should be started from code.

<Div Display="Display.Flex" Flex="Flex.Column" Gap="Gap.Is3">
    <Div>
        <Button Color="Color.Primary" Clicked="@RunAnimation">
            Run animation
        </Button>
    </Div>

    <Animate @ref="@animateRef" Auto="false" Animation="Animations.ZoomIn" Trigger="AnimationTrigger.Render" DurationMilliseconds="250">
        <Card Width="Width.Px( 260 )">
            <CardBody>
                <CardTitle Size="HeadingSize.Is6">Manual animation</CardTitle>
                <CardText>
                    The component renders and animates when <Code>Run()</Code> is called.
                </CardText>
            </CardBody>
        </Card>
    </Animate>
</Div>

@code {
    private Blazorise.Animate.Animate animateRef;

    private void RunAnimation()
    {
        animateRef?.Run();
    }
}

API

Parameters

Parameter	Description	Type	Default
`Anchor`	Element whose offset will be used to trigger animation instead of an actual one.	`string`
`AnchorPlacement`	Specifies which position of the element regarding to window should trigger the animation.	`string`
`AnimatedSize`	Specifies which size dimension should be animated together with the configured animation. Possible values:`None`, `Width`, `Height`	`AnimatedSize`	`AnimatedSize.None`
`AnimateOnInitialRender`	Specifies whether the animation should run on the first render.	`bool`	`true`
`Animation`	Specifies the animation effect. Remarks The list of all supported animations can be found in Animations class.	`IAnimation`	`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`	Specifies the easing effect. Remarks The list of all supported easings can be found in Easings class.	`IEasing`	`null`
`Mirror`	Whether elements should animate out while scrolling past them.	`bool`	`false`
`Offset`	Shifts the trigger point of the animation.	`int`	`0`
`Once`	Whether animation should happen only once - while scrolling down.	`bool`	`false`
`Options`	Specifies the animate options.	`AnimateOptions`	`null`
`OptionsName`	Specifies the custom name of the options to get from the configuration.	`string`	`Microsoft.Extensions.Options.Options.DefaultName`
`Trigger`	Specifies when the animation should run. Possible values:`InView`, `Render`	`AnimationTrigger`	`AnimationTrigger.InView`
`Visible`	Specifies whether the content is visible.	`bool`	`true`

Methods

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