nuxt3-lenis provides a <Lenis> component that creates a Lenis instance.
For npm users:
npm i nuxt3-lenis
For yarn users:
yarn add nuxt3-lenis
Add the module in nuxt.config
modules: [
"nuxt3-lenis"
],
<template>
<Lenis root>
<!-- Content -->
</Lenis>
</template>
<script setup>
const lenis = useLenis(({scroll, velocity, progress, direction}) => { ... })
</script>options: Lenis options.root: Lenis will be instanciate using<html>scroll. Default:false.autoRaf: iffalse,lenis.rafneeds to be called manually. Default:true.rafPriority: Tempus execution priority. Default:0.
scroll: Lenis instance.
Once the Lenis context is set (components mounted inside <Lenis>) you can use these handy hooks:
useLenis is a hook that returns the Lenis instance
The hook takes three argument:
callback: The function to be called whenever a scroll event is emitteddeps: Trigger callback on changepriority: Manage callback execution order
<template>
<Lenis :options="options" root>
<!-- Content -->
</Lenis>
</template>
<script setup>
const options = {
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: "horizontal",
gestureOrientation: "vertical",
}
</script><template>
<Lenis ref="lenisRef" :autoRaf="false" root>
<!-- Content -->
</Lenis>
</template>
<script setup>
const lenisRef = ref(null)
const onFrame = (time) => {
lenisRef.value.instance.raf(time * 1000)
}
onMounted(() => {
gsap.ticker.add(onFrame)
})
onBeforeUnmount(() => {
gsap.ticker.remove(onFrame)
})
</script><template>
<Lenis @scroll="onScroll" root>
<!-- Content -->
</Lenis>
</template>
<script setup>
const onScroll = ({scroll, velocity, direction, progress}) => {
console.log({scroll, velocity, direction, progress})
}
</script><template>
<Lenis ref="lenisRef" :autoRaf="false" root>
<!-- Content -->
</Lenis>
</template>
<script setup>
const lenisRef = ref(null)
const onFrame = (time) => {
lenisRef.value.instance.raf(time)
}
onMounted(() => {
lenisRef.value.instance.on("scroll", ({scroll, velocity, direction, progress}) => {
console.log({scroll, velocity, direction, progress})
})
Tempus.add(onFrame, 0)
})
onBeforeUnmount(() => {
Tempus.remove(onFrame, 0)
})
</script>