[Patternfly] Animations

[Andres Galante]

Hello Patternflyers!

I've been thinking about adding animations on some of our components. I
know that there is a thin line between a good animation and a bad one, and
we've learn our lesson after the flash era, but If we use them wisely,
animations will enhance our interactions.

I've animated the new toast notification pattern
<https://www.patternfly.org/patterns/toast-notifications/>, and although it
is a simple example there are some thing going on:

First the toast appears, directing the attention of the user to the
notification.

Then the icon appears telling the user what kind of notification he is
looking at.

Immediately after the text fades in, directing the attention of the user to
the text, and half a second later the action kicks in.

There is also a progress bar that indicates the 8 seconds that it takes to
disappear.

In total it takes 9 seconds: 0.5 to appear, 8 seconds on screen and 0.5 to
disappear.

Here is the result (click on "show toast notification"):

http://codepen.io/andresgalante/pen/MKaoGR

Maybe this is over the top and there is too much going on. I just want to
introduce this topic as a tool we can (and IMO should) use to improve our
interactions.

If we want to go on with it, we can even create a guide to standardize when
to use them and how to style them.

What do you think?

Andrés
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20151214/08fabd22/attachment.htm>