ScrollTrigger with Lenis smooth scroll - Problem with the scrollerProxy setup.

[rholda]

Hi there,

 

I'm trying to use Scrolltrigger with Lenis smooth scroll inside a Next js project.

My problem is when I resize the window when it has been scrolled, the scrolltriggered animations are shifted.

 

I've made a codesandbox reproducing my issue : here.

 

I have setup a simple animation, triggered by the first .section, it's just moving the blue .box by 100vh.

If you scroll a little bit and resize the window, the blue .box will shift vertically.

It look like it's shifting proportionally to the distance scrolled.

If you scroll back to the top and resize the window, the animation will get back to it's normal position.

I've already setup scrollerProxy on others custom smooth scrolls, and never had this issue.

The problem is hapenning on all animations in my project, on pinned scrolltriger stuff to,

(the pin position is shifting by something that looks like the scrolled distance).

 

I didn't find any ressources with a Lenis smooth scroll setup with scrollerProxy (wich is mandatory to keep perfect animations sync).

Can someone see what i'm missing or doing wrong ?

 

thanks.

[momo12]

20 minutes ago, rholda said:

Hi there,

 

I'm trying to use Scrolltrigger with Lenis smooth scroll inside a Next js project.

My problem is when I resize the window when it has been scrolled, the scrolltriggered animations are shifted.

 

I've made a codesandbox reproducing my issue : here.

 

I have setup a simple animation, triggered by the first .section, it's just moving the blue .box by 100vh.

If you scroll a little bit and resize the window, the blue .box will shift vertically.

It look like it's shifting proportionally to the distance scrolled.

If you scroll back to the top and resize the window, the animation will get back to it's normal position.

I've already setup scrollerProxy on others custom smooth scrolls, and never had this issue.

The problem is hapenning on all animations in my project, on pinned scrolltriger stuff to,

(the pin position is shifting by something that looks like the scrolled distance).

 

I didn't find any ressources with a Lenis smooth scroll setup with scrollerProxy (wich is mandatory to keep perfect animations sync).

Can someone see what i'm missing or doing wrong ?

 

thanks.

For using Lenis, you don't need to use Scrollerproxy. Lenis is using the default values for telling browser how far you have scrolled. While Locomotive is hijacking your browser scroll and you need to use Scroller Proxy!

[rholda]

Actually I do, I've commented the proxy here and the animation is not sync anymore...

[GreenSock]

Hi @rholda! It looks like your minimal demo is not accessible - it says "Update your permissions to access projects"

 

Can you provide a minimal demo that's accessible to all? 

 

As far as I know, @momo12 is right - Lenis shouldn't need a scrollerProxy at all because it uses the native scroll. But I've never used Lenis, so I'm certainly no expert. Once I see the minimal demo, I'm sure it'll become more clear. 

[rholda]

Here is a minimal codepen : 

See the Pen yLExLeG?editors=0010 by _sans_titre (@_sans_titre) on CodePen

 

If you comment the proxy setup you will see the animation jumping, so the proxy is mandatory for me.

The issue is when resizing with the window scrolled, it messes up the animations positioning.

If the resize occur with the window scrolled to top, it revert to normal.

[rholda]

Breaking news !

I've just tested with an older version of gsap ("3.8.0" ) and the problem disappeared !

So I'm going to roll back on my project.

 

What can possibly have changed to cause this issue ?...

[Cassie]

Ooooh I don't recommend rolling back that far.

Is this was you're trying to do? Chatted to the lovely Lenis gang and I don't think there should be a need for a proxy, or tapping into GSAP's ticker at all

See the Pen jOKvOpR?editors=1010 by GreenSock (@GreenSock) on CodePen

[rholda]

I don't want to make a pin, I know my demo looks like it, but it's to make it clear that it need a proxy.

I more want a clean parallax and seting it up to look like a pin make it clear that the animation is not well sync with Lenis.

 

look : 

See the Pen GRGXRLG?editors=0010 by _sans_titre (@_sans_titre) on CodePen

[Cassie]

Steps to replicate?

It looks a ok to me - mac, chrome - is this a browser or OS issue?

https://cdpn.io/pen/debug/GRGXRLG?authentication_hash=nqMwvoXVoWNk

[rholda]

I'm on a pc, windows 10, chrome.

 

Here's a screencast : https://drive.google.com/file/d/1gTnHv_vSn8bckOYqKQxX2vlhcsF32d87/view?usp=share_link

(you may have to download the file, the preview seems not to work)

 

I've tested on a macbook air os 10.15.6, chrome, and I have the same issue.

[Cassie]

Ah ok, I see.

So that's in an iframe - do you still have that issue in the debug view I linked to?

Maybe @arzafran can weigh in on how they do parallax with lenis?

[rholda]

iframe is not the issue.

 

To be clear, the problem is not Lenis, I have exactly the same issue (the first one, the resize problem) with an old custom smooth scroll of mine.
The issue is with the proxy setup on the latest gsap, it bugs exactly the same way with Lenis or my lib.

 

