How to improve transition between hiding and showing groups

[brookelutig]

Hello everyone,

I’m experiencing some issues with user experience in my app related to a workflow where users can show and hide a group using a custom state.

Currently, I’m saving the position on the page where users are when they click to show the group using JavaScript. Then, I send them back to that position when they hide the group.

This workflow is causing the show/hide process to feel very choppy. It seems that the page is shown before it’s fully ready or visible.

How can I ensure that the group becoming visible is completely visible before the group that’s supposed to hide actually hides?

Any suggestions or advice would be greatly appreciated!

[hergin]

It may or may not solve your problem. But the layout of the visible/hidden groups sometimes affects how they appear/disappear.

Recently, I have tested it over here: Glitchy collapse animation - #8 by hergin

By just playing with the layout of these, the hide/show experience is way better.

With the column layout of the hidden groups. See how glitchy it looks like:

With the align to parent layout of the hidden groups. It is way smoother:

Simply, the lesson is: play with the layout a little bit

By the way, this example is just showing/hiding between these two groups:

1. 
2.