Add more animations to the gtk-theme

[ghost]

Please add "design"-label.

The theme should have more animations to look modern. Some examples could be found in the pop-theme. I do not know how to make gifs. Maybe someone else could so the designers could see some examples and look what would fit to the theme.

[clobrano]

Hi @NusiNusi,

to make gifs, you can install Peek from Gnome Software. Just be aware to use Communitheme on Xorg (you can select it at login) because last time I tried, Peek wasn't working on Wayland.

In the meantime, can you explain where you'd like to see more animations? At least designer can have an Idea of what you expect.

[ghost]

@clobrano Thank you for the tip. Here are some animations i found in other themes (pop-theme). I am not sure what other animations are possible. These animations look a lot like google materials design. Of course i am open to a different design-language with other animations.

Stackswitcher

Tabs in nautilus

In nautilus

The little headerbar buttons

Buttons (for the button-behaviour i opened another issue #164 )

[jim3872]

Pop theme would form a great base to work from ;)

[madsrh]

Yes! @NusiNusi is definitely lacks some animations to look modern.

I've been looking at POP OS too and I really like it. Changing between a lot of folders quickly in Nautilus feels a bit annoying, but I guess that's not the typical use case. We could make the Communitheme animations slightly more discreet IMHO. I think subtle is the keyword here.

Just looking at CodePen for animated buttons shows that there's a million ways to do this. We could simply ask isantop to help implement this. This would free up the other devs, to do other work, but of course we should know exactly what we want first. We should creating a few mockups to begin with.

Can you think of other parts of the UI that is animated?

• Sidebars (Nautilus, Gnome Tweak, ...)
• Stackswitcher (Natutilus, Softwarecenter, Rythmbox, ...)
• Checkboxes (already done)
• Little headerbar buttons
• Tabs
• Buttons (On hover / press)
• ?

[ghost]

+1 for asking isantop! I asked him already but he did not answer me. It would be better when someone of the communitheme-team asks him. I am just an outsider. Maybe you @madsrh :) His help would be great and i am sure he has some awesome ideas when it comes to animations. Pop-theme is top-notch when it comes to animations and pushing possibilities of gtk-themes to the edge. Another part that could be (more) animated:

• progressbar (i remember progressbars with a glow)
• minimize, maximize and close-button when clicked?

[ghost]

@madsrh could you find a moment to reach isantop? Something new on that?

[madsrh]

@NusiNusi I'm still investigating difference animations ideas. I'll post here before moving on.

[ghost]

looking forward to it! any other themes we could take some inspirations from? couldnt find other themes with animations.

EDIT: the Adapta-theme is full with animations too. Maybe this could be worth investigating: When the window gets closed the close-button changes it color. In communitheme it could be: close-button is at the moment (ubuntu?-)orange when clicked it gets red for a moment or changes it form. i am for getting red.

[clobrano]

When the window gets closed the close-button changes it color.

I guess this is because it hasn't any other effect when pressing the button. Communitheme has a "press" effect on the button already and I don't feel the need to a color change. Also red would be too similar to current orange

[ghost]

@madsrh i discovered the beautiful material-ubuntu-theme from @nana-4 . It has very nice animations too. I recommend you to have a look at it.

[clobrano]

I would not overkill though. It's nice and cool when you see it the first times, but think about working on it for hours.

[madsrh]

I would not overkill though. It's nice and cool when you see it the first times, but think about working on it for hours.

+1 👍

To quote myself:

Changing between a lot of folders quickly in Nautilus feels a bit annoying, but I guess that's not the typical use case. We could make the Communitheme animations slightly more discreet IMHO. I think subtle is the keyword here.

But yes, obvious let @nana-4 take a stab at it! :smiley:

[didrocks]

I would not overkill though. It's nice and cool when you see it the first times, but think about working on it for hours. +1 as well ;) Animations needs to make you understanding the physical practility of an action but shouldn't go on the away. Ideally, they teach you something and then accelerate as you are using it to get out of the way.

One example was the "hide" animation in unity, which was slow at first, and then get quicker as you minimize apps (up to a max)

[nana-4]

FYI, Pop, Adapta and material-ubuntu-theme that mentioned here are all derivatives of Materia theme which based on Material Design. :)

And I agree here with subtle animations @madsrh said. In many cases, Material ripple effects wouldn't suit with Cmmunitheme IMO.

[madsrh]

Perhaps it's just the colors that makes it jump out. Matcha also uses Material Design, but the color is way more subtle.

If you've got an idea @nana-4, please just take a shot at it 😄

[nana-4]

@madsrh Hmm, at least to me Matcha doesn't look like Material Design. It looks flat design as written in the description.

Anyway I'll post it here if I find a good idea. :)

[madsrh]

@nana-4 Yes it's a Arc derivative, but I was refering to the animation in the pathbar.

Great! Looking forward to seeing what you come up with 😄

[ghost]

@madsrh pretty sure you meant @nana-4 ;-) I am looking forward to his animations too.

