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
}
});
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.