Reverse restrictToViewport

[liamb13]

Wondering how it could be possible to work restrictToViewport going the opposite direction.

restrictToViewport works great for: /contacts to /contacts/12

But not so much going from /contacts/12 to /contacts

To replicate, using your dynamic list example (obviously with restrictToViewport enabled) /dynamic-lists to /dynamic-lists/8 works as intended:

But the opposite /dynamic-lists/8 to /dynamic-lists doesn't

[justintaddei]

That would be a simple check of the activeElement's DOMRect at index.ts:38

restrictToViewport was originally developed to alleviate the performance cost of having many shared elements on a single page. This also helped with the jarring effect of seeing a shared element, that was not in the viewport on the route you left, suddenly fly into the viewport on the new route. Since v-shared-element only considers shared elements that have been cached on the previous route, there is little to gain from disabling those which are not in the viewport on the new route.

What was your main reasoning behind trying to do this? If think it would be a worthwhile feature, I will look into developing it!

[liamb13]

So idea being that a user could navigate to a page from google search or their history. Then by clicking the back button there’s a nice interaction to take them to the item in the list.

Does that make sense?

[justintaddei]

I apologize, but I'm not quite sure I follow what you're saying. If they arrive at /examples/dynamic-lists/2 from Google search, and hit the back button, they will be taken back to Google.

But the opposite /dynamic-lists/8 to /dynamic-lists doesn't

This gif you provided displays the behavior I intended. What is it that "doesn't work" exactly? Do you mean to have it not animate back to the list because the list item is outside of the viewport?

[liamb13]

Sorry, I'm having a hard time describing it. I've simulated the intended effect:

So the viewport would be where that item appears on the page after the transition.

Where currently it's the top of the page:

[justintaddei]

Oh, so you're suggesting that the page is scrolled so that the active shared-element on the incoming route is positioned inside the viewport?

[liamb13]

Yep, spot on! Sorry I was a bit over the shop trying to explain. I think as an option might be best because I can see why some would prefer as is.

[justintaddei]

That's a cool idea. I'll look into implementing it!

[719media]

If the route is changing between, this is generally best solved by using <keep-alive> along with vue-router in vue, which will take care of scrolling for you.

[justintaddei]

@719media I believe the difference they are talking about is for when navigating to pages that have not yet been visited. Where vue-router wouldn't work.