Search code examples
javascriptajaxnavigationtransition

JavaScript is not executing after using highway.js without manual page refresh


I am using highway.js for a simple fade out/fade in effect when navigating between pages- new to this library and I had a look through the docs and couldn't sort it out myself.

I noticed that when navigating to different pages, that transition is perfect and smooth but the other JavaScript files I am using do not seem to activate when the new content block loads in unless I manually refresh the page at which point all is well. I put a console.log message in one of the scripts and it does not seem to fire until I have refreshed manually. Do you have any idea what could be causing this or anything I can do to trigger the scripts to reload upon transitioning in the new content block? Below is the script I am using to call highway.js. Aside from that I have some basic scripts linked at the end of my HTML files.

//transition.js
import Highway from '@dogstudio/highway';
import Tween from 'gsap';

class Fade extends Highway.Transition {
    in({ from, to, done }) {
      // Reset Scroll
      window.scrollTo(0, 0);
  
      // Remove Old View
      from.remove();
      done();
  
      // Animation
      Tween.fromTo(to, 0.5,
        { opacity: 0 },
        {
          opacity: 1,
          onComplete: done
        }
      );
    }
  
    out({ from, done }) {
      // Animation
      Tween.fromTo(from, 0.5,
        { opacity: 1 },
        {
          opacity: 0,
          onComplete: done
        }
      );
    }
  }
  
  export default Fade;

//app.js
// Import Highway
import Highway from '@dogstudio/highway';

// Import Transitions
import Fade from './transition.js';

// Call Highway.Core once.
const H = new Highway.Core({
  transitions: {
    default: Fade
  }
});

Solution

  • Just thought I would add in case anyone else runs into this "issue" but it turned out what I was looking for were 'Renderers' which can be found in the highway.js.org docs along with a pretty straightforward explanation on how to use them. All my javascript files are now appropriately working on the respective pages on which they are called.