CSS animations in list view formatting

Anoop

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

As explained in this article by Microsoft, view formatting provides a great and an easy way to customize how items can be displayed in a list view. If you haven’t had a chance to look into it, do have a read of the getting started section in that article, watch this video by Chris Kent and have a look at these brilliant samples from the members of the community. These links should surely put you in a comfortable position with view formatting.

Animate CSS

This is a cool library developed by Daniel Eden which provides animations for controls simply using CSS. With this library (CSS) loaded on the page, all we have to do is add a couple of extra class values to the elements that need animation and we are done. The class values needed are “animated animation-name” in which “animation-name” is a value from this list.


Creating a SharePoint list and formatting the view

To achieve the end result let’s start by creating a simple list named “Votes”. Once the list is created, add the following columns to that list.

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

With view formatting we can add CSS styles to elements that are rendered. So one way of combining animate CSS with view formatting would be taking all the needed styles from animate CSS library and adding it to the elements. However, this would be a tedious process and some of the style attributes that are used by animate CSS library may not be supported by view formatting.

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

We will be creating an application customizer that will reference a CSS file present in the “Style library” folder of the SharePoint site. So, please download “animate.min.css” and place it in the style library.

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

Follow the complete instructions in Hugo’s blog to deploy the application customizer. Once the application customizer is deployed, add it to the required site. This should load animate.min.css on all the pages of the site. We can verify this by viewing the browser’s network panel.

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

So we now have the view format in place already and the CSS is present on the page. If we reload the view that has the bar graph view format created earlier, we should see the bounceInLeft animation in action for all the bars in the graph.

Extra information: Column graph

The above steps can be applied to the column graph sample as well and we can use “animated bounceInUp” to add a nice animation to the 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.

Anoop

Written by

Anoop

SharePoint developer at Content and Code.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade