Animation the entrance of the banner component

[gdoyle1]

MEDIUM

Our banner component sits at the top of all pages but, other than the use of color and placement, there isn't a ton of prominence on it. And if it's in the same spot on the page for a while, users sometimes ignore it.

This story is to animate the appearance of that component - whether that be the first time the user comes to the page or just when it's added to the page itself.

[mcarrano]

Per discussion with @mceledonia @mcoker , this should be easy, but requires more design consideration. How exactly should this animation take place? Fade in? slide in?

[JustinXHale]

I've been working on this issue and have created a few possible solutions. Figma Prototype | Figma Board

With each, the expectation is the banner to overlay on top of the header (if that isn't apparent in the prototype).

[mcarrano]

Thanks for posting @JustinXHale . These look good. It would be great to present these at Thursday's sync meeting for more feedback. Can you add this to the agenda?

[JustinXHale]

Unfortunately I cannot @mcarrano, I will be on PTO in Las Vegas having a miserable time lol.

[mcarrano]

Yeah, no one ever has much fun there LOL. Maybe next week, then,

[JustinXHale]

I've updated the prototype Figma Prototype | Figma Board

https://user-images.githubusercontent.com/91554933/201216548-1a9c4eed-6d75-4e1a-b231-09c5a803e2c7.mp4

[mcarrano]

@JustinXHale Thanks for posting this spec. I think this looks great.

@mcoker @srambach how do you want to handle this? I know we have a larger issue to look at animations for PatternFly 5. We should include this in the mix. Do you want be to open a core issue specifically for this update or roll it into an existing issue/epic?

cc @mceledonia

[srambach]

From my perspective, it would be nice to have separate issues for implementation collected in to this epic https://github.com/patternfly/patternfly/issues/4979

[mcarrano]

Looks like this issue is already referenced in the epic.