Barba JS page transitions made with Hype?

Using JavaScript with Hype
1

Hi All,

BarbaJS is a library that adds a method for animated page transitions and preloading. The result is a website that feels like a single page application, where loading new content does not refresh the entire page.

I know HTML and CSS well, but not JS, so I'm trying to figure out if animations created in Hype can be integrated into Barba-based sites.

HTML boilerplate
(from the official documentation)

<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>
</body>

JS boilerplate

barba.init({
  transitions: [{
    name: 'default-transition',
    leave() {
      // create your stunning leave animation here
    },
    enter() {
      // create your amazing enter animation here
    }
  }]
});

And finally, a full example using GSAP: Barbajs with GSAP Animation - DEV Community

Any input would be appreciated. Thanks!

Rafi

2

Hype can animate its own elements, but not any external element on a webpage.

1 Like
3

@h_classen thanks for the response.

I had a feeling that was going to be the case.