#Barbajs + gsap issue

9 messages · Page 1 of 1 (latest)

keen compass
#

Hello! i'm trying to use barbajs + gsap for page transitions, I followed the barba js docs and tried to implemet the basic fade example importing them in the in my Layout.astro file, but only the fade out workds the fade in doesn't work.
What could be wrong?

---
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>blog</title>
  </head>
  <body
    class="h-screen flex flex-col justify-between bg-zinc-50 dark:bg-onyx-900"
    data-barba="wrapper"
  >
    <main
      class="flex-1 flex flex-col w-full mx-auto max-w-screen-2xl px-4"
      data-barba="container"
    >
      <Header />
      <slot />
    </main>
    <Footer />
  </body>
</html>

<script>
  import barba from "@barba/core";
  import { gsap } from "gsap";

  barba.init({
    transitions: [
      {
        name: "opacity-transition",
        leave(data) {
          return gsap.to(data.current.container, {
            opacity: 0,
          });
        },
        enter(data) {
          return gsap.from(data.next.container, {
            opacity: 0,
          });
        },
      },
    ],
  });
</script>
oak dustBOT
#
Quiet in here?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

midnight willow
gritty wadi
#

hey @keen compass - on the long run Swup.js will be way better. Give it a try.

keen compass
keen compass
proven nexus
#

maybe you can try below example

function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}

// Call animation
barba.init({
transitions: [
{
async once() {
loadAnimation();
},

        async enter() {
            contentAnimation();
        },

        async leave() {

            const done = this.async();
            pageTransition();
            await delay(300);
            window.scrollTo({
                top: 0,
                left: 0,
                behavior: 'instant'
              });
            
            done();
        }, 
    },
],

});

#

help you better understanding , but barba js has downside combine with astro in page transition it cannot load component react <reactcomponent client:load />