Streaming live at 10am (PST)

What In Webflow 017 - 🤯 Barba JS


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


Animation during page transition
Seamless Page Transitions
#3

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


#4

Hi @mistercreate, I found your tutorial really helpful.

I can’t seem to make barba.js work together with IX2 after a page transition.

I’ve read about Webflow.require('ix2').init(); but I don’t understand it fully. Do you know any workaround to make interactions work?

Thanks!


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


#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


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


#11

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