ScrollSmoother documentation precision

[Alex.Marti]

Hi,

Thanks again for your amzing plugins! I'm always excited when there's a new release.

 

I read the documentation for the new ScrollSmoother plugin and I had a hard time making it works because I wasn't sure about the doc.

 

When you say

<div id="smooth-wrapper">
  <div id="smooth-content">
    <!--- ALL YOUR CONTENT HERE --->
  </div>
</div>

You mean

<div id="smooth-wrapper">
  <div id="smooth-content">
    <!--- ALL YOUR CONTENT HERE --->
<header></header>
<main></main>
<footer></footer>
  </div>
</div>

It is correct? Basically I have to put ALL my page content between these two divs?

See the Pen GRyOavW by iamalexm (@iamalexm) on CodePen

Edited April 3, 2022 by Alex.Marti
post not finised

[GreenSock]

It looks like you used a class instead of id

 

Here's a fork where I made the smooth time 2 in order to see things more clearly. is that what you wanted? 

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

[Alex.Marti]

Thank you @GreenSock for your answer.

 

I forgot to put the divs an ID indeed, thanks for pointing that out.

 

But my question was more about the documentation. Just to be sure, do I have to wrap my entier content between the divs?

 

If I do someting like that will it work as well?
 

<header></header>
<div id="smooth-wrapper">
	<div id="smooth-content">
		<!--- My content here --->
	</div>
</div>
<footer></footer>

 

Alex

[Cassie]

No, it has to be your entire page content.

(If you take the header out of the content above you can see)

 

We'll update the docs to make it more clear!

[OSUblake]

There is a caveat for fixed elements, which it talks about in the Caveats section of the docs.

 

Quote

• position: fixed won't work - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.