[Transition] Reveal component, transitions when components scroll into view

[maerzhase]

A Reveal component that tracks the "visiblity" of an element and triggers a specific transition.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Common use case is to implement a "reveal"-effect when certain elements scroll into view. Since I love working with @material-ui and it comes with it's own set of transitions wouldn't it be great to have a Reveal components that triggers a certain transition when the element scrolls into view and is compatible with material-ui/core Transitions (and react transition group)?

Examples 🌈

I imagine a Reveal component with the following API:

<Reveal TransitionComponent={Slide} TransitionProps={{direction: "left", timeout: 1000}}>
  <div>Hello World</div>
</Reveal>

Of course the Reveal component would track elements position via IntersectionObserver.

Motivation 🔦

I know that there are libraries that do this similarly but e.g. react-reveal is not maintained anymore or react-awesome-reveal comes with its own solution on building custom transitions.

I could contribute a solution by myself if this is interesting at all!

[oliviertassinari]

@maerzhase This sounds like a great idea. We need to improve the transitions for Material-UI. @gevorgmakaryan considering you have some experience building this animation for https://github.com/gevorgmakaryan/thefront-preview. Which solution would you recommend?

[oliviertassinari]

It seems that there is a dependency on #16663.

[maerzhase]

Since #16663 got closed, I guess we don't tackle this one?

[oliviertassinari]

@maerzhase These are different issues and almost independent. We could built the useIntersectionObserver hook and keep it private.