Is there a way to use GSAP with Lenis on an element only?

[Jesztar]

I'm trying to make Lenis work with the help of GSAP on a wrapper (so not the whole window but only a container). All elements are in overflow:hidden; except this container, and it is only this container which should be reactive about Lenis.

 

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

  // Using this ref on the wrapper: <div class="section" ref="wrapper">
  const wrapper = ref()

  onMounted(() => {
    gsap.registerPlugin(ScrollTrigger)
    const lenis = new Lenis({
      wrapper: wrapper,
      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)
  })
</script>

But this doesn't seem to be working. I tried to make Lenis work in the whole app but I get an error saying "window is not defined", even when moving everything inside of a onMounted function.

 

Demo: https://stackblitz.com/edit/nuxt-starter-hwdywi?file=layouts%2Fdefault.vue (you'll have to resize the window in order to see the website, I haven't implemented responsiveness yet)

[GSAP Helper]

It's very difficult to troubleshoot without a minimal demo; the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

I noticed you're not doing proper cleanup either, like in an onUnmount(). You might want to leverage gsap.context() (but I doubt that's the culprit in your issue)

 

And to be clear, Lenis is not a GreenSock product, so we can't really support it here. Sorry. We're happy to answer GSAP-specific questions though. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[GSAP Helper]

By the way, this looks very odd to me: 

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

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

You're calling lenis.raf() TWICE on every tick. Why? And I'm guessing the values are pretty different. I'm not familiar with Lenis, so I can't really help with that, sorry. 🤷‍♂️

[Jesztar]

24 minutes ago, GSAP Helper said:

By the way, this looks very odd to me: 

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

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

You're calling lenis.raf() TWICE on every tick. Why? And I'm guessing the values are pretty different. I'm not familiar with Lenis, so I can't really help with that, sorry. 🤷‍♂️

Finally I managed to make it work but now my concern is: why doesn't it go down to the bottom just like it should? I think that I should use GSAP to make it work perfectly but I really don't know how to do that.

 

Here is a Stackblitz btw: https://stackblitz.com/edit/nuxt-starter-hwdywi?file=layouts%2Fdefault.vue

[GreenSock]

Oh, that's definitely a Lenis problem. If you remove Lenis, it seems to scroll correctly. And there's no ScrollTrigger or GSAP on the page. Sorry, I'm not familiar with Lenis and these forums are only for GSAP-related questions. If you've got any of those, don't hesitate to ask. 👍