Page load activates the "right" tab

[mdusek (Martin)]

Dear Webflowers

My website consists of only two pages.

I have links on the “Home” page which are leading to the “Projects” page. There (on the “Projects” page) are different projects shown. They are packed into different tabs. For one project, one tab.

Is it possible, if I click on the “Home” page f.e. on “Branching” that the “Projects” page is loaded with “Branching” as the current tab?

THANKS!

[Siton_Systems (Ezra Siton)]

anchor

Hi. This is calledanchor. No way for now from the UI (as dropdown). But its really easy to Set this URL manually in small sites.
/projects#branching

Linking to Anchors or Sections in other pages

We don’t have the functionality yet to choose a section on a specific page yet, but we want to add that in. As @bartekkustra mentioned right now it will work if you add your page name and section like this in the URL tab: /page#section. The downside of this is if you change your page name or anything else it won’t automatically update that URL.

Tabs widget

If you talk about webflow tab block. Only by custom JS (webflow dont have #hash for active tabs - so anyway i dont think its easy to solve this by forum Answer (mabye ask for freelancer)

Also what happen if webflow will change the core code of the tabs (it could happen).

By the way from SEO aspect option1 (each page in seperate URL) is better (+ weflow is very fast - so it almost look the same) + If you really really want the “no refresh” look - try barba.js (If this is relevante i find for you tuturial - webflow & barba)

[mdusek (Martin)]

Thanks a lot for your answer, @Siton_Systems!

You are totally right: from a SEO perspective it’s way better to have each project with a separated URL. But I really want to have the – as you call it – “no refresh” look. Maybe the best solution would be to implement the barbajs into my page. But I’m not that good in coding…

If there is any simple, or for rookies understandable tutorial/example of a webflow site with barbajs, I would love to see that!

[Siton_Systems (Ezra Siton)]

Try the explantion above (last post = solution) + read a little the barba.js docs (by deafult the transition is “fade” → to change this you must have some knowledge in code - or find freelancer)

Custom reload of Webflow Interactions for barba.js

Of course. Wanted to do that anyway. 1. Structure your site correctly [11] [27] barba-container class inside an element with barba-wrapper id. 2. Custom Code Add the following to your Footer Code <script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js" type="text/javascript"></script> <script> $(document).ready(function($) { //Barba.js //Please note, the DOM should be ready Barba.Pjax.start(); Barba.Prefetch.init(); var …

• Remember you see the effect only in live-mode = publish site (like any other custom code and/or html block)

The idea is very simple: add code (before body) copy-paste - add simple structure (wrapper with same name - to all pages!!) - thats it. First try - than ask more Q

[buntestrahlen (Jaro)]

@mdusek

If there is any simple, or for rookies understandable tutorial/example of a webflow site with barbajs, I would love to see that!

i have another idea for you. just for a basic transition. before using barba.js i once wrote a little piece of code to delay all the inner page links for 500ms. that way i could fire an interaction built in webflow before the new page loads. you could for example fade over to a white div with a fixed position, 100vh height, 100vw width and a high z-index. that way you’ll fade into white before every page reload. and just do it the other way round on the next page. fade out from white. if you want me to post it, feel free to answer.