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. 
dotnet add 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 RevealNew

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 ToggleNew

Bind Visible to component state and use AnimationTrigger.Render for enter and leave animations that are not tied to scrolling. 
<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 SizeNew

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 KeyframesNew

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 RunNew

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

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page