CSS animations in list view formatting

In this blog post we will have a look at how to add animations to items displayed in a SharePoint list using view formatting. To add animations, we will be using animate css library. The end result will be as shown below where we see a bar graph that represents votes for some fruits.

Animation in SharePoint list view

View formatting

Animate CSS

Creating a SharePoint list and formatting the view

Add some data to the list similar to the table below.

Make sure that only one item has “IsHighest” set to “Yes” and only the last item has “IsLastItem” set to “Yes”.

After that go format this view and paste the bar graph view format JSON specified here in the PnP view formatting samples and save the view format.

In the JSON on line number 99 we can see that the class name ends with “animated bounceInLeft”. This should add the bounce animation. However, since we haven’t added the animate CSS library yet, we will see a non animated bar graph as shown below.

List view without animation

That is it from the view formatting side. All that is left now is adding the animate CSS library to the page so that bounce animation can be triggered.

Combining view formatting and animate css

Hence what we will do is, place the animate CSS library on to the page which has the view formatting. We will make use of an SPFx application customizer to place (render) the animate CSS library.

Application customizer to render CSS

After that, follow the simple and brilliant instructions mentioned by Hugo Bernier in this post to create an application customizer. In that post Hugo creates a custom css file, there is no need for us to do that as we already have the css. Instead, we simply change the URL in step 2 to “/Style library/animate.min.css”.

Add the application customizer

If you think that this file should load only on one page, then the code can be updated to check the URL before injecting the CSS.

Reload and done

Extra information: Column graph

Animation in the column graph sample

Hope this article is helpful. Do have a play with different animations on the view formatting samples and share your thoughts in the comments.

SharePoint developer at Content+Cloud.