Jump to content
Search Community

iliya

Members
  • Posts

    3
  • Joined

  • Last visited

iliya's Achievements

  1. I just tried this but this didnt work either. So my logic looks like this right now: import ScrollTrigger from 'gsap/ScrollTrigger'; export function setProxyOnGsapScrollTrigger(scroller, fns) { // Kill existing scroll triggers if theres any const scrollTriggers = ScrollTrigger.getAll() if( scrollTriggers.length ) scrollTriggers.forEach( scrollT => scrollT.kill() ) ScrollTrigger.scrollerProxy(document.body, { scrollTop(value) { if (arguments.length) { scroller.scrollTop = value; } return scroller.scrollTop; }, }); scroller.addListener(ScrollTrigger.update); fns.forEach( ({ fn, params }) => fn(...params) ) document.addEventListener('smoothScrollDestroy', () => { console.log('reset scrollTriggerProxy') const allScrollTriggers = ScrollTrigger.getAll() if( allScrollTriggers.length ) allScrollTriggers.forEach( scrollT => scrollT.kill() ) ScrollTrigger.scrollerProxy(document.body); fns.forEach( ({ fn, params }) => fn(...params) ) }) } the fns are the functions that create the animations. So right now if I load the page with the screen size above 768 or below that, the animations work. But when I change it to below 768 or above, the scrollTrigger wont work anymore.
  2. Im sorry for not providing a codepen since my project is a little messy right now. I tried resetting the scrollerProxy to body like below but I dont know if Im doing it right. Can you give me an example on how I should reset it? ScrollTrigger.scrollerProxy(document.body, { scrollTop(value) { if (arguments.length) { window.scrollY = value; } return window.scrollY; }, });
  3. Hello everyone, Im creating a website with smooth-scrollbar and to use gsap scrollTrigger, I set a proxy for scrolling and it works like a charm. Now for screen sizes below 768 Im destroying smooth-scrollbar if it exists and normalize the scroll. The problem is that when I do that gsap scrollTrigger doesnt work. I tried killing all the scrollTrigger instances and recreating them but it didnt work. So im guessing that the scrollProxy is the problem and I should some how remove that. I searched through the documentation but I didnt find any way to remove it so I was wondering is there any way I can destroy the scrollProxy? This is the scrollerProxy im using which works perfectly as long as you dont go below 768px ScrollTrigger.scrollerProxy(document.body, { scrollTop(value) { if (arguments.length) { scroller.scrollTop = value; } return scroller.scrollTop; }, }); and I have an event listener for when it gets destroyed to kill all scrollTriggers and rebuild the animations. document.addEventListener('smoothScrollDestroy', () => { const allScrollTriggers = ScrollTrigger.getAll() if( allScrollTriggers.length ) allScrollTriggers.forEach( scrollT => scrollT.kill() ) buildScrollAnimation() })
×
×
  • Create New...