android - Shared Element Transition in Javascript Web

Question

Consider this UI animation mockup. There's a Master Detail page in here. When the user clicks/taps on a given card on master page, it must take the user to the product detail page

/products ---> /products/:productId

It goes for all frontend platforms be it Android/ios or Web

The main products page could have a long list of such cards (even below the fold of screen). Now, performing this transformation is not very difficult, its a mix of simple scaling, translations, opacity operations.

Had there not been routing involved in this app, it was fine. But considering, we need to have product detail page route as /products/:productId.

The question now is that it's not possible to perform these continuous smooth transitions across pages in your app because route changes cause unmounting of current page and all its children components and mounting new page component. And for performing the said transition/animation, the only way possible is if we could take the component or card to be transitioned outside the dynamic routes hierarchy.

Something like this

<Router>
    <Card />
    <Switch>
        <Route path="/products/:productId" component={ProductDetail} />
        <Route path="/products" component={Products} />
        <Route path="/" component={Home} />
    </Switch>
</Router>

So here, the only candidate for the desirable transition in question is <Card /> component across pages navigation since it won't get unmounted on route changes.

But, the use case of having to transition an item from long list on master page to detail page as below is also valid and can't be neglected. And sadly, I can't come across any references for web that could achieve this the right way.

What are your thoughts on this?

question from:https://stackoverflow.com/questions/65952587/shared-element-transition-in-javascript-web

Answer 1

Waitting for answers