20

Android Enthusiasts recently got the redesign which also involved adding those very beautiful voting animations.

Here is my attempt at an animated GIF to illustrate what I mean:

(For a better representation, you can visit some question and try it)

That's oh so cute. Any plans on this? Please?

(They would be great on the sites which have similar circles around the voting arrows, but maybe somewhere else as well.)

17
  • 20
    This was our plan all along — if people liked them, we could begin to implement them elsewhere! Apr 3, 2015 at 16:29
  • 4
    @Kurt AH that's great! Yes! Yes! Please?
    – nicael
    Apr 3, 2015 at 16:51
  • @KurtisBeavers I don't have 10K on Android, but I like to imagine it also has animated delete votes.
    – user259867
    Apr 3, 2015 at 17:55
  • @pizza No, unfortunately :( Time to request? :D
    – nicael
    Apr 3, 2015 at 17:55
  • I think they're awesome and add a modern feel to the site with all the AJAX 2 stuff out there.
    – dan
    Apr 3, 2015 at 18:28
  • 2
    They resemble material design. But that only applies to Android.
    – Mooseman
    Apr 11, 2015 at 2:50
  • @Moose Looks like every site got a somewhat material design...
    – nicael
    May 11, 2015 at 18:09
  • @nicael Any specific examples?
    – Mooseman
    May 11, 2015 at 18:11
  • @Moose Meta? SO? SU? WebApps? Apple.SE? Webmasters? AskUbuntu? etc...
    – nicael
    May 11, 2015 at 18:13
  • @nicael Not like this...
    – Mooseman
    May 11, 2015 at 18:15
  • Oh. But anyway those anims are gorgeous.
    – nicael
    May 11, 2015 at 18:21
  • 4
    @Gilles If you don't like it you should post your feedback on meta.android and see if the community feels the same way. May 12, 2015 at 11:16
  • 1
    @Gilles apparently you have it - the score changes. Also, does you computer lag during the animations so you don't find the feedback to be immediate? :D I doubt.
    – nicael
    May 14, 2015 at 16:10
  • 1
    @KurtisBeavers is this still planned to be be implemented on other sites? :) Oct 31, 2016 at 16:19
  • 2
    I’m voting to close this question because voting buttons are no longer themed across the network as of the 2018 site design changes. Nov 28, 2022 at 7:24

2 Answers 2

11
+250

I've got some of the CSS from Android.SE and made a CSS file:

All the code is from Android SE, I just condensed some of the selectors.

It does the pulsing for the voting and favourite buttons, and pulses on click as well.

The cool animation that happens when you click the button (as shown in your gif) doesn't work though. Instead, it goes sideways (rather than upwards/downwards). I'm no expert on CSS and don't know for sure why it doesn't work - although I'm pretty sure it's because of the way the SVG file is designed, and where the voting signs are positioned.

Anyways, here's what this CSS will do for you:

enter image description here

At least it's better than the current CSS :)

@keyframes pulse {
    0% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -ms-transform: scale(1.1, 1.15);
        -webkit-transform: scale(1.1, 1.15);
        transform: scale(1.1, 1.15)
    }
    100% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
@-webkit-keyframes pulse {
    0% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -ms-transform: scale(1.1, 1.15);
        -webkit-transform: scale(1.1, 1.15);
        transform: scale(1.1, 1.15)
    }
    100% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
@keyframes press {
    0% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -ms-transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2)
    }
    100% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
@-webkit-keyframes press {
    0% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -ms-transform: scale(.8, .8);
        -webkit-transform: scale(.8, .8);
        transform: scale(.8, .8)
    }
    100% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
