[Patternfly] Animations

[Matt Carrano]

Hi Andres,

In general I like the idea of adding animation in selective places, and
agree that if done well, it can enhance the experience, draw the user's
attention, and help convey behavior.

As for the toaster alert, I like the way it fades in/out.  But the progress
bar is unnecessary and potentially confusing IMO.  It implies that there is
an associated process happening in the background.

Matt

On Mon, Dec 14, 2015 at 6:14 AM, Andres Galante <agalante at redhat.com> wrote:

> 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
>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
>


-- 
Matt Carrano
Sr. Interaction Designer
Red Hat, Inc.
mcarrano at redhat.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20151214/f727de33/attachment.htm>