Barba JS page transitions made with Hype?

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

JS boilerplate

  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!


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

1 Like

@h_classen thanks for the response.

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