(Original repo and files https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll)
❤️ Every one loves smooth scrolling!
💤 But sometime...
For further actions, you may consider blocking this person and/or reporting abuse
Thank you, thank you, thank you! I've tried to implement Locomotive Scroll in two other nuxt projects and ended up dumping it because of various errors I couldn't get past. This seems pretty straight forward. Can't wait to give it a try.
Hi, thanks! Let me know !
Unfortunately I get the same results as all the other times I've attempted to use this library. (mentioned in this issue: github.com/locomotivemtl/locomotiv...). Based on my days of searching for solutions, It seems like vue based web apps have these types of problems, that unfortunately no one has posted solutions to. ¯_(ツ)_/¯
Are you loading contents after the mounted hook?
I was fetching the content via
asyncDatain a page, then was callingthis.$nuxt.$emit('update-locomotive')inside the mounted hook on the page to attempt to update the locomotive instance. I've tried this method of updating the instance before, and have never had any luck unfortunately. The issue is that the footer, and a few sections above the footer, are always hidden, or there is a huge amount of whitespace under the footer.Hi, If you want, share with me a simplified version of the implementation of the starter-kit and the code with the problem.
I'll check as soon as I have a moment. Have a nice day!
Thank you for this great post. I only run into one Problem:
In my nuxt layout i have the nuxt component and a footer. Now if i wrap a page in the LocomotiveScroll component it will only calculate the height of the page and leaves my footer out. The result is that im not able to scroll to my footer beacause its height is not beeing respected in the locomotive calculation.
Do you have any good solution exept for just wrapping the whole layout in the Locomotive component?
Hi,
can you share the code ?
Have a nice day,
Davide
I reproduced my Problem.
Here is the Code:
github.com/davidmarkl/locomotive-s...
And here is it in production:
jolly-murdock-e4a35b.netlify.app/
Hi,
the issue is related to the css.
If you remove the
overflow: hiddenfrom html and body and you set as sizes{....
height: 100vh;
overflow: hidden;
}
to
.js-locomotiveyou have the locomotive wrapper and your footer.But the page will have two scrollbar.
I think It's better use it ad a wrapper.
Have a nice day,
Davide
Cool! I've worked with Locomotive/Gsap/Nuxt for the last 2 months.. And sometimes it's not easy to get into the way they work! So, Good Job!! :)
JTK, if this is related to NuxtJs only, you should inject the LocomotiveScroll library in the plugin: nuxtjs.org/docs/2.x/directory-stru...
Hi,
thanks!
Locomotive Scroll is already injected into the plugin.
You can initialize Locomotive Scroll instances
where you want as many times as you want using:
const myLocomotive = new this.LocomotiveScroll({ el, ...options })whereelis your DOM element andoptionsthe instance options.Is this what you were asking!?
i follow your steps. i facing something sass loader issue as below. I'm trying to solve but will be good for me if you help me solve.
× Client
Compiled with some errors in 9.24s
√ Server
Compiled successfully in 8.19s
ERROR Failed to compile with 1 errors friendly-errors 20:36:42
ERROR in ./LocomotiveScroll/component/index.vue?vue&type=style&index=0&lang=scss& friendly-errors 20:36:42
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 20:36:42
TypeError: this.getOptions is not a function
at Object.loader (F:\xampp_7.3.28\htdocs\jarawarefront\node_modules\sass-loader\dist\index.js:25:24)
friendly-errors 20:36:42
@ ./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./LocomotiveScroll/component/index.vue?vue&type=style&index=0&lang=scss& 4:14-382 14:3-18:5 15:22-390
@ ./LocomotiveScroll/component/index.vue?vue&type=style&index=0&lang=scss&
@ ./LocomotiveScroll/component/index.vue
@ ./plugins/both.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
friendly-errors 20:36:42
i Waiting for file changes 20:36:43
READY Server listening on localhost:3000
Hi,
unfortunately i cannot replicate your issue.
Maybe you need to update something like node version or npm version?
Have a nice day and regards,
Davide
Wow, thanks!
The exact thing I was looking for, especially the scroll-trigger integration :D
Cheers
Is there any way to import the scroll locomotive into a project I have already created or do I have to download this project and work on it?