Barba: Strategy for loading page into overlay modal on same page?

[andrew-ireland]

Hi, not actually an issue per se, more of a functionality question I wanted to inquire about before diving in! I hope this is an ok place to ask, I couldn't find another channel.

Essentially, I'd like to have a custom route, which when clicking on a thumbnail transitions into a modal overlaid on top of the existing page. Once the user reaches the end of the modal they can see the existing content underneath. Very similar to this example: https://trauminc.com/

Is this achievable using Barba, it's certainly not a typical use case? Reading the documentation, I can visualise how I would achieve this in terms of saving scroll positions, but I can't visualise what the best method would be to recreate the transition from the overlay back to the index page, where both are visible at once.

Any guidance in the right direction would be hugely appreciated. With all the work you've done on v2 I've been eyeing off trying out Barba JS for a while now, and seeing what it' capable of! Hopefuly this is a good project to start with.

Thanks for your help,
Andrew

[xavierfoucrier]

Hi @andrew-ireland,

This issue is more related to how your code is running than Barba v2 issue...

For those kind of questions/help, please use the Slack workspace in order to ask the whole community for support. Join using the invite link here: https://barba.js.org/docs/getstarted/useful-links/#Developer.

Anyway, Barba have an inside feature called self transition: it allows you to call a transition when navigating inside the same page. Just define a transition with the "magic" name self, then links that point to your current page - like page.html#modal - will call this specific transition when navigating.

Hope this help :wink:
I am closing the issue.

[andrew-ireland]

Thank you for pointing me in the right direction Xavier, you've been a great help. I'll sign up for the slack workspace ✅