Jazzing up your Mashups - Qlik Community

Yianni_Ververis · ‎2016-11-11

While I was working on one of my projects that has lots of kpis and charts, I thought what if, at least for the page change, I add a simple transition. While this can accomplished easily with Angularjs, I went a little bit further and I added transitions on all of the page objects. The best part of this, is not that its only interesting but also very very easy to put together. It's all CSS3 based, so no Javascript will be needed anywhere.

I used the css library Animate.css‌. First, let's start by adding it into our html page

Then comes the very hard part . Add the css class "animated" and the type of animation that you want in your object's div container. In this project I used zoom in from the right for each of the page objects:

To make it more interesting, since I have a side navigation for all my Qlik Sense filters, I decided to add a little drop/bounce effect.

Now, here comes the important stuff. Since there are a lot of animations, it is not good to get our audience confused or tired from all of the things that are happening. There has to be a sequence of things. Since most of the people are reading from left to right, it makes sense to give to the user the same experience, with animations happening one after the other, from left to right so the eye can follow them. Not too slow so its not boring and not too fast so its not confusing. You can achieve that by delaying each object few milliseconds with the "animation-delay" property (CSS3 animation-delay Property).

I found out that 250ms between each animation, was very close to what I wanted to achieve. So, I created a lot of css classes with each being 250 milliseconds apart, like "ms250", "ms500" etc. and I added them into each of my objects.

This is not perfect since there is a difference from loading stating text and giving it a few milliseconds delay, from Qlik Sense objects that need some time to get pulled and drawn from our websocket connection.

Here is the work in progress. The filters bounce only once when the entire app/mashup loads since they are the same on every page, but the objects inside the actual page are hidden and then zooming in on every page transition.

CIO Dashboard‌

https://branch-blog.qlik.com/jazzing-up-your-mashups-aca99809dbc7

Yianni