Hey Ilya, thanks for responding so fast. I did this setup with the barba-wrapper and barba-container. Is it cool if a private message you with a read-link?
No problem. Send it over.
1 Like
Thanks Ilya, I sent it to you, not sure if you received it. 
@leonardomattar Instead of having barba-container and main as css classes, you need to add them as custom attributes. You can add one to the body and one to the wrapping div.
for structure here is an idea:
YOUR NAV ALL THE CONTENT
1 Like
Hey @DigitalPanda ah I see! So when I add the attribute, how should I fill these camps on the body and on the wrapping div:
body (custom attribute):
Name: data-barba
Value: barba-wrapper
wrapping div (custom attribute):
Name: data-barba
Value: barba-container
Like this, right?
This should do it…
body (custom attribute):
Name: data-barba
Value: wrapper
wrapping div (custom attribute):
Name: data-barba
Value: container
And
Name: data-barba-namespace
Value: WHATEVER-YOU-WANT-TO-NAME-THIS
1 Like
Hey @DigitalPanda I just applied this on 5 pages: Home, work, services, process, about. It is not working at the moment. Can you check if I missed anything?
I didn’t realize that you were not initializing this when the page is ready. that seems like the issue since the console says that “barba is not defined” also please check the
Please wrap with
$(document).ready(function() {
//BARBA CODE
});
1 Like
I think I’m doing something wrong because it is not working, I’m not great with js, right now I have this on code footer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.js"></script>
<script>
$(document).ready(function() {
var pageID;
barba.init({
transitions: [{
sync: true,
beforeLeave: function(data) {
let end = data.next.html.indexOf(' data-wf-site="');
let start = data.next.html.indexOf('data-wf-page="');
let string = data.next.html.slice(start, end);
let arr = string.split('"');
pageID = arr[1];
},
leave: function(data) {
const done = this.async();
//do some crazy outro animations using GSAP or ANIMEJS (our fav), then place the following in the complete callback:
done();
},
beforeEnter: function(data) {
$('html').attr('data-wf-page', pageID);
window.Webflow && window.Webflow.destroy();
window.Webflow && window.Webflow.ready();
window.Webflow && window.Webflow.require('ix2').init();
}
}]
});
});
</script>
Am I missing something in this code or am I missing something else?
Thanks for all the help, much appreciated!
The console still says ‘barba is not defined’, I actually have no idea how to fix this part 
It’s so close to work, I just need to understand how to fix the code, something is missing there.
Last update, I got to fix the ‘barba is not defined’ but it still bugs the page load animation after trying to go back to the home after seeing it once and there is no transition on the page change it is happening instantly, is there a way to fix these 2 things?
I will post the code I am using below:
<script type="text/javascript" src="https://uploads-ssl.webflow.com/5f7d0d579293d5927760a28d/5f7e40d6a5e058298319955d_core.txt"></script>
<script>
$(document).ready(function() {
var pageID;
barba.init({
transitions: [{
sync: true,
beforeLeave: function(data) {
let end = data.next.html.indexOf(' data-wf-site="');
let start = data.next.html.indexOf('data-wf-page="');
let string = data.next.html.slice(start, end);
let arr = string.split('"');
pageID = arr[1];
},
leave: function(data) {
const done = this.async();
//do some crazy outro animations using GSAP or ANIMEJS (our fav), then place the following in the complete callback:
done();
},
beforeEnter: function(data) {
$('html').attr('data-wf-page', pageID);
window.Webflow && window.Webflow.destroy();
window.Webflow && window.Webflow.ready();
window.Webflow && window.Webflow.require('ix2').init();
}
}]
});
});
</script>
Now that the code is initializing, you will need to implement animations between states. Unfortunately, that will take a LOT of time to explain if you don’t have a lot of experience in JS. I recommend hiring some outside help on that one 
Hey @DigitalPanda, thanks for all the help, much appreciated!
One question though, what about the Page load animation, is there a way to fix it? I thought with your code it would fix it. I’m having that problem it loads ok on the first time and then If I try to reload it, it doesn’t work anymore.
Hey @leonardomattar we never actually implemented “page load” functions on webflow. We used custom transitions and loading using animejs.
Ah I see @DigitalPanda, that makes sense. I don’t think anyone got to implement barba while using Webflow’s Page load animation, thanks.
Seems to have gotten webflow animations to work with Barba page loads.
Used this post here -
And moved most of the next actions to afterEnter in the Barba action.