.vote-down-off,
.vote-up-off {
    position: relative;
    transition: all .1s ease, background-color .4s ease, background-position .4s ease;
    -webkit-transition: height .1s ease, background-color .4s ease, background-position .4s ease;
    -moz-transition: all .1s ease, background-color .4s ease, background-position .4s ease;
    -ms-transition: all .1s ease, background-color .4s ease, background-position .4s ease;
    -o-transition: all .1s ease, background-color .4s ease, background-position .4s ease
}
.vote-down-off:hover,
.vote-up-off:hover,
.star-off:hover,
.star-on:hover {
    -webkit-animation-name: pulse;
    -webkit-animation-duration: .5s;
    animation-name: pulse;
    animation-duration: .5s
}
.vote-down-off:active,
.vote-up-off:active,
.star-off:active,
.star-on:active{
    -webkit-animation-name: press;
    -webkit-animation-duration: .5s;
    animation-name: press;
    animation-duration: .5s;
}

It's on Github and you can append it to the head with $('head').append('<link rel="stylesheet" href="https://cdn.rawgit.com/shu8/SE-Answers_scripts/master/coolMaterialDesignCss.css" type="text/css" />');.

If you want it in a userscript format (to auto-add the CSS to all SE sites), get it from the dev version of my SE Additional Optional Features userscript at StackApps.

2
  • Thanks, but before asking this, I've tried importing animations from Android. And found it not enough.
    – nicael
    Jun 14, 2015 at 22:09
  • @nicael welcome back :) Yeah - I know they're not perfect - but they give the overall feel of AndroidSE's style :) This is only until SE start implementing this in all sites! Jun 15, 2015 at 6:13
5

Ouch! What the hell is this?

An animation has no business being triggered by a routine, obvious event such as clicking on a button at the location of the animation, or hovering on that button. Animations attract the user's attention. Attracting the user's attention to what is under the cursor is pointless: the cursor is already there. Attracting the user's attention to a routine action such as voting is wrong, especially since it's merely providing feedback that the button has been clicked.

You should attract the users's attention if something happens that calls for them to react. An animation to confirm clicking doesn't only make no sense, it's actively wrong.

You may find the animation pretty. I don't, but prettiness is in the eye of the beholder. Either way, that's the wrong question. The correct question is whether it's good user experience. An attractive user interface can be good for user experience, but it isn't the determining factor. The primary factor in good user experience is whether it makes the site easier to use. These animations make the site harder to use: when I've voted, something forcefully grabs my attention for an extra second or so. This is a complete waste of attention.

If you want fancy animations, write a userscript. Or play a game. These animations have no place on a functional interface.

7
  • 1
    How quickly are you going through questions and voting that a .2 second animation is slowing you down ? Jun 8, 2015 at 8:59
  • @User112638726 The animation lasts a bit more than .2 seconds, but it isn't the duration of the animation that's the problem, it's the capture of attention. The cost is that it interrupts my visual concentration, so I need to focus again on what I was doing, which costs 5–10 seconds. Jun 8, 2015 at 9:59
  • 2
    I'm not being funny, but you might have ADD if a simple animation is causing you to lose focus for 10 seconds every time you see it. Jun 8, 2015 at 10:08
  • @User112638726 No, this has absolutely nothing to do with ADD. Human visual cortex is attracted to motion at the edge of the perception zone, like many other animals. Jun 8, 2015 at 10:52
  • Why would the animation be at the edge of your vision, you are clicking the button. Do you not look at it when you click? And even 5 seconds is a long time for a normal person to be distracted by a simple animation, especially after seeing it multiple times. Jun 8, 2015 at 10:58
  • @User112638726 I look at the button when I click, then I move my attention back elsewhere. This can be immediate when the button is fixed, but not when it's animated, because the sudden animation grabs my attention. It doesn't help to have seen the animation before: the distraction is at a lower level, before I've processed the “seen before” bit. The very fact that I'd process a “seen before” recognition is part of the distraction. Jun 8, 2015 at 11:28
  • 3
    I was actually saying it may take longer because someone isn't used to it or finds it interesting the first couple of times. After that though if its taking up 5 seconds everytime you click it then there's something very wrong. I personally don't like or dislike it but i really don't think its distracting at all. Jun 8, 2015 at 12:42

Not the answer you're looking for? Browse other questions tagged .