Using animations in Valo

Flow
1

Is there any documentation or examples on how to use animations in Valo?

In the QuickTickets Dashboard example there were a few instances that used animations (eg. v-animate-reveal) that I used in my application. However, after moving to Valo, these no longer work and I can’t find any documentation or reference on using the Valo embedded animations.

I’m not a theming or CSS expert so obviously Valo is a godsend, but without examples or some documentation it is still sometimes very challenging.

2

More tutorials are coming a bit later, unfortunately we didn’t manage to prepare those before the release. But there are some built-in animation helpers in Valo as well, and possibly more coming if requested.

In the meantime, you can copy the animation styles for the reveal from the dashboard theme, or use the valo-animate-in-fade mixin.

3

I had tried to copy some of the animations from dahsboard theme and they were working fine until and including 7.3.0rc1, but with the release of 7.3.0 they started generating sass compiler errors during the build so I removed them.

I will wait until you guys will have examples/tutorials. Thanks.

4

Hello Jouni,

Any update on the documentation/samples animations in Valo, anything will be great

5

Ditto, more docs would be v useful. I had this question re subWindow colouring.

https://vaadin.com/forum#!/thread/8253188

6

https://vaadin.com/api/valo/

7

Hi,
I’m noticing that on the QuickTickets Dashboard demo now there’s a visualization problem on Google Chrome: notifications with stylename “bar success small” are not displayed on the bottom of the page, but fullscreen…

Is there any way to solve the problem? Is it due to valo-animate?

Thanks

8

Hi, and thanks for reporting.

Something changed between Chrome 40 and Chrome 41, which causes this unexpected behavior. There’s a fix in Vaadin 7.4.4:
https://dev.vaadin.com/ticket/17252

The Dashboard demo is not yet updated to use the new version.

9

Yes, this was fixed with Vaadin 7.4.4 :slight_smile:

10

I noticed the valo demo doesn’t seem to have any animation demo code. Might be nice.

Thanks.

11

Im too waiting for the animation documentation or demo which will be useful for us to learn.
As of now there are 4 slide animations and 2 fade animations according to
https://vaadin.com/api/valo/
. Is there any more animations given in vaadin by default ?