[material-ui] Reveal Animation Component

[iamabhshk]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The Reveal Animation component is like a magician for your webpage, conjuring an enchanting experience as users journey through your content. With a flicker of CSS animations, it unveils your hidden treasures with a touch of elegance. As users scroll, the Reveal Animation whispers to the elements, 'Reveal yourself,' and voilà, a symphony of transitions dances across the screen. It's not just a feature; it's your content's grand entrance – a red-carpet moment that leaves users in awe. Elevate your webpage with the Scroll Animation component, where scrolling becomes a delightful narrative, and your content takes center stage in the theater of the web."

Examples 🌈

You can find a simple demo here:
Sandbox: https://2xnlkl.csb.app/

Motivation 🔦

Reveal animations can add visual interest and help guide users as they scroll through content on a page. They are useful for:

Introducing new sections

The animations can draw attention to new sections of content or chunks of related information as users scroll down the page. The motion highlights new content being revealed.

Adding visual flair

The animations provide visual flair as users scroll. This makes scrolling feel more dynamic and engaging.

Improving user experience

By drawing attention to new content and visual regions, reveal animations improve the overall user experience. Users have a clearer sense of progression through different sections.

Emphasizing key points

Reveal animations can highlight or emphasize important points or steps in a process as they become visible on screen.

Smooth transitions

The animations help smooth the transition between different sections and provide a nice interstitial effect between parts of the page.

Overall, reveal animations like this are a relatively lightweight way to enhance visualization and create a more compelling, dynamic experience as users scroll through content. The component provides an easy-to-use way to add this effect across different types of content.

[brijeshb42]

I don't think this component should be in @mui/material. @oliviertassinari what do you think?

[oliviertassinari]

Duplicate of #23960?

Yeah, increasingly it feels like there should be a standard npm package for styled components but that isn't design system specific, while we have another focused on styling. For now, I guess it's for MUI System or MUI X?

From a UX perspective, I most had bad experiences on websites with the reveal animation. They tend to make the transition too slow and appear too late on the screen. The example shared https://2xnlkl.csb.app/ is IMHO worse for the experience on the page than without it. So why not, but if we do it, we should do it well and have it subtle. It can backfire way too quickly.

[iamabhshk]

I understand, so any suggestions would be highly appreciated for me to move forward with open source contribution. since this is new and the first time for me. :)

[samuelsycamore]

Closing as this is a duplicate of #23960. We can continue the conversation there if we decide it's worth proceeding, but I agree that it probably doesn't make sense to be a part of @mui/material.