When is the specific ScrollTrigger configuration in the docs needed?

[stefanobartoletti]

First of all thanks for this great tool, it works wonderfully!

I've implemented Lenis in a project that also uses GSAP and ScrollTrigger (in my case, using Nuxt), and it worked like charm with a minimal configuration, basically by only adapting the "Basic" configuration in the docs to the Vue lifecycle (in this case with a custom composable):

// composables/useLenis.js
import Lenis from '@studio-freight/lenis'

export const useLenis = () => {
  let lenis

  onMounted(() => {
    lenis = new Lenis()

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

    requestAnimationFrame(raf)
  })

  onUnmounted(() => {
    lenis.destroy()
  })
}

Even with this minimal configuration, ScrollTrigger seems to work without any issue, it does not seem to be bothered by Lenis.

According to the readme, this snippet is also to be used

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

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

gsap.ticker.lagSmoothing(0)

However, I do not understand what is the use case or what issue it is addressing. Is it needed in some specific cases, or does it solve some problem that I was only lucky not to have in my project?

Can we have some insight about the reasoning behind this implementation?

Thanks again :)

[clementroche]

This snippet is made for using gsap ticker as lenis raf for performance reasons, it's not required but nice to have.

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

gsap.ticker.lagSmoothing(0)

This one was required for initial versions of Lenis but i'm not sure it's still relevant since GSAP team made some internal changes, I have to run tests to firgure it out.

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

[stefanobartoletti]

Thanks for your reply, now I understand better.

I will consider using the first snippet and test with and without it, to see what works better in my case.

As for the second one, from your description, apparently it recalculates ScrollTrigger continuously, if everything is already going well probably it is better not to use it performance-wise.

Thanks for the insights!

[clementroche]

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.update()/ no performance issue

[michaeljblum]

Hey @clementroche, would it be possible to clarify best practices/pattern for using Scrolltrigger with React lenis? On beefy rigs it's totally fine without syncing them (the gsap.ticker update logic etc), but on worse machines performance issues crop up.

For example, in the React lenis docs, the example given shows using the wrapper with a ref and ticker/RAF code in useEffect.

But in the Satus repo, the implementation - involving these two files (gsap, scrolltrigger - is fairly different. Not making use of a wrapper element, not using a lenisRef for an update function, etc.

Any guidance would be super appreciated. Thanks!