Is it possible to have ScrollTrigger and ScrollSmoother "listen" to the scroll of another element and not the body?

[stefanobartoletti]

I have a rather unusual layout, where the main content of the page is inside a "frame" that is exactly the size of the viewport.

The body of the page itself basically never scrolls (it never gets higher than 100vh), and the scroll only happens inside .frame-content element (the blue-bordered one), that contains the main content of the page (as you can see, it contains many sections).

I wish to integrate both ScrollTrigger and ScrollSmoother into this layout, by having them take effect (and do their calculations) only into the .frame-content element.

 

But some intial trial-and-error (mostly error I would say, eheh) has given me:

 

- ScrollTrigger does not work at all: I wish to animate elements inside the various sections when they appear on screen, but it looks like it listens to the scroll of the body, which never scrolls. So these elements do not animate at all.

 

- ScrollSmoother, if set like this  ScrollSmoother.create({ content: '.smooth-content' }), always break my layout and places this element out of the "frame"

 

(I have not included both of them in the codepen, because I wanted to show the clean look of the original layout before applying anything to it).

Is it possible to do these things, or am I only trying to force these tools to do something that they are not supposed to do?

Thanks for any answer or insight about this!

See the Pen yLrOrmY by stefanobartoletti (@stefanobartoletti) on CodePen

[akapowl]

Hello there. The documentation has the answers to your questions.

 

1.   You'll want to look for the scroller property.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/
 

Quote

 

scroller
 

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.
 

2.   No, unfortunatelly it is not possible for ScrollSmoother to have it smoothen the scroll of a different element than the body.

https://gsap.com/docs/v3/Plugins/ScrollSmoother/#faqs
 

Quote

 

Can ScrollSmoother be applied to the contents of individual elements instead of the whole web page?

No, ScrollSmoother is intended to be used to smooth the scrolling on the overall page, not individual elements.

 

 

[stefanobartoletti]

Thanks for your reply!

I really overlooked that part in the ScrollTrigger docs, I will check it.

For ScrollSmoother I will try to see if I can find another way to implement a similar solution, but my priority was ScrollTrigger.

Thanks again!