Scrollsmoother footer issue

[lvekua]

Hi Guys,

I was finally able to convince my company to purchase ScrollSmoother. However I'm facing an issue with the layout, especially for the footer section, details are submitted in the demo.

Basically the way our framework is setup is that I can only access header, main, footer content and unable to modify anything outside of it, meaning that I cannot wrap the entire site content into divs, what I tried to do is to use main id as scrollsmoother wrapper and add another div inside for the scrollsmoother content then place all the site content inside. footer becomes a problem, since scrollsmoother add fixed css rules to the wrapper which make footer go all the way to the top, I can keep it on the bottom by adding fixed position and z-index so its on top of everything else but then the content doesnt scroll up past the footer, in which case I need to create a spacer div at the end of every page that has scrollsmoother content and give the same height as the footer so that the content scrolls past the footer.

Hope I'm making sense. and thanks in advance!

See the Pen poGaBNG by lvekua (@lvekua) on CodePen

[Rodrigo]

Hi,

 

If I understood correctly, maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Ardana Ford]

Hello,

I have a similar issue.  I do not have access to the structural header and footer code, so I cannot force the footer inside the ScrollSmoother wrapper.  However, my footer has too much height to be static; I really need it to flow after the end of the ScrollSmoother wrapper segment.  It this possible? 

 

Thanks in advance

[GSAP Helper]

Hi @Ardana Ford and welcome to the GSAP forums!

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Ardana Ford]

Thank you...

Here is an example of what I'm working with.

 

See the Pen JjqMjWG by Ardana-Ford (@Ardana-Ford) on CodePen

Edited June 14 by Ardana Ford
Attached incorrectly

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Still you need to have some control, at least over the styles of the footer element. Without any level of control over that, there is little that can actually be done.

 

Hopefully this help.

Happy Tweenin!

[Ardana Ford]

Thank you for the idea...  I will give it a try.