Hey all. I have a Barba with GSAP setup for my website. Everything works fine. The navigation on my site also works as intended initially but stops animating suddenly after i navigate to 2 to 3 pages. I am not sure why this is happening. Heres a demo link. http://fingerprints.co.in/protectmyphone/ (Try to navigate to 2 to 3 pages) The text in the menu will stop animating suddenly. Requesting some help in this as i am new to barba and GSAP. Thank you.
Burger menu animation code:
function pageTransition() {
// Toggle Icone hamburger
$(document).ready(function () {
$('.barres').click(function () {
$('.barres').toggleClass('active');
})
})
// Greensock Animations
var timeline = new TimelineMax();
timeline.to(".menu", 0.8, {
left: '0%',
ease: Expo.easeInOut,
delay: 0
});
timeline.staggerFrom(".menu ul li", 0.3, {
x: -100,
opacity: 0
}, 0.1);
timeline.reverse();
$(document).on('click', '.barres', function () {
timeline.play();
});
$(document).on('click', 'a', function () {
timeline.reverse();
$('.barres').toggleClass('active');
})
}
Barba setup:
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
data.current.container.remove();
pageTransition();
await delay(1000);
done();
},
async beforeEnter(data) {
ScrollTrigger.getAll().forEach(t => t.kill());
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
barba.hooks.enter(() => {
window.scrollTo(0, 0);
});