Using Barba JS | How to correctly name the classes?

Design help Custom code
1

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

2

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

3

Yeah. Iā€™ve seen that tutorial. But I want to use barba js.

4

Hey @Hamza_Nasim,

this could help you: What In Webflow 017 - šŸ˜ Barba JS Page Transitions - YouTube

Dennis :v:

1 Like
5

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.

6

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