Scrolltrigger Pinning w/ Observer not working when Lenis added

[Windpixel]

Hi Crew,

 

I have a "Hero" 100vh section which with is pinned at the top top, observer listens for scroll input then does some animations across a few 'slides'. Everything works as expected until I add Lenis, Smooth Scrolling at which time the pinning no longer works.

In the codepen (Hopefully minimal enough ) , turning off Lenis by commenting out "const = lenis = new Lenis()", the pinning comes back as expected.

I have tried clamping the trigger, different Lenis config and wrapping, but no luck, the pin stops working.

Any advice is very much appreciated. I love everything you guys do, GSAP fills me with such joy

See the Pen XWOoywr by windpixel (@windpixel) on CodePen

[ryan_labar]

You might check this thread out. It's late here, so I've not had a full chance to deep dive on what you're experiencing.

Also, just wondering why you chose Lenis over ScrollSmoother?

[Windpixel]

5 minutes ago, ryan_labar said:

You might check this thread out. It's late here, so I've not had a full chance to deep dive on what you're experiencing.
Ill Take a look, thanks

 

Also, just wondering why you chose Lenis over ScrollSmoother?

A lot of my projects are with Wordpress, I experimented heaps with getting it to work  "out of the box", but had a lot of issues, lenis seemed to work.

With that being said, id switch to ScrollSmoother in a second if I can get it to reliably work with Wordpress. So any tips welcome.

[GreenSock]

It's totally fine if you prefer Lenis - you shouldn't feel bad at all about using that with GSAP just because we also offer ScrollSmoother. Use whatever works best in your scenario. Lenis approaches smoothing differently and both have their pros and cons. ScrollSmoother does require that you wrap your page in a container <div> that gets moved around independently. If you don't have any control over that structure in your WordPress environment, perhaps you could do some simple DOM manipulation on page load, sorta like this (untested):

 

let wrapper = document.createElement("div"),
    content = document.createElement("div"),
    body = document.body;

wrapper.appendChild(content);
while (body.firstChild) {
  content.appendChild(body.firstChild);
}
body.appendChild(wrapper);

ScrollSmoother.create({
  content: content,
  wrapper: wrapper,
  smooth: 2
});

But again, I'm sure Lenis is great and you are welcome to keep using that. I don't have any experience with it but my understanding is that it works seamlessly with GSAP/ScrollTrigger. 👍

 

I hope that helps. 

[Windpixel]

16 minutes ago, GreenSock said:

It's totally fine if you prefer Lenis - you shouldn't feel bad at all about using that with GSAP just because we also offer ScrollSmoother. Use whatever works best in your scenario. Lenis approaches smoothing differently and both have their pros and cons. ScrollSmoother does require that you wrap your page in a container <div> that gets moved around independently. If you don't have any control over that structure in your WordPress environment, perhaps you could do some simple DOM manipulation on page load, sorta like this (untested):

 

let wrapper = document.createElement("div"),
    content = document.createElement("div"),
    body = document.body;

wrapper.appendChild(content);
while (body.firstChild) {
  content.appendChild(body.firstChild);
}
body.appendChild(wrapper);

ScrollSmoother.create({
  content: content,
  wrapper: wrapper,
  smooth: 2
});

But again, I'm sure Lenis is great and you are welcome to keep using that. I don't have any experience with it but my understanding is that it works seamlessly with GSAP/ScrollTrigger. 👍

 

I hope that helps. 

Hi Jack
Firstly thanks again for everything you do, after about a year of GSAPing and leveling up my overall JS game, im starting to make some cool stuff.

I updated my Code Pen from above and added ScrollSmoother, It worked straight away. - Pin works as expected and scroll smoother works once the pin is released.

See the Pen GRzzMJP by windpixel (@windpixel) on CodePen

I'll try your DOM ammending code with Wordpress and run some testing. I actually prefer the idea of Scroll Smoother as it lets you tap into all the parallax stuff that scroll smoother offers.

[Windpixel]

Ok Update. Reporting back with a little more info hopefully to help others too.

RE: Adding Scroll Smoother Easily to Wordpress

I loaded the ScrollSmoother.min.js through functions.php
 

    wp_register_script('smoother-script', 'YOUR_PATH/ScrollSmoother.min.js', ['gsap-cdn'], '3.5.0', true);
    wp_enqueue_script('smoother-script');

 wp_enqueue_script('app', 'YOUR_PATH/app.js', [], '1.0.19', true);

Then added some code in an app.js file which is also registered and enqueued.
 

document.addEventListener("DOMContentLoaded", function() {
  
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

let wrapper = document.createElement("div"),
    content = document.createElement("div"),
    body = document.body;

content.id = "smooth-content";

wrapper.appendChild(content);

while (body.firstChild) {
  content.appendChild(body.firstChild);
}

body.appendChild(wrapper);


ScrollSmoother.create({
  content: content,
  wrapper: wrapper,
  smooth: 2,
  effects: true,
    smoothTouch: 0.1,
});
  
});

A note on performance. I did experience some jittering, but also experienced the exact same jittering with Lenis, which like others have mentioned here in the forum that this most likely related to other performance issues. (In my case, I think it could be background-attachment:fixed which usually does poorly
My original issue is fixed and I can move on
Thanks All.
 

[ryan_labar]

6 hours ago, GreenSock said:

It's totally fine if you prefer Lenis - you shouldn't feel bad at all about using that with GSAP just because we also offer ScrollSmoother.

I hope my comment didn't come off as preference shaming. I haven't looked at Lenis in a while, so I was generally curious.

[GreenSock]

7 hours ago, ryan_labar said:

I hope my comment didn't come off as preference shaming. I haven't looked at Lenis in a while, so I was generally curious.

No, I didn't get that impression at all. It was a valid question. I was just going out of my way to make sure it was clear that we're not "anti-Lenis" around here even though your answer didn't seem to imply that. 👍