Locomotive scroll not updating after page transition

[ashehzadgec]

Hi there

I am trying to implement HIghway.js in my project but got a problem and any help will be awesome.

1- On first load everything works fine but after transition locomotive scroll and scroll trigger is not updating. I am using "onLeave and Enter" hooks/ renderer to update scroll position and killing scroll trigger instances but it does not seem to work with my current configuration. Although I was able to do the same thing with barba and swup.js but I am stuck with highway.js may be a little different configuration required. Below is the sandbox pen link for better understanding of the problem.

https://codesandbox.io/s/locomotive-scroll-not-working-with-highwayjs-cg0o4?file=/src/index.js:1409-1645

Note: Scrolltrigger is working on first load in my local machine but not in this demo. Same code.

I must be doing something wrong but couldn't figure out what it is. I look forward to get this working with your awesome support.

Regards Shehzad Asif

[ashehzadgec]

Hi there

It's been more then 2 weeks, can I expect some help?

[auriga-z]

Hi, I was facing the same issue, here are a few things you might try:

1. Do not keep the scroll container(data-scroll-container) inside data-router view, highway deletes all the html after the transition so calling update isn't going to do anything if the container is gone. You can try putting data-scroll-container and data-router-wrapper to the same container in your case the main tag.
2. Keep locomotive instance in a separate file and import it into the core file and all the transition files, this should allow you to call scroll.update() from anywhere in your project.

import LocomotiveScroll from 'locomotive-scroll';

 const lscroll = new LocomotiveScroll({
     el: document.querySelector('#js-scroll'),
     smooth: true,
     reloadOnContextChange: true,
     intertia: .4
});

export {lscroll};

3. Same for scroll trigger refer to this video to see how to make scrolltrigger work with locomotive scroll: https://youtu.be/JnLn8Rq4p_I After watching the above video put everything in the renderer file.

Hope this helps.

[Anthodpnt]

Locomotive Scroll issues need to be posted in their own repository. Closing this issue.