install
npm install @barba/corepnpm
pnpm --filter @notes/docs i @barba/core gsap -rsetup
html
<body data-barba="wrapper">
<!-- put here content that will not change
between your pages, like <header> or <nav> -->
<main data-barba="container" data-barba-namespace="home">
<!-- put here the content you wish to change
between your pages, like your main content <h1> or <p> -->
</main>
<!-- put here content that will not change
between your pages, like <footer> -->
</body>js
import barba from '@barba/core';
import gsap from "gsap"
barba.init({
transitions: [{
name: 'opacity-transition',
leave:(data)=> {
gsap.to(data.current.container, {
opacity: 0
});
},
enter(data) {
gsap.from(data.next.container, {
opacity: 0
});
}
}]
});