Barba.js + Scrollreveal : animation not working

[seppeclijsters]

Barba.js is a lbrary that helps you create fluid and smooth transitions between website pages. On the starting page all animations are working. But whenever I click a link to the next page, the scrollreveal animations won't activate on the new page (when I click on inspect element they suddenly work).

It all worked perfectly in an older version of scrollreveal. It seems like the scrollposition doesn't reset when going to a new page (with barba.js).

Here an example code. It's difficult to recreate this in codepen since it only stops working when opening a new link with barba.js.

Barba.Pjax.getTransition = function() {
  return FadeTransition;
};

const OveronsPage = Barba.BaseView.extend({
  namespace: 'overons',
  onEnter: function() {
    const scrollReveal = () => {
      ScrollReveal({
        reset: true,
        easing: 'cubic-bezier(.5,0,.2,1)',
        mobile: false,
      });

      ScrollReveal().reveal('.fadeInIntro', {
        duration: 1000,
        interval: 20,
        rotate: {x: 10, y: 50, z: 0},
        origin: `bottom`,
        distance: `1rem`,
      });

      ScrollReveal().reveal('.about__logo', {
        duration: 2000,
        interval: 20,
        origin: `bottom`,
        distance: `5rem`,
      });
    };
    const init = () => {
      // loadTestimonials();
      scrollReveal();
      destroyTilt(x);
      x.addListener(destroyTilt);
    };

    init();
  },
  onEnterCompleted: function() {
    // The Transition has just finished.
  },
  onLeave: function() {},
  onLeaveCompleted: function() {
    // The Container has just been removed from the DOM.
    // document.body.classList.remove('animation');
  },
});

[jlmakes]

Does it behave the same in all browsers? What happens if you add ScrollReveal().delegate() to the onEnterCompleted callback?

[seppeclijsters]

I'm working locally at the moment and testing on chrome & safari.

I added ScrollReveal().delegate() to the onEnterCompleted and this did the trick! All animations are working like before. I'm a happy man now, thanks a lot @jlmakes !

I'm not really sure what ScrollReveal().delegate() triggers but I'm glad it works.

[jlmakes]

Excellent!

The ScrollReveal().delegate() function is the event handler ScrollReveal uses when responding to resize or scroll events; so, normally this function is called for you while scrolling or resizing, but it was made public in version 4 for circumstances just like this.

So in other words, we've forced a ScrollReveal update inside Barba.js’ onEnterComplete callback.