nuxt-lenis
Version:
This is a Nuxt wrapper for [Lenis](https://lenis.studiofreight.com/) (by [Studio Freight](https://studiofreight.com/)) – providing smooth scrolling with support for multiple instances in a type-safe and reactive way.
27 lines (26 loc) • 619 B
JavaScript
import { useNuxtApp } from "#app";
import { watch } from "vue";
export function useLenis() {
const lenis = useNuxtApp().$lenis;
if (!lenis) {
throw new Error("[Lenis] Lenis is not provided.");
}
const watchScrollState = (callback, id) => {
watch(
() => lenis.getScrollState(id),
(state) => {
if (state) {
callback(state);
}
},
{ deep: true, immediate: true }
);
};
return {
createLenis: lenis.createLenis,
getLenis: lenis.getLenis,
destroyLenis: lenis.destroyLenis,
scrollState: lenis.getScrollState,
watchScrollState
};
}