Jump to content
Search Community

Can I stop changing Body Height on hover ?

Sam Tremblay test
Moderator Tag

Recommended Posts

Hello GSAP Users 🖐

 

I have a question for you, if you put a look on example just under, you'll see the Body Height changing when I hover an element that the height change. Can I stop that? Because it is breaking my scroll.

Or, do I need change my mind on how it work when I use the Smooth Scroller and I have some hovers that the height changing?

 

Example: https://www.awesomescreenshot.com/video/11013387?key=0ca72e7d6fb84dcab6cb8ea4f9f376ae

 

I use GSAP 3.11.0.

A really big thank you in advance for your help!
Sam

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

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

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Also, you should definitely update to 3.11.1. 

 

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

Link to comment
Share on other sites

Hi GSAP Helper!

 

Thanks for your help, but in fact, I don't understand how do you want I push to you an example if it's for the global Website?

My example is in the video, wee see the problem... Could you just help me by said to me if Gsap do that normaly or if it's me the problem please? And if it's Gsap, can I disabled it?

 

 

Thank you!
Sam

Link to comment
Share on other sites

Hi Sam. It's impossible for us to troubleshoot without a minimal demo. It's not feasible to just glance at a video and diagnose exactly what's going on. It could be many different factors. The key to solving this would be for you to reproduce it in the most minimal demo possible. NOT your whole site. Just some colored <div> elements in a CodePen or something like that. The most important part of troubleshooting is: isolate, isolate, isolate. Often when you force yourself to do that, you'll very quickly discover what the real problem is that's tough to see when so many other things are at play. 

 

Once we see a minimal demo that clearly shows the issue in the browser where we can tinker with the code (CodePen is perfect for this), I'm confident we'll be able to offer more insight. 

  • Like 1
Link to comment
Share on other sites

By the way, it is indeed normal for ScrollSmoother to watch the height of the content and force a ScrollTrigger.refresh() if it changes. Otherwise, you could get stuck if your page grows, for example, but you don't call ScrollTrigger.refresh() and then it thinks your page is shorter than it is and the user cannot scroll down to the very bottom. 

 

One potential solution is to add extra space to the bottom so that when your elements animate larger, it doesn't affect the page size at all. 

 

Also, did you update to 3.11.1 as I suggested? 

Link to comment
Share on other sites

Woow Thanks for your fast come back!

Yes I updated to 3.11.1, but it's not resolve the problem.

 

For the extra space, i'm not sure to understand. Do I need to add some padding-bottom to body? But in fact, I'll have a space that I don't have in the graphic model right?

Here is my Codepen:

See the Pen QWrEqRX by sam-tremblay (@sam-tremblay) on CodePen

(Sorry, I just copy Source Code from Chrome instead of my PHP Code, it's not clean)

 

A really big thank you for your help!

Sam
 

Link to comment
Share on other sites

I don't really understand the problem - you are changing the height of the content with those rollovers, so the height of the page SHOULD change. But you don't want it to? If it doesn't update, then how would you expect the user to be able to scroll all the way? The scrollbar wouldn't accurately reflect the content. See what I mean? 

 

And no, I didn't mean just adding padding to the bottom - the key would be to make the overall height of your page to remain consistent even when the rollovers are open. There are many ways you could do that, like counter-animating the height of a padding <div> at the very bottom of the page while you animate the height of the rollover. Or forcing the height of the content <div> to be more than it needs to be in order to leave space for the rollovers to grow, etc. It's not really a GSAP question - that's more of a CSS/markup/layout issue. 

  • Like 1
Link to comment
Share on other sites

Awesome!

I have think to force the height of JOBS section with JS/CSS so it'll don't change the height of the page... Thanks for your help, you grow up my personal discuss hehe (Sorry for my bad english)

 

For answer to your misunderstanding, I have a mind based on Locomotive Scroll where the scroll is not based on the real Body Scroll... So when we hover a element with Loco Scroll we don't get a bug because the body can change without affect the default height given for the scroll wrapper/content.

 

I'm thinking when am saying this, can I suggest a parameter? I don't know if it makes sense, but a parameter where the height would not be affected when hovering an element while scrolling with the ScrollSmoother plugin.. Do we have a space for some suggestions?

 

 

A really big thank you again for your help!
Sam
 

Link to comment
Share on other sites

Sure, we are always open to suggestions. Absolutely. But I think you may still be misunderstanding the issue (perhaps I just haven't explained it well). 

 

Let's say your page (content) is exactly 1000px tall and your viewport is 800px tall. That means you've got 200px of scrollable area and the scrollbar will indicate as much. Now what if you rollover something and it grows by 100px? That means that now you should have 300px worth of scrollable area. If the <body> stayed locked at 200px (so that it didn't grow to accommodate the rollover/expanded content), you'd never be able to reach the end of the page and your scrollbar wouldn't properly reflect the scroll status of the page (assuming your content stayed expanded)! So it wouldn't make much sense for us to offer a parameter to force the content/body height to stay locked because that would likely break the proper scroll functionality. Does that clarify things? 

Link to comment
Share on other sites

Yes it's clear for me, at least, I think, I'm not super good in English ^^ (Sorry by the way)

 

But I'm not sure you understand me haha! When I hover an element and the height change, I don't want ScrollSmoother/Trigger act on the body height before I call a ScrollTrigger.refresh().

 

In fact, as a dev, when I scroll and I hover an element that the height change, I don't want change the body height because on "mouseleave" I want come back to the default height.... If I want that (body height changing on hover) I'ld want use ScrollTrigger.refresh() manually.

 

Now that I explain it this way do we understand each other differently or always the same haha?

 

 

Best regards and really thank you to you too!

Sam

Link to comment
Share on other sites

I want Just add to my idea and make sure you can understand me:

 

In case, when you scroll and you hover an element (In fact, you don't need to scroll... so only if you hover an element) and you plan to come back to the original height, the height don't need to change because the part hidding on the end screen/body in overflow it's ok and will be not hidden any more on "mouseleave".

Link to comment
Share on other sites

Hey @Sam Tremblay,

 

Is creating an accordion element that doesn't update it's height an option? You could create an animated element using the Flip Plugin.

 

Based on an example from the GreenSock collection I came up with this:

See the Pen MWGjaQe by rhernando (@rhernando) on CodePen

It needs a little bit of tinkering but hopefully is enough to get you started.

 

Happy Tweening!!!

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...