I have the following site - https://pinelake.org - where I'm hooking into a barba.js instance to trigger GSAP page "wipe" transitions. I'm relatively new to Barba and I'm running into an issue where, if the page takes long enough to load, the transition works as intended, but if the page loads quicker (such as when it is cached by the browser) it just decides to skip the animation altogether. Below is my barba init function -
barba.init({
timeout: 50000,
cacheIgnore: true,
transitions: [{
name: 'main',
leave(data){
gsap.timeline()
.to('.masthead__nav > *', {
opacity: 0,
duration: 0.3,
})
.to(
'.wrapper__transition',
{
x: 0,
duration: 0.3,
},
'-=0.2'
)
.set('#header, #content, #footer', {
opacity: 0,
})
.set('#nav-overlay', {
x: '100%',
})
.set('.wrapper__dimmer', {
autoAlpha: 0,
opacity: 0,
})
.to(
'.wrapper__transition',
{
x: '-100%',
duration: 0.5,
ease: 'expo.out',
},
'+=0.4'
);
},
beforeEnter: ({ next }) => {
window.scrollTo(0, 0);
},
enter(data){
gsap.timeline()
.set('body', {
overflow: 'inherit',
})
.to('#header, #content, #footer', {
opacity: 1,
duration: 0.5,
})
.set('.wrapper__transition', {
x: '100%',
})
.set('#nav-overlay', {
x: '100%',
});
},
after(){
initSplit();
initHeroReveal();
initActions();
initVue();
initSliders();
initResponsiveEmbeds();
initGoogleMaps();
onYouTubeIframeAPIReady();
initScroller();
ScrollTrigger.refresh();
if ($(window).width() < 1200) {
} else {
initFocusAlt();
}
}
}]
})
Anybody have some insight on what I can do to fix this? Thanks!