Jump to content
Search Community

aviolin

Members

  • Posts

    5

  • Joined

  • Last visited

aviolin's Achievements

  • One Year In
  • Week One Done
  • One Month Later
  • First Post Rare
  • Conversation Starter Rare

Recent Badges

2

Reputation

  1. aviolin
    Great, thanks for the speedy solution!
  2. aviolin started following GSAP .kill() doesn't stop ScrollTrigger onUpdate() from running
  3. aviolin
    I'm a little confused about how to prevent a memory leak in a SPA I'm working on. I need to be able to fully kill all tweens on route changes, however even when I kill them, it seems like they are still updating. I've created a minimal demo here: https://codepen.io/aviolin/pen/BaEJPKy?editors=1111 gsap.registerPlugin([ScrollTrigger]) const tween = gsap.to('.box', { scrollTrigger: { trigger: '.box', start: 'top bottom', end: 'bottom top', onUpdate: () => { console.log('update:', Date.now()) } }, x: window.innerWidth - 200, }) document.querySelector('button').addEventListener('click', () => { console.log('kill') tween.kill(); }) If you hit the kill button before scrolling, the tween never happens and onUpdate never runs (as expected). But if you scroll, let the tween finish, then hit the kill button, scrolling around still runs the onUpdate function, as you can see in the console. Is there any way to fully kill a tween, including its onUpdate function?
  4. aviolin
    Awesome! I hadn't tried that. That makes sense and it does seem to do the trick. I appreciate the help on this!
  5. aviolin
    Thanks for the response! I went ahead and made a github page here that uses just the one html file in the first post: https://arlocodes.com/gsap-pinning-bug I'm seeing jumpy scrolling issues on both my Android and iPad. I went ahead and removed the smooth scrolling, but the issue is still there. The page will randomly jump up a bit, you just don't see it smoothly scroll to the random position any more. That Github page is literally just the code I posted above, so it shouldn't have anything to do with my local setup. Any other ideas on this one? Thanks for your time!
  6. aviolin
    First off, the codepen *works*, HOWEVER, when I use VSCode live server and test the following code (which is exactly the same as the codepen), I'm running into the problem on Android, iPhone and iPad. As I scroll down to the bottom of the page, and stop scrolling for a second, the page randomly scrolls itself up or down (usually up) a bit. I can't seem to recreate the problem on my laptop or with devtools, so maybe it has something to do with touch devices? The weirdest thing is that I'm only having the problem when using VSCode live server (and, originally, on Webflow where the full site is being built), but I'm not having the problem with the same exact code on codepen. Maybe because codepen is using an iFrame? Any ideas? Here is minimal amount of code required to recreate the issue with VSCode live server: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <style> html { scroll-behavior: smooth; } .spacer { height: 100vh; background: #f0f0f0; } </style> </head> <body class="body"> <div class="spacer"></div> <div class="container"> <div class="anim__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt tristique arcu ut eleifend. Vestibulum ultricies sit amet tellus ac faucibus. Ut dui dui, viverra eget condimentum non, fringilla non magna.</div> </div> <div class="spacer"></div> <div class="container"> <div class="anim__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt tristique arcu ut eleifend. Vestibulum ultricies sit amet tellus ac faucibus. Ut dui dui, viverra eget condimentum non, fringilla non magna.</div> </div> <div class="spacer"></div> <div class="container"> <div class="anim__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt tristique arcu ut eleifend. Vestibulum ultricies sit amet tellus ac faucibus. Ut dui dui, viverra eget condimentum non, fringilla non magna.</div> </div> <div class="spacer"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js" integrity="sha512-v8B8T8l8JiiJRGomPd2k+bPS98RWBLGChFMJbK1hmHiDHYq0EjdQl20LyWeIs+MGRLTWBycJGEGAjKkEtd7w5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> const initRevealTextOnScroll = () => { gsap.utils.toArray(".anim__text").forEach((text, i) => { gsap.to(text.parentElement, { scrollTrigger: { trigger: text.parentElement, pin: true, start: "center center", end: "+=1000", } }); }); } const initAnimations = () => { gsap.registerPlugin(ScrollTrigger); initRevealTextOnScroll(); } window.addEventListener('load', e => { console.log('Window fully loaded'); initAnimations(); }); </script> </body> </html> Edit: I made a short YouTube video to show what's happening for me:
×
×
  • Create New...