Animation triggers again on click (using BarbaJS)

[seppeclijsters]

Hello! I'm using barba.js, a library that helps you create fluid and smooth transitions between website pages. When I click on certain links to the next page, the fadein animation (with scrollreveal) will trigger again. You can check on http://dickytall.allaboutdigital.be/. When you click on the button "Meer projecten", the animation triggers again (see image below).

Here an example code:

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

const OveronsPage = Barba.BaseView.extend({
  namespace: 'overons',
  onEnter: function() {
    const scrollReveal = () => {
      ScrollReveal().reveal('.project1fadeIn', {
          duration: 1000,
          origin: `bottom`,
          distance: `1rem`,
          easing: `cubic-bezier(.5,0,.2,1)`,
          interval: 200
     });
    };
    const init = () => {
      scrollReveal();
    };

    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');
  },
});

Environment

• Operating System: MacOs Mojave
• Browser Version: Chrome, Safari
• ScrollReveal Version: Latest

[jlmakes]

Hey @seppeclijsters, thanks for the detailed issue.

When I type ScrollReveal() into the console, it returns an unused instance; for example, the pristine property is true and the store is empty... two things that should not be the case if reveal() has been called.

This surprises me because ScrollReveal 4 was designed to be a singleton — which suggests you are somehow loading multiple copies of ScrollReveal onto your page. My guess would be that ScrollReveal is being loaded via some sort of module bundler, and then again using <script> tags.

There may be something else happening, but I would start with figuring out why this is happening. (I can’t effectively help debug your project if I don’t have access to the correct ScrollReveal instance.)

[seppeclijsters]

Hello @jlmakes. Thanks for your fast reply again :). You are correct. I installed scrollreveal with npm install scrollrevealand forgot to delete <script src="https://unpkg.com/scrollreveal"></script> (stupid me ..).

You can also check on http://dickytall.allaboutdigital.be/projects/ , when you click on a project. I added console.log(ScrollReveal());, makes it a little easier to check for you.

I really appreciate any help you can provide.