What In Webflow 017 - 🤯 Barba JS

Community resources Webflow Tips
1

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 Barba JS Page Transition - Webflow

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

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

Clone link - Barba JS Page Transition - Webflow

Layout designed by Gabe Becker | Dribbble

Barba JS landing page: Barba.js

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
3

Basecamp’s Turbolinks seems like a similar library worth trying: GitHub - turbolinks/turbolinks: Turbolinks makes navigating your web application faster

2 Likes
5

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
6

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

7

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
8

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

9

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

10

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
11

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

12

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?

13

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

14

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

15

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

https://webflow.com/website/barba-js-base-transition-webflow-reinit

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

16

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