dzemik11 Posted September 7, 2020 Share Posted September 7, 2020 Hello, as in topic I have a problem. When I change the size of browser window it leave empty space in bottom of my page. It is caused by GSAP smooth scrolling. You can see it here https://dzm11.github.io/melonstudio/ I see that when I change width of page there is an inline style in body class that not change after resizing. Link to comment Share on other sites More sharing options...
akapowl Posted September 7, 2020 Share Posted September 7, 2020 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 2 Link to comment Share on other sites More sharing options...
dzemik11 Posted September 7, 2020 Author Share Posted September 7, 2020 38 minutes ago, akapowl said: let height; function setHeight() It doesn't help ;/ The value of body class is not changing approximately to browser size Link to comment Share on other sites More sharing options...
Dipscom Posted September 7, 2020 Share Posted September 7, 2020 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. 3 Link to comment Share on other sites More sharing options...
dzemik11 Posted September 7, 2020 Author Share Posted September 7, 2020 @Dipscom could you tell me what exactly code I should past? Link to comment Share on other sites More sharing options...
Dipscom Posted September 7, 2020 Share Posted September 7, 2020 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. 3 1 Link to comment Share on other sites More sharing options...
dzemik11 Posted September 7, 2020 Author Share Posted September 7, 2020 Thanks a lot, it works as it should ;D Link to comment Share on other sites More sharing options...
akapowl Posted September 7, 2020 Share Posted September 7, 2020 Well, I forgot to mention, that you'd also have to use invalidateOnRefresh: true and function-based values in your ScrollTrigger y: () => -(height - document.documentElement.clientHeight) Off course, it wouldn't work as intended without those. Thanks for stepping in @Dipscom 2 Link to comment Share on other sites More sharing options...
Dipscom Posted September 7, 2020 Share Posted September 7, 2020 Stepping on toes, that's what I am here for. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now