I am experimenting Barba.js for page transitions. When I try to run this code I get a "Blocked attempt to use history.pushState() to change session history URL" error message. I believe it has to do with the DOM. I am a JS newbie, any help would be greatly appreciated. Below I have attached the code. Thanks!
HTML:
<div id="barba-wrapper">
<div class="barba-container">
<div class="page1">
<h1>Welcome to Homepage</h1>
<a href="about/index.html">About</a>
</div>
</div>
</div>
HTML:
<div id="barba-wrapper">
<div class="barba-container">
<div class="page2">
<h1>Welcome to About</h1>
<a href="../index.html">Home</a>
</div>
</div>
</div>
JS:
Barba.Pjax.start();
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
},
fadeIn: function() {
this.newContainer.classList.add("slide-in"); //ABOUT
var that = this;
this.newContainer.addEventListener("animationend", function(){
that.newContainer.classList.remove("slide-in");
that.done();
});
}
});
Barba.Pjax.getTransition = function() {
return FadeTransition;
};
CSS:
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
font-family: sans-serif;
overflow: hidden;
}
.page1,
.page2
{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
width: 100%;
flex-direction: column;
position: absolute;
}
a{
color: white;
text-decoration: none;
margin-top: 50px;
border: 1px solid white;
padding: 10px 30px;
}
.page1
{
background-color: rgb(129, 60, 146);
}
.page2
{
background-color: rgb(73, 60, 146);
}
.slide-in
{
animation: slide-in 0.5s ease forwards;
}
@keyframes slide-in
{
from
{
transform: translateX(100%);
visibility: visible;
}
to
{
transform: translateX(0%);
}
}
Make sure to run your code using a webserver, otherwise you can't use push state.