nuxt with locomotive-scroll and gsap issue on route change

Question

I have been straggling to achieve a smooth scrolling effect on my Nuxtjs project using the locomotive scroll and gsap scrollTrigger and Scrollproxy. But having some wired issues on my halfway which I can't go back to. I am using Typescript and Class Component in my Nuxt project.

here is my code repo and demo link

issues are

1. Changing route the scroll effect is broken and page height is going so high. then have to hard reload that specific page only works properly. need a solution for route change which i don't have any clue about in this setup.

this is the code

import { gsap } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import LocomotiveScroll from 'locomotive-scroll';
gsap.registerPlugin(ScrollTrigger)

const scrollContainer = document.querySelector('[data-scroll-container]')

const bodyScrollBar = new LocomotiveScroll({
    el: scrollContainer,
    smooth: true,
    initPosition: { x: 0, y: 0 },
    lerp: 0.12,
    getSpeed: true,
    getDirection: true,
    offset:["15%",0],
    tablet: {
        smooth: true,
        direction: 'vertical',
        gestureDirection: 'vertical',
        breakpoint: 1024
    },
    smartphone: {
        smooth: true,
        direction: 'vertical',
        gestureDirection: 'vertical'
    }
})

bodyScrollBar.on('scroll', ScrollTrigger.update)

  ScrollTrigger.scrollerProxy('.scroller-wrapper', {
                scrollTop(value) {
                    if(arguments.length) {
                        
                        return arguments.length ?
                        bodyScrollBar.scrollTo(value, 0, 0)  :
                        bodyScrollBar.scroll.instance.scroll.y
                        // return bodyScrollBar.scrollTop = value
                    }
                },
                getBoundingClientRect() {
                    return {
                        left: 0, top: 0,
                        width: window.innerWidth,
                        height: window.innerHeight
                    }
                },
               
                pinType:  scrollContainer.style.transform ? "transform" : "fixed"
            })

ScrollTrigger.addEventListener('refresh', () => bodyScrollBar.update())
ScrollTrigger.addEventListener('resize', () => bodyScrollBar.update())


ScrollTrigger.refresh(true)

2. locomotive has instances for parallax and other effects like data-scroll and data-scroll-speed='1' . it's working correctly when refreshing the page but when I change route it's not working. you can see it on my demo-project-link.

3. Want to scroll a specific section on the page which has overflow-scroll and a fixed height. But when trying to scroll the whole page is going to scroll which is not expected. to see go to the **scrollable-div** menu from the navigation.

This section I want to scroll differently and need to stop the whole page scrolling when I scroll this section.

Need your support and solution as i am stuck with these wired issues. any solution will be appriciate.

Answer 1

When I use locomotive-scroll and Nuxt.js, I always set the scroll-container and run a new instance of locomotive-scroll inside every page, also I destroy that instance using the beforeDestroy() hook.

This way, the instance knows the content it has inside and setup every animation and position, the other way if you change the route, the instance is the same but the DOM is different.

A full example of a page:

<template lang="pug">
div(ref="scroll")
  h1 Your HTML here
</template>

<script>
export default {
  data () {
    return {
      scroll: undefined
    }
  },

  beforeDestroy () {
    if (typeof this.scroll !== 'undefined') {
      this.scroll.destroy()
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.enableLocomotiveScroll()
    })
  },

  methods: {
    enableLocomotiveScroll () {
      if (process.client && typeof this.scroll === 'undefined') {
        this.scroll = new this.LocomotiveScroll({
          el: this.$refs.scroll,
          smooth: true
        })

        setTimeout(() => {
          this.scroll.update()
        }, 1000)
      }
    }
  }
}
</script>

Of course you can move this functionality to a mixin and just load it in every page to avoid duplicating code.