For Barba Lovers: The issue we found, which I believe was mention previously, is that you need to add the pageID when you initialize ix2. I have a solution that we used for thedigitalpanda.com, based on the original solution posted here some time ago. We are using this for all our new projects as well. It is a bit messy if the Webflow team ever decides to change the way they name their page attributes, but it works great right now. I took a few pieces out to clean it up, so please let me know if it doesn’t work.
$(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();
}
}]
});
});
Not sure if you ever got this to work, but this comment in this thread here solved it for me. You seem to have to hook into the redux store and disptach an update action containing a payload with the new state you want. To reset your animation back to default you would need to do some experimenting to see what the state looks like on page load etc.
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?
@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.
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
});
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.
