Terra-core: Animation to fade in and fade out for terra components.

Created on 5 Aug 2020  路  2Comments  路  Source: cerner/terra-core

Feature Request

Description


I'm currently working on displaying terra-alerts for a user and was wondering if there is a possible way to add animation to fade in and fade out for the alerts.


terra alert gif

Additional Context / Screenshots



terra alert screenshot

@ Mentions


@jeremyfuksa

Most helpful comment

Closing as an enhancement to be explored again in the future, but not at the current time.

All 2 comments

Thanks @tarunkolla

Terra currently does not employ transitions or animations except for some reserved cases like loading icons, primarily for two reasons:
(1) because a large percentage of our software runs behind instances of Citrix and other similar virtualization software, with configuration settings that keeps visual resources limited and low, effectively killing a suitable animation-frame-rates and noticeable transitions
(2) usually, when one ui element has an animation in/out, there are implied secondary byproducts of that animation. One example is delaying the execution of any action/onclick until after the animation has completed (otherwise the UI may repaint and you don't end up seeing the "out" animation). A second example is additional chained UI animations, using your banner as an example - before and after it animates in/out -- since the page content also will reflow (down when banners are added in, up when banners are removed), most likely a transition for the page content to fluidly fade/slide up/down would also need to be added (which _could_ potentially trigger then another chained animated effect). Keeping track of all these animation frame and execution of the event loop becomes challenging, something that we'd like to grow into as Terra matures.

Adding animations after-the-fact on Terra components is not recommended, particularly on the Terra-Alert/Notification-Banner. For this case, your example of the banners, I don't think the animation adds critical value that also wouldn't potentially cause accessibility issues that would need to be validated was not creating additional risks.

For other components, particularly new ones - if animation is an effective tool at communicating/educating to a user, it would be suggested to have that well defined and created independently, so it can concretely be determined how to handle the animation plus ensure that it meets accessibility standards.

cc: @jeremyfuksa

Closing as an enhancement to be explored again in the future, but not at the current time.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

noahbenham picture noahbenham  路  5Comments

noahbenham picture noahbenham  路  5Comments

neilpfeiffer picture neilpfeiffer  路  5Comments

bjankord picture bjankord  路  3Comments

ryanthemanuel picture ryanthemanuel  路  4Comments