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.


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> -->

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

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


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

Hey @Hamza_Nasim,

this could help you:

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