maybe this will help. Im using Vuejs in Nuxt and i had a similar issue.

You need to trigger the locomotive update() after the dom is loaded.

I was using graphql to pull in data from api so I had dynamic data that i had to wait for before locomotive could calculate the page height correctly.

Graphql apollo has a handy loading param that is either true or false.

My solution was to create a promse that checked if data was loaded using that param and then trigger the locomotive.update() to re-render the page height.

mounted() {
    this.pageLoad();
  },

method:

pageLoad() {
      return new Promise((resolve, reject) => {
        console.log("loading...");
        setInterval(() => {
          if (!this.$apollo.queries.projects.loading) {
            resolve("data fetched");
          }
        }, 100);
      })
        .then((res) => {
          console.log("loaded!", res);
          this.filteredProjects = this.projects.nodes;
          this.$refs.scroller.locomotive.update();
          this.$refs.scroller.locomotive.scroll.reinitScrollBar();
          console.log("loco updated");
        })
        .catch((err) => {
          console.error("error: ", err);
        });
    },

once you have access to the locomotive instance you can tell it to update.

Hope that helps in some way.

I am trying to implement Locomotive-Scroll.js and having an issue when loading images on my page. The scroll effects work without images but breaks when images are loaded. I would think the mounted function would keep the scroll effect from loading until all of the dom elements are loaded so I’m not sure where my to go from here. Here is the JS I am working with:

<script>
import locomotiveScroll from "locomotive-scroll";
import $ from 'jquery'

export default {
  name: "locoScroll",
  props: {
    msg: String
  },
  data() {
    return {
      scrollIns: null,
  },
  mounted() {
    this.loadLanding();
    const _self = this;
    this.$nextTick(function() {
      _self.initLocoScroll(); 
    });
  },
  methods: {
    initLocoScroll() {
      const _self = this;
      this.scroll = new locomotiveScroll({
        el: _self.$refs['scrollSections'],
        smooth: true,
        smoothMobile: true,
        getDirection: true,
        initClass: true
      });
      this.scroll.update();
    },
      loadLanding: function () {
          //image & jobTitle fade in
          var elements = ['nav-links-top','rocks-image','job-title-container'];

          for (let i = 0; i < elements.length; i++) {
              var thisElement = $("." + elements[i]); //Get the current element based on class
              fadeInElement(thisElement, i);          //Call our "Fade in" function
          }
          function fadeInElement(elem, time) {      //Fade-in function that takes the element to fade-in, and the time it should wait
              setTimeout(function() {
                  elem.css('opacity', 1);
              }, 1650 * time + 500);                        //Set the time it should wait
          }
      },
  }
};

</script>