Merkif Posted December 13, 2021 Share Posted December 13, 2021 Hi how can I reload or update the scrollTrigger flattens the scroll height on resize, there is a large white space on the page in my horizontal scroll section without reloading, how can I fix this? if the window size is <1200px I use the browser's native scrolling. gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ // desktop "(min-width: 1200px)": function() { smoothScroll("#content"); function smoothScroll(content, viewport, smoothness) { content = gsap.utils.toArray(content)[0]; smoothness = smoothness || 1; gsap.set(viewport || content.parentNode, { overflow: "hidden", position: "fixed", height: "100%", width: "100%", top: 0, left: 0, right: 0, bottom: 0 }); gsap.set(content, { overflow: "visible", width: "100%" }); let getProp = gsap.getProperty(content), setProp = gsap.quickSetter(content, "y", "px"), setScroll = ScrollTrigger.getScrollFunc(window), removeScroll = () => content.style.overflow = "visible", killScrub = trigger => { let scrub = trigger.getTween ? trigger.getTween() : gsap.getTweensOf(trigger.animation)[0]; scrub && scrub.kill(); trigger.animation.progress(trigger.progress); }, height, isProxyScrolling; function refreshHeight() { height = content.clientHeight; content.style.overflow = "visible" document.body.style.height = height + "px"; return height - document.documentElement.clientHeight; } ScrollTrigger.addEventListener("refresh", () => { removeScroll(); requestAnimationFrame(removeScroll); }) ScrollTrigger.defaults({ scroller: content }); ScrollTrigger.prototype.update = p => p; ScrollTrigger.scrollerProxy(content, { scrollTop(value) { if (arguments.length) { isProxyScrolling = true; setProp(-value); setScroll(value); return; } return -getProp("y"); }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; } }); return ScrollTrigger.create({ animation: gsap.fromTo(content, { y: 0 }, { y: () => document.documentElement.clientHeight - height, ease: "none", onUpdate: ScrollTrigger.update }), scroller: window, invalidateOnRefresh: true, start: 0, end: refreshHeight, refreshPriority: -999, scrub: smoothness, onUpdate: self => { if (isProxyScrolling) { killScrub(self); isProxyScrolling = false; } }, onRefresh: killScrub }); } gsap.to(".advantage", { x: () => -(document.querySelector('.advantage').scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { scrub: true, invalidateOnRefresh: true, invalidateOnResize: true, trigger: "#principles", pin: true, start: "top top", end: () => "+=" + document.querySelector('.advantage').offsetWidth }, }); gsap.to(".products--home", { x: () => -(document.querySelector('.products--home').scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { scrub: true, invalidateOnRefresh: true, invalidateOnResize: true, trigger: "#products", pin: true, start: "top top", end: () => "+=" + document.querySelector('.products--home').offsetWidth }, }); gsap.to(".articles--home", { x: () => -(document.querySelector('.articles--home').scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { scrub: true, invalidateOnRefresh: true, invalidateOnResize: true, trigger: "#article", pin: true, start: "top top", end: () => "+=" + document.querySelector('.articles--home').scrollWidth }, }); }, }); Link to comment Share on other sites More sharing options...
GreenSock Posted December 13, 2021 Share Posted December 13, 2021 Hi @Merkif. First of all, please only post in English here. I translated your post for convenience. If you'd like some help, please provide a minimal demo with only the essential code for recreating the specific problem you're struggling with and we'd be happy to answer any GSAP-specific questions. 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