Adding Fade-In functionality for elements

[na933950]

Is your feature request related to a problem? Please describe.
It would be nice for certain features on the webpage to fade in on scroll or on delay. There may already be react packages which do this or a custom Fade component could be built, or even custom JS that can be applied to elements. Either way, having this functionality available would add some nice non-static feel to the webpage.

Describe the solution you'd like
My suggested solution would be to use the built in MUI Fade component which already supports fade in on mount (when the page is loaded). What it doesn't natively support is a fade in on scroll, but adding certain logic that tracks the position of the element to the bottom top/bottom of the screen and switching the in prop to true when it gets to a certain point can take care of this.

Describe alternatives you've considered

• Using an external fade in on scroll library - CON may not integrate well with MUI
• Building custom Fade component - CON seems like extra work.

Additional context
N/A

Mockups
N/A

Flow
Described above.