[fitojb]

For any animations you add, please ensure they’re brief and subtle; otherwise they’ll become tiresome and annoying very quickly.

[clobrano]

@fitojb we're all on the same page

[nana-4]

Here are a few ideas about underlines in stack-switcher/path-bar:

1. Checked animation with hover background (#225)

2. Checked animation with current design

3. Hover animation like Firefox Quantum

I personally like No.3 (the hover animation). :wink:

[ghost]

I like no. 1 but without the orange line. Instead of orange the line could be grey (EDIT: white as the text). Already enough orange in the theme. But this is only my little opinion.

[pojntfx]

I like 1 as well, otherwise there is a little to much movement IMHO

[godlyranchdressing]

@nana-4 I really like 3, but that's only because I prefer the hover animation with no background.

I've been experimenting on my own, but I'm not really sure what look to go for.

[nana-4]

@godlyranchdressing Sorry for the late reply. I also still like 3. :)

IMHO, your gif's animation might be too dramatic.

But inspired by your animation and this post, I came up with such a sidebar animation:

It's just an idea, but I think such a subtle animation would not feel annoyed.

[ghost]

@nana-4 I think with adding bold black text and black symbol it would be even better.

[nana-4]

@NusiNusi Here is:

Indeed (IMO) it looks better than before. :)

[ghost]

IMHO perfection!

[clobrano]

Interesting :smile: , I'd like to try that

[madsrh]

+1 Let's try it. Like CraigD's mockup on the forum, this is, as part of the community requested, less orange 👍

[ghost]

Like CraigD's mockup on the forum, this is, as part of the community requested, less orange +1

I see with words i cant make my suggestions clear enough. Mockups is the way to go... Need to learn how to make them.

[CDrummond]

@nana-4 It think it'd be nicer if the selected item text still aligned with the rest. Either that, or the icon should move too - then it'd look like the orange bar moved the icon + text. But my preference would be to keep the text aligned.

[ghost]

@nana-4 @madsrh @clobrano I found some very nice animations on this site. It shows some animations that could be done with lines like communitheme has in some places. pretty sure it can give at least some inspiration. http://littlesnippets.net/some-inspiration-for-menus-using-animated-lines/

[madsrh]

What do you guys think about the way the text is animated here when a sidebar button is pressed? Use the gear in the YouTube player to set playback to 0.5

[ghost]

@madsrh Do you mean that the text looks like it get pressed? It becomes a little smaller? I like it! Would this be possible @nana-4 ? EDIT: how about the opposite: text gets a little bigger?

[madsrh]

@NusiNusi Yes, pressed down. It hard to describe in english, but check the videos and 50% or even 25% speed. I don't think the opposite (bigger) would make any sense. To me, this animation translates 100% to pushing something in the real world - like pushing your hand into a foam pillow and how it "slowly" returns to its original shape.

I hope @nana-4 or @godlyranchdressing will give this a try 😄

[ghost]

When the selected item on sidebar gets bold black text + black symbol + vertical orange line it will be the perfect equivalent to the selected item in stackswitcher (only difference is the horizontal line and inverted text- and background-color. When this (very beautiful) animation gets added to the sidebar we should talk about if we should add it to the stackswitcher too. And yes, pushed means smaller, you are right. Looking forward to the implementation.

[madsrh]

Not sure if this belongs here or in #397 :man_shrugging: I just stumbled upon the hover effect for buttons, and wanted to suggest this:

*button:hover { transition: all .2s ease-in-out; }
*button { transition: all .4s ease-in-out;   }

It might be a bit too much with the long fadeout, but just a suggestion :smile:

IMHO it feel more smooth, but the current does feel very fast responding.

[clobrano]

This was because we have no transition on non-flat buttons :D

I feel that .4s and ease-in-out is a bit too slow. What about this (.4s ease-out)

[madsrh]

@clobrano +1 let's give it a try 😁

[Feichtmeier]

Can't we close this? Ripple effects belong in material design themes. This is the wrong theme for this

[madsrh]

Sure, but I think there's still room for more animations IMHO - like the pressed sidebar I mentioned above

[Feichtmeier]

Didn't we decide against that sidebar stripe? oO Or which sidebar look are you talking about?

[madsrh]

@Feichtmeier the one mentioned here (Only the text animation, not the stripe): https://github.com/ubuntu/communitheme/issues/184#issuecomment-382121981

Can you make it happen @Feichtmeier?

[Feichtmeier]

@madsrh I am not sure if I interpret this ultra hd gif correctly ;D Sorry if I am a bit slow here. You are talking about the active effect, right? You want to increase the fon-weight in active state, something like this?

[Feichtmeier]

Why is this gtk2 :0 ?

After watching the video mads attached and not the gif, I have to admit that those animations do not really fit to the overall look and feel we currently provide, in my opinion.

[clobrano]

My bad, it's not gtk2 indeed. Alright, we can close this one as well