The discussion revolves around implementing subtle animations for user cards in a web application. LuaTenshi initiated the thread by noting the lack of smooth animations when user cards appear. codinghorror supported the idea, suggesting subtle in-out animations. zogstrip implemented a fade-in and scale-up animation, which was confirmed to work in Chrome, Firefox, and IE, but not Safari due to a build error and missing CSS prefix. JSey and gerhard confirmed the animations worked in most browsers, though zogstrip acknowledged the Safari issue and fixed it by adding the necessary prefix. sam suggested scaling only on showing, not hiding, to improve the effect. zogstrip agreed and reduced the scaling effect. fantasticfears questioned the need for prefixes, noting that autoprefixer should handle it. LuaTenshi praised the animations, noting they fixed a bug where user cards sometimes got stuck, and codinghorror confirmed the issue could be overridden in CSS. The thread concludes with zogstrip acknowledging the need for smoother transitions when switching between user cards, with fantasticfears providing a visual example.
I have noticed that user cards just pop in without any sort of smooth animation. I was wondering if there is anything planned when it comes to making the user-cards a little fancier?
There seem to be no animation options on Discourse at all how ever the forum does have animations here and there. I was wondering if there will be a way to configure and or change these animations in the future?
Sure that is a good idea, subtle animations for usercard in and out would be accepted as PRs!
We do that for lightboxed images. @zogstrip added it.
Just added a subtle fade-in + scale up animation for the user cards, what do you guys think?
https://github.com/discourse/discourse/commit/64d0d12632b5833cd0fe1c5ec2945b10b0b9699d
Maybe something is wrong with my setup, but I still don’t see any animation taking effect. I’ve reloaded multiple times using Windows 7 Chrome 40.0.2214.115 m
It’s a build error, @zogstrip is working on it.
edit: OK, it is there now!
Looks nice in Chrome+Firefox. Safari (8.0.3) doesn’t display any animations here, however…
@zogstrip There are no animations when you click on an avatar while another user card is already visible. Is this the intended behavior? Other than that, it looks great.
Works in IE as well.
http://shouldiprefix.com/ says prefixes should be used, but they are…
Yet it doesn’t work in Safari 
EDIT: the transition property requires the prefix in the value to work in Safari
https://github.com/discourse/discourse/commit/833d4f524749893b6de369a7af82d55e61c57536
Not as far as I can see. #user-card and #user-card.show use transform: scale without prefixes. Additionally, #user-card has the CSS line
transition: opacity .2s, transform .2s;
that breaks in Safari…
I would only scale when showing not when hiding, not 100% convinced we need the scale animation though.
I agree for the scale animation. It worked great for the thumbnails but doesn’t really make sense for something that’s appearing out of nowhere.
Dunno - I kinda like it. The two animations give somewhat a “cathode ray tube” style which might be lost on the younger generation, but it still looks cool. 
And, best of all: now it works in Safari, too.
Yeah I reduced the scaling effect and will leave it for a while in order to see how it feels 
gem autoprefixer-rails may be a good option to add prefixes.
@zogstrip What do you think of transition for change user card by clicking others user card when the user card is being shown.
Looks and feels great so far, noticed that it magically fixed the problem with Usercards sometimes getting stuck. So I no longer have to use…
$("#user-card").removeClass("hidden").addClass("hidden");
http://img.twisted.cat/tenshi/2015/03/05_14-56-15.gif
Can’t wait for some settings to be added so that devs can easily change the current transition or make their own transitions.
Well you can override this immediately in the CSS If you like, right now, via Admin, Customize, CSS.
Yes forgot to mention that its possible to do that, and I am already doing it as you can see in my gif. (Circle avatars.)
I was just saying that it would be nice to have a dialogue with a few pre-sets for people who are lazy like me, or for people who don’t know CSS well enough to do animations.
Sure, have a try at it. But make sure it’s very subtle and that your PR has a GIF showing the animation
