[meta] Animate all the things!

It would be nice if we had a subtle animation for things that currently just appear out of nowhere (like new system notes on an MR). @jschatz1 mentioned Facebook & Twitter as examples. They just have content sort of slide down to make room for the new content. It also might be cool, now that we (almost) have real-time pipelines, to have a subtle animation when the status changes from one to the other. For example if it switches from pending to running it could gradually fade to the next color, or the running icon could animate in a circular way. I know @dimitrieh was working on something like that. It would be a nice feature that would make GitLab more fun, just as long as the animations aren't in-your-face, or a strain on resources (like a neverending CSS animation). What do you think @awhildy?

Some ideas

• http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
• (this is adorable) https://www.designernews.co/stories/65986-new-like-animation-on-twitter

Issues

• #26207 Add Hover animations
• #26208 Animate Dropdowns
• #25630 Why does clicking on a card in issue board scroll the board?

Love this @annabeldunstone!!

A month ago, I was explored how much of a difference a subtle animation even has on reordering cards on the issue board (see the codepen here: https://gitlab.com/gitlab-org/gitlab-ce/issues/21264#note_16700007). But I love the idea of having a more generic approach of having a set of animations we can use for various situations (loading in content, moving content, updating text, etc.).

Maybe I can take a quick pass at categorizing these animations and listing out general guidance, easing/timing suggestions, etc. in the UX Guide, and then we can use that as a starting place to animating all the things! Let me know if that doesn't make sense

Added ~897282 label

Milestone changed to %Backlog

Reassigned to @awhildy

@awhildy doesn't this relate to your comment here? https://gitlab.com/gitlab-org/gitlab-ce/issues/23276#note_18645550

Btw all for this!

The twitter example is a great example of how we could improve our award emoji experience!

great article on this btw https://code.facebook.com/posts/354469174916519/ although more for ios/android..how facebook did their like animations

As for the twitter example https://cssanimation.rocks/twitter-fave/

Which has the following codepen: http://codepen.io/donovanh/pen/dYqxNb

which uses a png sequence illustration:

resulting in

@annabeldunstone @awhildy I had to try this out ;)

timing is off still and positioning is very rough, but an example of whats possible:

http://codepen.io/strages/pen/VmbEqx?editors=1100

Oooooooooo I love it!! The sprite sequence definitely seems like the way to go

Mentioned in merge request !7780 (merged)

mentioned in commit 9e5d9f01

I've begun to add some guidance for animations here: https://docs.gitlab.com/ce/development/ux_guide/animation.html

I think we should begin with the easy small animations. While not as exciting as some of the delightful animations that @dimitrieh as proposed, I think it is good to get the basics smooth first. My suggestions would be to begin with subtle things like hovers, and dropdowns, as although they are small, they will help the whole experience feel more polished. We can then start adding transitions for anytime we update something or we move something on screen (for example: #25630 (closed)). Once that is there, finding the right moments to add delightful animations will be the cherry on top.

Thoughts on this approach @annabeldunstone? Thanks!

removed assignee

@awhildy woo really nice! thanks for that! Would love to see this animation added as a MR (also for other dropdowns!)

although i believe we want to move away from jquery correct @jschatz1 (as that is what is used in the example from @awhildy http://codepen.io/awhildy/pen/jVLJpb

Thanks @dimitrieh! I know we are moving away from jquery. I was using it as I was being lazy with my examples. My code shouldn't be used They are just meant to illustrate the animation.

@awhildy sounds like a great first step! Should we make separate issues for each item, and tackle them in 8.16?

Good call @annabeldunstone! I'll use this as a meta issue, and start creating issues for each of the items. Thanks!

changed title from Animate all the things! to [meta] Animate all the things!

added frontend meta labels

I've added 3 issues in the description above. Some of the other 'update' animations will need to be added as we make elements more realtime. We are already getting them into MRs like !8357 (closed). I'm sure I'm missing other basic animations, but I think this will be a good start. Let me know if there are any concerns, questions, etc. Thanks!

@awhildy @dimitrieh @annabeldunstone I am in with this issue and very excited to see that we are working on this for 8.16.

Super excited about this issue! If we don't do these for this release, they would be great for 9.0!

@dimitrieh we can easily convert the pen of @awhildy as follows. Always love animation in web.

const profile = document.querySelector('.profile');
const profiledropdown = document.querySelector('.profiledropdown');

const dropdownHandler = e => {
  if (profiledropdown.classList.contains('fade')) {
    profiledropdown.classList.remove('fade');
    profiledropdown.classList.add('fade_reverse');
  } else if (profiledropdown.classList.contains('fade_reverse')) {
    profiledropdown.classList.remove('fade_reverse');
    profiledropdown.classList.add('fade');
  } else {
    profiledropdown.classList.add('fade');
  }
}

profile.addEventListener('click', dropdownHandler);

@nmrony would you be able to create a MR with that?

@dimitrieh I would love to Let me finish my WIP MRs first

@nmrony assigned https://gitlab.com/gitlab-org/gitlab-ce/issues/26208 to you in that case

mentioned in issue #24304 (moved)

marked the task #26207 Add Hover animations as completed

marked the task #25630 Why does clicking on a card in issue board scroll the board? as completed

mentioned in issue #27199 (closed)

added ~974571 and removed ~19492 labels

Looks like this issue only has dropdowns left, which has an open MR. I am moving this to UX ready - please let me know if there is additional UX work needed.

mentioned in merge request !10130 (merged)

related https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10130

changed milestone to %Next 2-3 months

mentioned in merge request !9433

mentioned in issue gitlab-design#30

marked this issue as related to gitlab-design#30

mentioned in issue #29985 (moved)

marked the checklist item #26208 Animate Dropdowns as completed

closed

closing this issue as all sub issues are closed

mentioned in issue gitlab#6946