add touch feedback to buttons

[stophecom]

I'm trying to add a kind of bubble effect (css animation) to the icon inside buttons. This works pretty well as it is triggered on :active. Now, I need to "delay" the js execution for as long as the animation runs. Options I see:

• do the animation with js (e.g. with transit.js) with callback
• add special classes like Angular http://www.divshot.com/blog/tips-and-tricks/angular-1-2-and-animate-css/
• detect the end of the css animation like http://www.sitepoint.com/css3-animation-javascript-event-handlers/

@njam probably the Angular approach is the best way. (also mind future SVG animated icons) wdyt?

[njam]

It sounds to me like Angular detects the animation duration from the CSS properties ("determined by introspecting the CSS and determining transition duration"). I'm wondering though - should we really delay the execution of the actual action, to make it look faster? Shouldn't the intended action happen in parallel. If we keep the animation short, we can minimize the risk of the action finishing before the animation.

[stophecom]

agree. problem is that, in a lot of situations, the component reloads on click -> the animation gets cut off.

[njam]

How long are the animations you have in mind? AJAX requests take here in the US to our servers ~30-150ms.

[stophecom]

200-400ms :disappointed:

[njam]

Hmmm, it feels to me a bit user-un-friendly to delay actions for that long, to display an animation.

[njam]

The main goal should be to let the user know something is happening, in case the request takes longer than usual right? How about making the button background darker on click (like on Android, iPhone or google.com) and making sure that this effect will be shown at least for X milliseconds (with javascript). So if someone taps very quickly on a button, it would still be in :active visual state for 100ms?

[njam]

btw what google.com is using for all textual links is just making it red on click :)

[stophecom]

about the :active I have the impression it sometimes doesn't get triggered if you touch. (that's what you mean I guess?) - maybe the whole issue with the animation is a bit overkill. I will focus on the spinner, and re-evaluate if there is an actual benefit of doing this in general. (Or if it'd rather make sense to do this on an individual basis)

[stophecom]

With the spinner in place I think we can close this?

[njam]

Will not be in all places, but it's okay for me.