bennyzen

@Rodrigo many thanks for your quick reply. And yes, your approach is more elegant than mine. Allowing to pass in some more config options on a per page basis with the spread is a cool idea. Borrowed! I just put the helper method into the plugin file itself ~/plugins/gsap.client.js import { gsap } from 'gsap' import { ScrollToPlugin } from 'gsap/ScrollToPlugin' import ScrollTrigger from 'gsap/ScrollTrigger' import ScrollSmoother from 'gsap/ScrollSmoother' // import { Draggable } from 'gsap/Draggable' // import GSDevTools from 'gsap/GSDevTools' // import TextPlugin from 'gsap/TextPlugin' // import SplitText from 'gsap/SplitText' gsap.registerPlugin( ScrollToPlugin, // Draggable, // GSDevTools, ScrollSmoother, // TextPlugin, // SplitText, ScrollTrigger ) const initScrollSmoother = () => { const sm = ScrollSmoother.create({ effects: true, overshoot: 0.1, smooth: 1, smoothTouch: 0.1, speed: 2.0, }) return sm } export default defineNuxtPlugin(() => { return { provide: { gsap, ScrollToPlugin, ScrollTrigger, ScrollSmoother, initScrollSmoother, // Draggable, // GSDevTools, // SplitText, }, } }) and used something like const { $initScrollSmoother, $gsap, $ScrollTrigger } = useNuxtApp() let sm onMounted(() => { sm = $initScrollSmoother() }) onUnmounted(() => { sm ? sm.kill() : null }) on every page where it is needed. One thing that I'm still struggling with is when triggering the navigation using the router directly (per code), the instance does not seem to get killed reliably. But I need to further investigate it or just add some more life-cycle hooks to make sure it really gets killed.

@Rodrigo any update on this? I'm currently using Nuxt3 and I'm wondering if anyone has come up with a better/smarter approach than me, creating and destroying the ScrollSmoother using client-side life-cycle hooks. Having a lot of pages, my approach works, but gets very verbose and does not feel right.