TrulyNewbie

Thank you for your help. I didn't consider that a fixed element could not be a trigger . Thanks And - "And why were you setting the height to something invalid like this?:" That was an accident, I was playing around with ideas and must've accidentally hit save.

Hi, on my website, I have a slider that changes height, so when it's clicked the footer is cut off. So I made a small demo. When I click the button, the fixed .box in the background scroll triggers reset. So it fades back in. How can I make it so it when I click the button that triggers the ScrollTrigger refresh, the .box div isn't affected? I've tried, toggleActions, and invalidateOnRefresh: false Thank you for any help

Thank you!

Perfect! Thank you all for your help!

Thanks, I tried that a few days ago, but I couldn't figure out how to add the roatation

Hi, I tried to figure it out on my own but I'm stuck. The first two parts of my animation work how I want it to, but the last part doesnt. When i scroll down 50vh, I want the floating animation (rotatesletters) to stop and the shapes stop moving And then when I scroll back to the top of the screen, I want the floating animation (rotatesletters) to start again. I've tried: 1. overwrite: "auto", 2. rotatesletters.pause() 3. functions I've also rewritten the code four different ways I appreciate any help. Thank you

THANK YOUUUUUUUU! HAPPY EASTER ❤️❤️❤️❤️❤️❤️❤️

Thanks for your help, but unfortunately that doesn't work on my site or on the demo

I've never made a sandbox before! Thanks for showing me https://codesandbox.io/s/nice-kapitsa-e0uodo?file=/index.html So this is work exactly like how I mentioned. When you click the external button, on the about page, theres a huge gap at the bottom, and you cant scroll to the top of the page to see the text. It also doesnt load at the top of div # Thanks again

That's what I was trying to explain. The demo couldn't show the issue, because the issue only appears when you click a link to scroll to a section on another page. E.g You are on this page: https://new.com/ and then you click a button that brings you to - https://new.com/about#approach But when you load in you can't scroll to the top (it's cut off), it doesn't load at the top of the anchor (loads half way down), and theres a huge gap at the bottom

Hi, thanks for your help, I've tried the codes but it doesn't fix the issue. The page loads at the top of the anchor, but I cant scroll above it, and beneath it is the footer and a huge gap

Sorry about that, I thought because the link was external it might be pointless to show. So when I click "internal" It scrolls down, but when I click "external" on my Wordpress site, I have the issues mentioned above. https://codepen.io/NewbieRuby/pen/gOoQrLx

Thank's ill try that out

Hi, I don't think it's possible to create a CodePen. I have a smoother scroll enabled, and When I click a link e.g (Ruby.com/about#me), it scrolls to the anchor, but the page is messed up. You can't scroll to the top (it's cut off), it doesn't load at the top of the anchor (loads half way down), and theres a huge gap at the bottom. I've tried to use scrollTrigger.update/refresh but to no avail. Thanks again! function getSamePageAnchor (link) { if ( link.protocol !== window.location.protocol || link.host !== window.location.host || link.pathname !== window.location.pathname || link.search !== window.location.search ) { return false; } return link.hash; } // Scroll to a given hash, preventing the event given if there is one function scrollToHash(hash, e) { const elem = hash ? document.querySelector(hash) : false; if(elem) { if(e) e.preventDefault(); // Scroll to the element in the URL's hash on load gsap.to(window, {scrollTo: elem}); } } // If a link's href is within the current page, scroll to it instead document.querySelectorAll('a[href]').forEach(a => { a.addEventListener('click', e => { scrollToHash(getSamePageAnchor(a), e), console.log("click and scrolled"); }); }); // Scroll to the element in the URL's hash on load scrollToHash(window.location.hash);

Thank you. That works! But what about: window.addEventListener('load', (event) => { locoScroll.stop() }); function goAhead() { locoScroll.start(); } }}); How can I replicate this?