0 Comments

There’s now a new version of Blazor.Animate available which adds support for running animations manually. The animated component stays hidden until the animation which bring the component into the view is manually executed.

Here’s an example where OnClick-event of a button is used to bring Counter-component into view:

onclickanimation

The new 3.0.0 version is available from NuGet.

Usage

In order to manually run the animation, the following is needed:

  • Use the IsManual-property
  • Capture reference to the component using ref
  • Manually run the animation using Run()-method for example when a button is clicked

Here is a full example of all the steps:

<button class="btn btn-primary" @onclick="RunAnimation">Animate</button>

<Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" @ref="myAnim" IsManual="true">
    <Counter></Counter>
</Animate>

@code {

    private Animate myAnim;

    private void RunAnimation()
    {
        myAnim.Run();
    }
}

Sample

The Blazor.Animate’s sample has been updated to contain a new “Manual” page which shows how to use the new functionality.

Background

For those not familiar with Blazor.Animate, it’s a Blazor components which allows you to animate how other components are brought into the view. All the animations are powered by AOS.

Here’s a simple example of using the component:

<Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" >
    <Counter></Counter>
</Animate>

For a more throughout introduction, I recommend you to check out the introduction post or the project home site on GitHub.