Jump to content
Search Community

Changing browser size leave empty space on the bottom of page

dzemik11 test
Moderator Tag

Recommended Posts

 

Hey @dzemik11

It's always easier for people to help, when you provide a reduced demo of what you are experiencing.

 

Judging from the code on your page, though, your smooth-scrolling probably was inspired by @Ihatetomatoes pen

 

See the Pen zYrJREM by ihatetomatoes (@ihatetomatoes) on CodePen

 

 

 

You'll notice, that he uses this function

 

let height;
function setHeight() {
  height = container.clientHeight;
  document.body.style.height = height + "px";
}
ScrollTrigger.addEventListener("refreshInit", setHeight);

 

in his pen for setting the height, and adds an eventListener with that function on refreshInit of ScrollTrigger.

That basically recalculates the height on every refresh of ScrollTrigger / resize of the browser.

You do not have any such function in your script.js so far.

 

Try revamping your script with this.

Might just solve the issue, you are experiencing.

 

Cheers,

Paul

 

  • Like 2
Link to comment
Share on other sites

Hi @dzemik11 what exactly doesn't help?

 

I've looked at your code and at what @akapowl has suggested and I can see plenty of differences in what you have in your example versus what is on the codePen.

 

There is nothing in your code that tells GSAP to recalculate the sizes and update the playhead so, it stands to reason that when resizing the window, things will look out of place. You can fork the pen above, tweak it to your needs and implement the resulting code in your project, it should work just fine.

  • Like 3
Link to comment
Share on other sites

gsap.registerPlugin(ScrollTrigger);

var container = document.querySelector("#scroll-container");

var height;
function setHeight() {
  height = container.clientHeight;
  document.body.style.height = height + "px";
}
ScrollTrigger.addEventListener("refreshInit", setHeight);

gsap.to(container, {
  y: () => -(height - document.documentElement.clientHeight),
  ease: "none",
  scrollTrigger: {
    trigger: document.body,
    start: "top top",
    end: "bottom bottom",
    scrub: 1,
    invalidateOnRefresh: true
  }
});

Now, don't go thinking you can just copy this, paste on your project and it will magically work perfectly. You have to read this code, understand what it is doing and adapt it to your needs/page structure.

 

GSAP is magical but it does not read minds. ;)

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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...