I'm trying to make a website that allows for page transitions across each webpage, without having the browser reload each time it changes pages. I am currently using barba.js to make it possible to change pages while using transitions. I was wondering if there was a way to do this in Vanilla JS, as all I want to do is run transitions, and have pages with static data on said pages, and don't feel I need the extra functionality barba.js provides.

Here is my current barba.js code if it is of any use:

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',

    });
  },
}]
});

The greensock stuff can be removed and turned in to CSS animations if it's possible to do this without barba.js