Recently I started using highway.js to implement a fade out/fade in effect while navigating between pages. Despite going through the documentation, I couldn't figure out why my other JavaScript files aren't activating when the new content block loads unless I manually refresh the page. Even after adding a console.log message in one of the scripts, it doesn't fire until I refresh manually. Can anyone suggest what might be causing this issue or how I can trigger the scripts to reload upon transitioning to the new content block? Below is the script responsible for calling highway.js along with 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
}
});