Animations in general and Animations for User Cards


(Ani) #1

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?


(Jeff Atwood) #2

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.


(RĂ©gis Hanol) #3

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


(cpradio) #4

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


(Jeff Atwood) #5

It’s a build error, @zogstrip is working on it.

edit: OK, it is there now!


(Joe Seyfried) #6

Looks nice in Chrome+Firefox. Safari (8.0.3) doesn’t display any animations here, however…


(Gerhard Schlager) #7

@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.


(Jeff Atwood) #8

Works in IE as well.

http://shouldiprefix.com/ says prefixes should be used, but they are…


(RĂ©gis Hanol) #9

Yet it doesn’t work in Safari :frowning:

EDIT: the transition property requires the prefix in the value to work in Safari

https://github.com/discourse/discourse/commit/833d4f524749893b6de369a7af82d55e61c57536


(Joe Seyfried) #10

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…


(Sam Saffron) #11

I would only scale when showing not when hiding, not 100% convinced we need the scale animation though.


(RĂ©gis Hanol) #12

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.


(Joe Seyfried) #13

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. :smile:

And, best of all: now it works in Safari, too.


(RĂ©gis Hanol) #14

Yeah I reduced the scaling effect and will leave it for a while in order to see how it feels :wink:


(Erick Guan) #15

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.


(Ani) #16

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.


(Jeff Atwood) #17

Well you can override this immediately in the CSS If you like, right now, via Admin, Customize, CSS.


(Ani) #18

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.


(RĂ©gis Hanol) #19

Sure, have a try at it. But make sure it’s very subtle and that your PR has a GIF showing the animation :wink:


(Erick Guan) #20

One line of code…

https://github.com/discourse/discourse/pull/3285