GSAP + Lenis smoothscroll - scrolling to anchor breaks tweens

[oligsap]

Hi everyone,

 

I'm using Lenis smoothscroll and I have lots of scrollTrigger timelines that are triggered with toggleAction and scrub.

 

They work fine when I wheel scroll down my page but when I click on an anchor to immediately go to my section, previous timelines do not finish properly, I have styles that are not added/removed only on the ones triggered with toggleAction.

I tried forcing the animations to the end like below, but that doesn't work.

 

document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener('click', (e) => {
        e.preventDefault();
        const href = anchor.getAttribute('href');
        if (href === '#') {
            return;
        }
        window.lenis.scrollTo(
            href,
            {
                immediate: true,
                onComplete() {
                    const scrollTriggers = ScrollTrigger.getAll();
                    scrollTriggers.forEach((st) => {
                        if (st.animation) {
                            st.animation.progress(1);
                        }
                    });
                }
            }
        );
    });
});

 

What am I doing wrong here ? Thanks for your help.

[GreenSock]

Hi @oligsap. It's hard to diagnose without a minimal demo, but it sounds like you must have some pinning going on which affects how the browser (or lenis) can calculate things. This is one of the benefits of using ScrollSmoother - it has this functionality built in (accommodating for pinning with its own scrollTo() method whereas I don't think Lenis can do that). I've heard nice things about Lenis - I'm not knocking it at all. I'm just saying it's unaware of how to accommodate pinning when calculating where an element is on the page scroll-wise. 

 

This is also why I created the helper function in the docs for doing those calculations. Hopefully that helps. 

 

Thanks for being a Club GreenSock member! 🥳

[oligsap]

Hi @GreenSock,

 

I'm sorry I was in a rush and needed first insights. I now have a demo running : 

 

See the Pen ExdXwJa by olig (@olig) on CodePen

 

You'll see that when you click on "References" and scroll back up, all the styles are mixed up. But when you scroll down as usual all the styles apply and at the end you only have one screen left before the section references appear.

 

I tried killing the tweens but that doesn't work either.

 

Thanks for your help

 

 

[oligsap]

Ok solved :

 

Deleted `refreshPriority` and added condition if window.scrollY > scrolltrigger instance then go to end of animation with .progress(1)

 

 

[oligsap]

I wanted to add to the solution that when you scroll back up you can't just do .progress(0). You also need to reverse the scrolltriggers array because you may get styles added from timelines tweening values after the previous one. Full code here : 

 

_this.previousScroll = window.scrollY;
window.lenis.scrollTo(
	href,
	{
		immediate: true,
		onComplete() {
			let scrollTriggers = ScrollTrigger.getAll();

			if (_this.previousScroll > window.scrollY) {
				scrollTriggers = scrollTriggers.reverse();
			}

			scrollTriggers.forEach((st) => {
				if (st.animation) {
					if (window.scrollY > st.start) {
						st.animation.progress(1);
					} else {
						st.animation.progress(0);
					}
				}
			});

			_this.previousScroll = window.scrollY;
		}
	}
);