Animations in general and Animations for User Cards

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?

2 Likes

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.

1 Like

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

2 Likes

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!

1 Like

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

1 Like

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

2 Likes

Works in IE as well.

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

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

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.

1 Like

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

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

1 Like

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

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.

3 Likes

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 :wink:

One line of code…

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

5 Likes