Integrating GSAP with Lenis in Nuxt 3

[Liam_hyperisland]

Hi,

I'm aware that this question may not be entirely GSAP-related, but I'm hoping that there might be a GSAP user here who maybe can help me.

 

I've integrated GSAP with Lenis  in Nuxt 3 and I'm wondering if I did it correctly. It works but sometimes, it may look like it works.  Here is a minimal demo: Minimal demo

 

Here is the code from the minimal demo if you would rather read it here.

 

Hola.vue

 

<template>
  <slot></slot>
</template>

<script setup>
import Lenis from '@studio-freight/lenis';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

onMounted(() => {
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  });

  lenis.on('scroll', ScrollTrigger.update);

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);
});
console.log('Tjo!');
</script>

Section.vue

<template>
  <div class="section" style="background: red"></div>
  <div class="section" style="background: blue"></div>
  <div class="section" style="background: green">
    <div class="section flex-center column" ref="main">
    <div class="box">box</div>
  </div>
  </div>
</template>

<script setup>
import gsap from 'gsap';

const main = ref();
let ctx;

onMounted(() => {
  ctx = gsap.context((self) => {
    const boxes = self.selector('.box');
    boxes.forEach((box) => {
      gsap.to(box, {
        x: 150,
        scrollTrigger: {
          trigger: box,
          start: 'bottom bottom',
          end: 'top 20%',
        },
      });
    });
  }, main.value); // <- Scope!
});

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});
</script>

 

App.vue

 

<template>
  <Hola>
    <Section />
  </Hola>
</template>

Thank you

[GreenSock]

I'm not familiar with Lenis and we can't really support it here because it's not a GreenSock product, but this looks weird to me: 

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});

// this is redundant! Eliminate here and below
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

That looks totally redundant to me. You should probably get rid of the 2nd (non-GSAP) one. 

 

Is there a particular problem you're having? If so, please be very specific about the GSAP-specific issue you're facing and how to reproduce it in the demo. 

[WillisCunningham]

The use of ScrollTrigger in the Section.vue component for scrolling animations also appears appropriately implemented.