0 Comments

Blazor.Animate is a new MIT-licensed Blazor-component which allows you to easily add fade, slide and zoom-effects into your Blazor applications. Blazor.Animate is powered by the AOS-library.

blazoranimate

Blazor.Animate is available through Nuget. Its source code and project home can be found from GitHub.

What can it do?

With Blazor.Animate you can animate how other components are brought into the view.

How to use it?

To animate a component, wrap it inside Animate-component and use the Animation-parameter to define the animation:

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

Is it really that easy?

Yes, after you have added the required Nuget-package and JSInterop. For guidance, please see the readme for a more throughout Getting Started guide: https://github.com/mikoskinen/Blazor.Animate

What animations are supported?

Here’s the built-in animations provided by Blazor.Animate:

  • Fade
  • FadeIn
  • FadeUp
  • FadeDown
  • FadeLeft
  • FadeRight
  • FadeUpRight
  • FadeUpLeft
  • FadeDownRight
  • FadeDownLeft
  • FlipUp
  • FlipDown
  • FlipLeft
  • FlipRight
  • SlideUp
  • SlideDown
  • SlideLeft
  • SlideRight
  • ZoomIn
  • ZoomInUp
  • ZoomInDown
  • ZoomInLeft
  • ZoomInRight
  • ZoomOut
  • ZoomOutUp
  • ZoomOutDown
  • ZoomOutLeft
  • ZoomOutRight

Are there any samples of these animations?

Blazor.Animate’s sample site contains a testbed-page which can be used to check all the animations: https://animateblazorsamplessvc.azurewebsites.net/testbed

image

Is that all?

There’s also easings. And default animations. And named animations. And anchoring.

All these are demonstrated in the sample and in the readme.

Did you do all the animations?

No. All the animations are provided by AOS.

Where to learn more?

The best way to learn more is to head to GitHub and to browse the source or the sample code. If you have any questions, please submit a GitHub issue on the repo.