ScrollTrigger outside ScrollSmoother not working properly

David Gourdet · July 15, 2023

Hello,

I'm trying to display a modal that scrolls horizontally when loaded.
I took my inspiration from this pen :

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

It works perfectly when ScrollSmoother is not involved, but as soon as I uncomment the lines (5 to 11) that enable ScrollSmoother, it doesn't work anymore and I don't have a clue about the reason why.
It seems that my ScrollTrigger is now related to the ScrollSmoother instance and I don't want that.
Is there a method to detach my ScrollTrigger instance from the ScrollSmoother one?

Any guidance is much appreciated.

See the Pen XWyzKzN by deodat (@deodat) on CodePen

Cassie · July 15, 2023

Heya! The first and main thing to note is that ScrollSmoother's 'scroller' is the wrapper element and your trigger will need to be within that element in order to fire. As it's a fixed element you can't do that as the fixed elements need to be positioned outside of the scroller. Which you've done.

<body>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <!--- ALL YOUR CONTENT HERE --->
    </div>
  </div>
  <!-- position: fixed elements can go outside --->
</body>

But because of this you'll need to set things up differently. Here's a simple example of using the main scroller's minimum and maximum scroll values instead.

See the Pen ZEmxGXr?editors=0010 by GreenSock (@GreenSock) on CodePen

Hope this helps!

David Gourdet · July 15, 2023

Hey @Cassie, thanks, it helps a lot!
I didn't kow about the "max" value, I'm gonna study this.
And I think I can build on top of that.

Notifications

Messages

ScrollTrigger outside ScrollSmoother not working properly

Recommended Posts

David Gourdet

Link to comment

Share on other sites

Cassie

Link to comment

Share on other sites

David Gourdet

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members