@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.