Locomotive Scroll + Swup js problem

[Manitta1998]

Hello 👋

When i load the page and i scroll down, the height of the page don't is correctly and stop first.. Moreover, the block before the scroll hide and is orrible to see.. When i change page with transition and return back, the page is 100% ok, this problem come only when i load the first time the page (homepage or other page same issue on first load)

To Reproduce Steps to reproduce the behavior:

1. Load the page
2. Scroll and see problem
3. If i reload same problem return
4. If i change page and return back the problem is solved..

Code `jQuery(function($) {

const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true });

const options = { animateHistoryBrowsing: false, animationSelector: '[class*="transition-"]', containers: ["#swup"], cache: true, plugins: [new SwupBodyClassPlugin(), new SwupHeadPlugin() ], linkSelector: 'a[href^="' + window.location.origin + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])', skipPopStateHandling: function(event) { if (event.state && event.state.source == "swup") { return false; } return true; } }; const swup = new Swup(options); document.addEventListener('swup:contentReplaced', (event) => { $('.headermenu').removeClass('headermenu--open'); $('.icon-hamburger').removeClass('icon-hamburger--open'); $(".search-panel").removeClass("search-panel--open"); $(".search-button").removeClass("search-button--active"); $(".menu_nav").removeClass("menu_nav--open"); }); document.addEventListener('swup:transitionEnd', (event) => { scroll.init(); scrollDetect(); }); document.addEventListener('swup:willReplaceContent', (event) => { scroll.destroy(); });

........other functions`

Screenshots https://user-images.githubusercontent.com/65762606/109147178-00937c80-7765-11eb-9600-8dd889d3fdaa.mp4

Desktop (please complete the following information):

• OS: [mac and windows but no mobile]
• Browser [chrome, safari, firefox]
• Version [3.5]

Thank you 👊

[mrspence]

Please can you put into a JSFiddle or Codepen. That said, it looks like you may need to call scroll.update() when swup changes any DOM elements, by hooking into Swup JS events (likely the transitionEnd event).

By calling scroll.update() you're telling locomotive scroll to recalculate it's scrolling markers, which is required after Swup.JS has done it's magic of changing a page 👍

[HunterHolthaus]

I think Im having a similar issue with trying to use swup and locomotive scroll although it could be slightly different. Basically on initial page load of a page that has locomotive running I run into a problem where I cant scroll down all the way down the page and my content is cut off. I've noticed if I refresh again the issue is fixed. I'm wondering how exactly you would call scroll.update() or if that would even fix this issue.

https://user-images.githubusercontent.com/49177233/132970629-0e2779e7-6c66-4210-963a-8eb9bffd27cc.mp4

I have heard on another thread that, "locomotive incorrectly calculates the viewport height and the page is smaller than it should be. After change the window size it suddenly improves... I come to realize that the js initialized before the loading of the DOM elements" so wondering if its because I have really tall images on my page?

Currently my js for swup destroys a different plugin im using on my homepage then uses a method of reloading javascript on the new page in a wrapping function (so thats where I have my locomotive scripts) Does this seem like the proper way of doing

//Swup stuff const swup = new Swup({ plugins: [new SwupHeadPlugin()] });

const options = { cache: true, };

//Destroying a plugin on my homepage so it doesnt mess with the next one document.addEventListener('swup:willReplaceContent', (event) => { fullpage_api.destroy('all'); });

//Reloading JS on new project page init(); swup.on('contentReplaced', init);

function init() { if (document.querySelector('.js-reload')) { //This checks if this element is on the the page (in the html) new blah(); // If it is then it creates a new instance of the function } }

var blahStart = new blah(); // This initialises the below function the first time (first page load not controlled by swup)

function blah() { // This it the wrapper funtion

// This is my locomotve script const scroller = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true });

};

PS Im very beginner please bare with me, any help or ideas are much appreciated! TY!