Animate reposition of elements on the page when adding or removing an item

[gdoyle1]

High priority

For example, when dismissing a hint pattern, making the removal smoother and moving everything else up. This type of transition can be used for similar patterns/components as well, such as:

• Inline alert (both appearing and dismissing)
• Dismissing a hint
• Dashboard cards
• Data list / table rows
• Expandable sections of page

Here's the prototype that the animation group came up with. It would be good to look more into where this can be applied!

[KKoukiou]

Hi, we are really looking forward to this feature. Glad to see it in high priority already, In cockpit very often we feel like having a highlight / animatoin for new items in tables, lists etc will help the users follow better the activity.

[garrett]

We're looking forward to animation on new items; it'd solve a usability finding we had back in 2018 (which still exists and would affect every app using PatternFly), related to new items showing up in rows of tables and other similar widgets.

Here's a probably-relevant CSS technique for animating new items that was recently covered: https://css-tricks.com/a-handy-little-system-for-animated-entrances-in-css/

The important CSS is animation-fill-mode: backwards;

According to https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode:

The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. The first relevant keyframe depends on the value of animation-direction

In other words, it prevents the item from showing up before the animation starts.

[mcarrano]

This should be covered here for inclusion with PatternFly 5:

Core issue: https://docs.google.com/spreadsheets/d/1jjm2nXvqLsObuhSZ-cbII7d22WQ98W5r1ycC9BwJCIk/edit?usp=sharing Proposed changes: https://docs.google.com/spreadsheets/d/1jjm2nXvqLsObuhSZ-cbII7d22WQ98W5r1ycC9BwJCIk/edit?usp=sharing

@srambach can you confirm that this is within scope for that issue

[andrew-ronaldson]

This is being picked up in another v6 issue

[garrett]

This is being picked up in another v6 issue

@andrew-ronaldson: Which issue? Can you provide a link?

(Basic issue tracker etiquette: Don't close issues unless it's resolved or has a link to another issue if the work is being done there.)