Streaming live at 10am (PST)

What In Webflow 017 - 🤯 Barba JS

In this episode of “What In Webflow” 017, we walk-through how to use Barba JS (created by @ luruke ) in your Webflow project:

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Barba-JS-Page-Transition


Live site - https://phone-app-page-transition.webflow.io/

Read-only link - https://preview.webflow.com/preview/c

Clone link - https://webflow.com/website/Barba-JS-Page-Transition


Layout designed by https://dribbble.com/gabebecker

Barba JS landing page: http://barbajs.org/index.html

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I’m happy to help further!

14 Likes

Basecamp’s Turbolinks seems like a similar library worth trying: https://github.com/turbolinks/turbolinks#readme

2 Likes

Hi @lengua

I’ve been thinking about this for a bit to see what solution we could provide so that the IX2 Javascript is available from each page, and I think we have a solution:

  1. Export the Webflow project
  2. Change the JS file from .js to .txt
  3. Upload the .txt file to your Webflow project
  4. Reference the .txt file in the head of your project settings

This may work as a solution as the project initial loads the files of the entire project, but then only loads selected portions of the page to provide a smooth transition.

This is great for the transition, but overlooks JS files that would be needed for IX2

Hopefully this workaround is helpful, and I plan to test it myself some time. :nerd_face:

1 Like

@mistercreate
Can you explain what you mean by referencing *.txt file ? in Step 4 . I am confused .

It means “call it”
like you do when you add a script from a cdn

For barba.js for instance :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.js"></script>

if you add the .txt file you need to get its URL and put it as a source

1 Like

Hi ,
Still not clear to me …I must have been missing may be :slight_smile:
what will Calling *.txt will provide here ?
you mean calling IX2 script in each page ?
converting file to txt is the part I am little bit lost

I guess @mistercreate means calling the webflow js script manually ?
The txt part is to allow you to upload a script as a file in webflow asset manager

Hi @logos and @pepperclip

Uploading the JS file as a txt file allows it to be referenced using the type="text/javascript"

Regular JS files can be referenced using just type="javascript"

1 Like

Hi @mistercreate , have you managed to test this approach ?

I was able to get this to work correctly, however… I had two problems.

  1. When I scrolled down a page and then went to a new page, I wouldn’t be at the top of that new page. I would be at the same scroll location as the previous page, resulting in an experience that feels broken

  2. I lost the functionality of Webflow’s interactive components such as a tabs and drop down menu’s.

Does anyone know of any libraries that solve for these issues?

Sounds like a dealbreaker. :pensive: @gregmwashington were you been able to find a solution?

Unfortunately not. I stopped looking and will use a different solution or hire someone to build me a custom script.

@gregmwashington there is a webflow project which re-initialize IX2 interactions after the transition.

Unfortunately “page load” interactions doesn´t work nevertheless… Anybody an idea?

Awesome tutroial! Many thanks.

If anyone wants to copy-paste the header and footer codes:
Header:
<script type="text/javascript" src="https://uploads-ssl.webflow.com/5d9c434959eb476c01d4a02b/5e6b52c003eb1a6f58023be5_barba.min.txt"></script>

Footer:
<script> $('document').ready(function(){ var transEffect = Barba.BaseTransition.extend({ start: function(){ this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer))); }, fadeInNewcontent: function(nc) { nc.hide(); var _this = this; $(this.oldContainer).fadeOut(800).promise().done(() => { nc.css('visibility','visible'); nc.fadeIn(800, function(){ _this.done(); }) }); } }); Barba.Pjax.getTransition = function() { return transEffect; } Barba.Pjax.start(); }); </script>

And this is where you download the txt from.

1 Like