[Patternfly] Animations

[Eric Wittmann]

+1 to animations being great when used properly.  They can improve user 
interactions and make an application more interesting and fun.  Of 
course, animations done badly can have the reverse effect. :)

I disagree about the icon animation - I think it looks super cool and I 
love it.

-Eric

On 12/14/2015 10:03 AM, Gabriel Cardoso wrote:
> Hi Andres,
>
> I agree with you, we can make a good usage of animation to improve user
> experience.
>
> Great job on the toastr :) I agree with Matt, I’d remove the progress bar.
>
> I’d also remove the animation in the icon. When it comes down I can
> recognize that it is success because of the green, and I’m interested in
> the text, so I felt that the icon animation calls attention to the icon
> itself, distracting me a bit from the content that I’m interested in.
>
> Thanks,
> Gabriel
>
>> On Dec 14, 2015, at 11:35 AM, Matt Carrano <mcarrano at redhat.com
>> <mailto:mcarrano at redhat.com>> wrote:
>>
>> 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
>> <mailto: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 <mailto:Patternfly at redhat.com>
>>     https://www.redhat.com/mailman/listinfo/patternfly
>>
>>
>>
>>
>> --
>> Matt Carrano
>> Sr. Interaction Designer
>> Red Hat, Inc.
>> mcarrano at redhat.com <mailto:mcarrano at redhat.com>
>> _______________________________________________
>> Patternfly mailing list
>> Patternfly at redhat.com <mailto:Patternfly at redhat.com>
>> https://www.redhat.com/mailman/listinfo/patternfly
>
> Gabriel Cardoso
> UX designer @ Red Hat
>
>
>
>
>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>