Streaming live at 10am (PST)

Using Barba JS | How to correctly name the classes?

Hi people,
I am trying to achieve this interaction where a page is transitioned into another using a curtain that drops and reveals the next page without page refresh like a Single Page Application.

barba-page-transition

Now Barba uses this markup template

  <body data-barba="wrapper">
  <!-- put here content that will not change
  between your pages, like <header> or <nav> -->

  <main data-barba="container" data-barba-namespace="home">
    <!-- put here the content you wish to change
    between your pages, like your main content <h1> or <p> -->
  </main>

  <!-- put here content that will not change
  between your pages, like <footer> -->
</body>

Currently, I’m using HTML embed and the problem I’m facing is it just replaces the content on the homepage whereas I want a whole page transition. I know I just have to use the correct markups but I don’t know how to do it in Webflow. The HTML embed is inside “Section_Mockups”.


Here is my site Read-Only: LINK

Hi Hamza,

I don’t know Barba js but on this video Nelson shows how to achieve what you are looking for with a little javascript to delay the link action. This is another video and in the description, you can clone the Webflow project. Hope it helps

Cheers
Dritan

Yeah. I’ve seen that tutorial. But I want to use barba js.

Hey @Hamza_Nasim,

this could help you: https://www.youtube.com/watch?v=YnTmIIuPTsY&t=1s

Dennis :v:

1 Like

Hello @Hamza_Nasim,

on your code, what is inside the quotation marks is supposed to be an id for that element, not a class. choose the element and under settings assign the id name that is on the code. I hope this helps.

I’ve found the solution. I had to use something known as “custom attributes” for div element. It is a key value pair. In my case “data-barba” being the key, and “wrapper” the value. It is working as intended now.
@Pablo_Cortes @Dennis_K @Dritan

1 Like