nuxt3-lenis

v1.5.9

Published

9 months ago

nuxt3-lenis provides a `<Lenis>` component that creates a [Lenis](https://github.com/studio-freight/lenis) instance. <br/>

Downloads

854

0High
0Medium
0Low

bdelorme

Nuxt3 Lenis

Introduction

nuxt3-lenis provides a <Lenis> component that creates a Lenis instance.

Installation

For npm users:

npm i nuxt3-lenis

For yarn users:

yarn add nuxt3-lenis

Add the module in nuxt.config

modules: [
  "nuxt3-lenis"
],

Usage

<template>
  <Lenis root>
    <!-- Content -->
  </Lenis>
</template>

<script setup>
  const lenis = useLenis(({scroll, velocity, progress, direction}) => { ... })
</script>

Props

options: Lenis options.
root: Lenis will be instanciate using <html> scroll. Default: false.
autoRaf: if false, lenis.raf needs to be called manually. Default: true.
rafPriority: Tempus execution priority. Default: 0.

Events

scroll: Lenis instance.

Hooks

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 emitted
deps: Trigger callback on change
priority: Manage callback execution order

Examples

With customs options

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

GSAP integration

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

Scroll Event

<template>
  <Lenis @scroll="onScroll" root>
    <!-- Content -->
  </Lenis>
</template>

<script setup>
const onScroll = ({scroll, velocity, direction, progress}) => {
  console.log({scroll, velocity, direction, progress})
}
</script>

With custom rAF

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