search

hotwired / turbo

The speed of a single-page web application without having to write any JavaScript
https://turbo.hotwired.dev
MIT License
6.63k stars 420 forks source link

Morphing between different URLs #1177

Open pch opened 7 months ago

pch commented 7 months ago

There's a scenario where I think morphing could be useful between different URLs.

Consider the following example (a 9mb gif screen recording below):

CleanShot 2024-02-08 at 16 32 21

Let's say we have an image browser like the one above. The page structure is basically the same, only certain parts change when you select a different image. Because each image has a unique URL, morphing doesn't apply and scrollbars reset.

In this case, it would be great to be able to set something like <meta name="turbo-page-id" content="images#show"> and have Turbo use it to apply morphing between different URLs.

krschacht commented 6 months ago

@pch I think turbo-frames solve your situation.

If you put the center column (or center + right column) within it's own <turbo-frame id="content"> then the thumbnails on the left can direct target that frame: <a href="/..." data-turbo-frame="content" data-turbo-action="advance">

This way the left column retains it's scroll position because only the <turbo-frame> DOM node will be replaced.