#javascript #barbajs
Вопрос:
У меня есть следующий сайт — https://pinelake.org — где я подсаживаюсь на barba.js экземпляр для запуска переходов «очистки» страницы GSAP. Я относительно новичок в Barba, и я сталкиваюсь с проблемой, когда, если загрузка страницы занимает достаточно много времени, переход работает должным образом, но если страница загружается быстрее (например, когда она кэшируется браузером), она просто решает вообще пропустить анимацию. Ниже приведена моя функция инициализации 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();
}
}
}]
})
У кого-нибудь есть какое-нибудь представление о том, что я могу сделать, чтобы это исправить? Спасибо!