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.