Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by TrulyNewbie

  1. TrulyNewbie

    Correct term

    Hi, I remember skimming over something that said that theres a function or something of that sort, that finalises tweens if they're quickly scrolled past? Could some one please remind me of the correct term please. Thanks
  2. 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.
  3. 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
  4. Perfect! Thank you all for your help!
  5. Thanks, I tried that a few days ago, but I couldn't figure out how to add the roatation
  6. 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
  8. Thanks for your help, but unfortunately that doesn't work on my site or on the demo
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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);
  14. Thank you. That works! But what about: window.addEventListener('load', (event) => { locoScroll.stop() }); function goAhead() { locoScroll.start(); } }}); How can I replicate this?
  15. Hi, I'm moving from Locomotive to ScrollSmoother. When my testimonial changes size, the area beneath the footer is huge. Or when I resize a text box I have the same problem. So is there a version of "locoScroll.Update", "locoScroll.Start" and "locoScroll.Stop" for gsap? $('.testimonials').on('afterChange', function(){ locoScroll.update();ScrollTrigger.refresh(); console.log("after") }); I've read the docs, but maybe I'm not searching for the right terms
  16. Hi, Because of the new (BRILLIANT) plugin, ScrollSmoother, I thought I'd try it on a horizontal scroll. But I'm unable to put a div before the horizontal scroll and afterwards? Could someone please point me in the right direction? Thanks again https://codepen.io/PointC/pen/YRzRyM - Forked from
  17. Thanks for taking a look at this. On wordpress we put the script in our header. Do you think that's not best practice?
  18. I just replaced the scripts I had 3.9.1 to 3.10.1 and I added smooth scroll (just like the in the video) and it just broke
  19. Hi, how do i find my collection of likes? I click the love icon on things I wish to read but I don't know where to locate the list
  20. Hi, I want to snap each section as I scroll. But since I've added locomotive scroll, it no longer works. I've read a bunch of threads and tried to figure it out myself, but I can't find a working solution. I'd appreciate any help! Thank you (again and again)
  21. Thank you! For anyone else who may have this issue: https://codepen.io/NewbieRuby/pen/rNYejNb
  22. Hi, I've been playing around with horizontal scrolling, and I've encountered a problem. How do I scroll trigger horizontally? I was following the codepen I attached, and I've checked the forum, butI can't seem to find a solution. I want to animate each div as it comes in from the right. Thank you for any help!