Tengo el siguiente sitio, https://pinelake.org , donde me conecto a una instancia de barba.js para activar las transiciones de "borrado" de la página GSAP. Soy relativamente nuevo en Barba y me encuentro con un problema en el que, si la página tarda lo suficiente en cargarse, la transición funciona según lo previsto, pero si la página se carga más rápido (como cuando el navegador la almacena en caché) simplemente decide omitir la animación por completo. A continuación se muestra mi función de inicio de barba:
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(); } } }] })¿Alguien tiene alguna idea de lo que puedo hacer para solucionar esto? ¡Gracias!