Estoy tratando de crear un sitio web que permita transiciones de página en cada página web, sin tener que recargar el navegador cada vez que cambia de página. Actualmente estoy usando barba.js para que sea posible cambiar de página mientras uso transiciones. Me preguntaba si había una manera de hacer esto en Vanilla JS, ya que todo lo que quiero hacer es ejecutar transiciones y tener páginas con datos estáticos en dichas páginas, y no siento que necesite la funcionalidad adicional que proporciona barba.js.

Aquí está mi código barba.js actual si es de alguna utilidad:

 barba.init({ sync: true, views: [ { namespace: 'about' }, { namespace: 'projects' }, { namespace: 'stories' } ], transitions: [{ name: 'opacity-transition', sync: true, async enter(data) { // Entrance Transition settings return gsap.from(data.next.container, { left: '20%', filter: 'brightness(0.4)', duration: 0.9, ease: 'power1.inOut', }); }, async leave(data) { // Exiting Transition settings return gsap.to(data.current.container, { left: '-100%', duration: 0.9, filter: 'brightness(0.6)', ease: 'power1.inOut', }); }, }] });

Las cosas de greensock se pueden eliminar y convertir en animaciones CSS si es posible hacerlo sin barba.js