GNOME Bugzilla – Bug 778405
Animate the user accounts carousel
Last modified: 2017-02-13 11:09:26 UTC
It could have some animations powered by CSS.
To be more specific: the main animation it could have are: * un/revealing the Carousel when there's a single user account * transition between pages of the carousel * animation of the moving arrow
Created attachment 345363 [details] [review] user-accounts: Animate page transitions in the Carousel
Created attachment 345364 [details] [review] user-accounts: Animate the Carousel Arrow
(In reply to Felipe Borges from comment #3) > Created attachment 345364 [details] [review] [review] > user-accounts: Animate the Carousel Arrow If you are a designer and want to tweak the Arrow animation, you can open the gtk inspector, go to the CSS tab and paste: .carousel-arrow { animation-duration: 0.5s; animation-timing-function: linear; animation-fill-mode: forwards; } The css animation properties are well documented at http://www.w3schools.com/css/css3_animations.asp ps.: gtk+ might not support everything yet.
You can try these patches by building the wip/feborges/new-users-panel branch https://git.gnome.org/browse/gnome-control-center/log/?h=wip/feborges/new-users-panel Here is a preview of the animations as they are so far https://webmshare.com/play/omJO6
Created attachment 345366 [details] [review] user-accounts: Animate the Carousel Arrow
(In reply to Felipe Borges from comment #6) > Created attachment 345366 [details] [review] [review] > user-accounts: Animate the Carousel Arrow https://webmshare.com/play/gKJOj
Review of attachment 345366 [details] [review]: ::: panels/user-accounts/data/carousel.css @@ +14,3 @@ margin-bottom: -1px; + animation-duration: 200ms; + animation-timing-function: ease-in-out; These changes were suggest by jimmac on irc.
There are still the bugs, which I mentioned on Bug 767065. Each patch separately works quite nicely, however, it doesn't work so good together. See what happens when you switching from the second page to the first page (opposite direction seems ok). Can't we somehow disable the arrow animation during the stack animation? https://webmshare.com/dEJyO
Created attachment 345431 [details] [review] user-accounts: Animate the Carousel Arrow
(In reply to Felipe Borges from comment #11) > Created attachment 345431 [details] [review] [review] > user-accounts: Animate the Carousel Arrow in this interaction I reset the arrow_start_x point every time the stack page changed (size-allocate), in doing so, we don't have the delayed jumps anymore. What do you think?
That's really much better, but still, it looks to me a bit odd when changing the stack pages. What do you think about the following patch on the top of yours?
Created attachment 345462 [details] [review] user-accounts: Don't move with arrow during size-allocation The arrow doesn't move during the stack animation, which is what we want.
Review of attachment 345462 [details] [review]: it works like a charm. It is good for me. lgtm?
Created attachment 345466 [details] [review] user-accounts: Don't move with arrow during animations Don't move with the arrow during the stack animation in order to avoid some ugly movements...
The previous patch doesn't work correctly if you modified username or so... can you take a look at the new one, please? It still behaves slightly odd only if you add new user and the new user is on another page, but I don't know what to do with...
Screencast for designers: https://webmshare.com/q7JJq
(In reply to Ondrej Holy from comment #17) > The previous patch doesn't work correctly if you modified username or so... > can you take a look at the new one, please? It still behaves slightly odd > only if you add new user and the new user is on another page, but I don't > know what to do with... Or rename user and it moves to another page... but this is also problem for attachment 345363 [details] [review].
(In reply to Ondrej Holy from comment #19) > (In reply to Ondrej Holy from comment #17) > > The previous patch doesn't work correctly if you modified username or so... > > can you take a look at the new one, please? It still behaves slightly odd > > only if you add new user and the new user is on another page, but I don't > > know what to do with... > > Or rename user and it moves to another page... but this is also problem for > attachment 345363 [details] [review] [review]. it's better. I would say that we would go with these for now and fix the corner cases later (we have a UI freeze tomorrow).
Created attachment 345605 [details] [review] user-accounts: Disable animations when reloading users Animations cause unwanted effects when reloading users, disable them.
I am happy now... push them please if you like it...
(In reply to Ondrej Holy from comment #22) > I am happy now... push them please if you like it... ...and if designers like it too...
Attachment 345363 [details] pushed as bce05cb - user-accounts: Animate page transitions in the Carousel Attachment 345431 [details] pushed as b8983f9 - user-accounts: Animate the Carousel Arrow Attachment 345466 [details] pushed as c8b5350 - user-accounts: Don't move with arrow during animations Attachment 345605 [details] pushed as b4c2636 - user-accounts: Disable animations when reloading users