I assume Lenis guys thinks it's not necessary to setup a proxy since their approach is native, but it's not the case in this precise example.

It may be not visible in most cases, but Lenis is not perfectly sync with scrollTrigger, it needs a proxy.

 

For now I'm rolling back my version of gsap, I need to move forward on my project, and I'm exhausted from debugging.

 

 

[Cassie]

Sorry for asking so many questions - I know it's incredibly frustrating. Just trying to pin down the source of the issue, not aiming to be obtuse or challenging in any way!

[Cassie]

We're looking into it! Thanks for flagging it. We'll update this thread with any info we find

[rholda]

Hey, no problem Cassie, and thanks for your help

I'm just so tired, spended all this day trying to figure out the problem.

I'm just too tired and a little scared of being late on my project.

 

 

[GreenSock]

Sorry about any confusion there, @rholda. Sounds like you've been through the wringer troubleshooting while stressed out about a deadline. Been there, done that, got the t-shirt. No fun.

 

I'll spare you the lengthy explanation, but it basically boils down to a synchronizing thing. You've got three options: 

1. Use the beta version of the next release of ScrollTrigger which you can preview here: https://assets.codepen.io/16327/ScrollTrigger.min.js (we've tweaked the code to avoid the edge case synchronizing issue you ran into)
2. -OR- in your scrollerProxy's scrollTop() function, return window.pageYOffset instead of lenis.scroll. It looks like lenis.scroll is not returning the accurate value during the resize.
3. -OR- just enable the normalizeScroll feature: ScrollTrigger.normalizeScroll(true);

In all the solutions above (except #2 of course), you should **not** need the scrollerProxy()

 

Does that help? 

[rholda]

Hi @GreenSock,

 

Solution 1 : don't work, the latest beta have the same issue, runing my code with versions before 3.11 works fine (I tested with the 3.10.4 and it's perfect). So I assume the problem don't come from Lenis not returning the good scroll value, since it works fine with older versions of gsap.

 

Solution 3 : At first it seems good, but now I have an annoying issue with a little glitchy jump on small mousewheel events, here's a screencast,

-> https://drive.google.com/file/d/1zoctyGJKBNv4Wdw6QZbjhpIn3VEcWZYv/view?usp=share_link

Also, the large wiggle of my exemple is gone, but there's still a subtle position vibration on the text.

So, not working for me.

 

Solution 2 : It works, nice and smooth, and seeing it now make me feel a little dumb ? I should had come to try that !

Buuuuut, I find another bug that I'm going to be to lazy to reproduce right now : in my project when I have srolled to the bottom of the page and I do a resize, it messes up the above animation, reseting them without replaying while scrolling up.

 

So, I'm going to go with the 3.10.4, witch work fine with my code from the start, with Lenis or my custom smoothscroll, I haven't anymore time to debug.

 

Also about Lenis, I don't know if I'm going to use it, for a very particular reason : I like to be able to use the scrollbar with click and drag, and with Lenis it don't smooth the scroll that way, wich is understandable because of the native approach.

I know not many users will do that, but for tuning animation timing and feeling it's much more precise than the wheelmouse for me.

Maybe I'll setup my custom scroll for dev and Lenis for prod, I don't know yet, the only stuff that really makes me want to use Lenis is the native position sticky support, but gsap pin just works fine.

 

And for me Lenis needs a proxy to be perfectly sync and smooth ?

 

Edit: Lenis need the solution 2 to work nice with a proxy even in prior gsap version, it does not have the big shifting resize issue, but I have some small glitchy jumps on scroll.

 

Anyway, thank you very much for the help, going back to work now ?

[Cassie]

Quote

Also about Lenis, I don't know if I'm going to use it, for a very particular reason : I like to be able to use the scrollbar with click and drag, and with Lenis it don't smooth the scroll that way, wich is understandable because of the native approach.

I know not many users will do that, but for tuning animation timing and feeling it's much more precise than the wheelmouse for me.

Out of interest - why have you gone with Lenis instead of ScrollSmoother, just the native pin support?

Thought it's worth mentioning too just in case you, or other people coming to this thread didn't realise that there was a GSAP option for smooth scroll. ScrollSmoother does smooth things out when you drag the scrollbar, so if that's a bit gamechanger for you maybe it's a better option?

[rholda]

I just wanted to give Lenis a try, I don't use ScrollSmoother, I think my gsap subscription don't include it.
I'm happy with my custom stuff, using it for many years, before all the libs.
It's just a fixed container with lerped css transform, aplying its height to the document.body.

With the use of resize observer it's really simple nowadays.

 

ScrollTrigger is the game changer for me, I could not go back to how I use to do stuff without it, even now that intersection observer is here.

 

[GreenSock]

Just circling back to this - the latest beta seems to work well. You just have to call ScrollTrigger.update() after lenis does its update (basically, tell ScrollTrigger "hey, my scrolling position changed using a 3rd party library!")

 

See the Pen RwBbvvw?editors=1010 by GreenSock (@GreenSock) on CodePen