alisafa

I also recommend my other friends if they face with any empty space at the end of their page try to check section with have no specific height and try to give them height to see if their problem solve or not.

@Rodrigo Thanks for you answer .I think the one reason for layout breaks in my project after hard reload is when I hard reload there is a short moment that locomotive scroll is not get the control of scroll bar yet , In this short moment I started scrolling so after locomotive take the control and changes the scroll bar I think the position of scroll is somehow is not right anymore and my layout breaks. I added a timer to my Js file and added a loader and make the display of main body to none so at for example 5s of beginning of page's loading , you can not scroll and after 5s loader gone and locomotive takes the control of scroll bar so everything looks fine. but I think if someone's network is not so fast this 5s may not solve the problem. although I insert the locomotive and gsap cdns at the end of body or I insert them in head and used defer to execute them in a order but it didn't help. so the only thing that I could handle was to set a 5s loader as I told you.

@Rodrigo @akapowl thanks my friends for your time and your answer, I added some changes that dear @akapowl says like below but unfortunately page breaks again on refresh at the end or at the horizontal section specially when you hard reload. I couldn't break the version of @akapowl on code pen neither the previous version of my own but it definitely breaks in my localhost or the on my project. I am at the point to let it go and change the section entirely gsap.registerPlugin(ScrollTrigger); ScrollTrigger.clearScrollMemory("manual"); window.history.scrollRestoration = "manual"; const pageContainer = document.querySelector(".scrollContainer"); pageContainer.setAttribute("data-scroll-container", ""); const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true, mobile: { breakpoint: 0, smooth: true, }, }); ScrollTrigger.defaults({ scroller: scroller }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: pageContainer.style.transform ? "transform" : "fixed", }); let horizontalSection = document.querySelector(".horizontal-scroll");{ let pinWrap = horizontalSection.querySelector(".pin-wrap"); gsap.to(pinWrap, { scrollTrigger: { scroller: "[data-scroll-container]", scrub: true, trigger: horizontalSection, pin: true, start: "top top", end: () => `+=${pinWrap.offsetWidth}`, invalidateOnRefresh: true, }, x: () => window.innerWidth - pinWrap.offsetWidth, ease: "none", }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); ScrollTrigger.refresh();

@OSUblake Hi dear friend , I add will-change : transform to a P tag and in local environment it solved my problem with shaky text , but after I built my project I have still the shaky text but not in local , do you know can I solve it ? thanks in advance Update: I am sorry it was my mistake and I solve it, but I Couldn't find a way to delete my reply

@GSAP Helper I prepared a demo on code pen but in code pen my problem occur rarely you have to refresh on horizontal scrolling section to see that page breaks some how as I explained at the beginning of this topic. you may not experience this problem in code pen after refreshing but I see this problem when I run the exact same code locally . I also send a link to download a zip file of the exact same code to run in locally .you can download and run npm install and npm start and then refresh on the horizontal scrolling section to see the problem : if the problem that I told not occurs after refreshing when you hit the horizontal scrolling section you can use ctrl+shift+r to heard reload and also it may happen when you try scrolling as soon as the page runs ( before locomotivescroll fully loaded) and also once the page breaks refreshing wont help any more and you may have to refresh so many times or hard refresh to have your correct structure back again. here is the code pen : https://codepen.io/alisafaeyan/pen/ExprJMX for see the problem on your locallhost download the below file: https://blissful-noether-fohw-yyre.storage.iran.liara.space/rar/scrolltrigerrar.rar I am so thankful Please help me I stuck on this project for so long

when I reach to a section with horizontal scrolling (which uses scrolltrigger and locomotive scroll) and I refresh the page the page breaks down and the section which has scrolltrigger disappears . here is my website http://www.insoostudio.ir and you can produce this problem by refreshing the page on this section . after refreshing the page on this section you will see that this section scrolling fails and all the section below it will be disappear and all and all the page will breaks down. here is my config for scrolltrigger ``` gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".scrollContainer"); pageContainer.setAttribute("data-scroll-container", ""); const scroller = new LocomotiveScroll({ el: pageContainer, inertia: 0.8, multiplier: 0.5, smooth: true, getDirection: true, }); scroller.on("scroll", function (t) { document.documentElement.setAttribute("data-direction", t.direction); }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: pageContainer.style.transform ? "transform" : "fixed", }); let horizontalSection = document.querySelector(".horizontal-scroll"); let pinWrap = horizontalSection.querySelector(".pin-wrap"); gsap.to(pinWrap, { scrollTrigger: { scroller: "[data-scroll-container]", scrub: true, trigger: horizontalSection, pin: true, start: "top top", , end: () => `+=${pinWrap.offsetWidth}`, }, x: () => window.innerWidth - pinWrap.offsetWidth, ease: "none", }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); ``` I will be thankful if you can help me with this problem.

@OSUblake I had the issue with text they shake on scroll and I solve it with the way you mentioned ``` will-change : transform ``` so thanks alot !

I some how could mange a hacky solution for it. in gsap.to method I changed end and x attributes in below way: ``` gsap.to(pinWrap, { .... end: () => { let pinWrap = horizontalSection.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; return pinWrapWidth; }, ... }, x: () => { let pinWrap = horizontalSection.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; return -horizontalScrollLength; }, ...... }); ``` I am sure its not the best way and you might know a better way to solve it ( I am new to gsap and don't know the all methods and events) but the above change in end and x attributes seems to solve my problem. if you know a better solution ( my solution definitely is not best practice ) I would be happy to hear. thanks

@Rodrigo I found a demo on codePen which has the issue on resize that I have. here is the link https://codepen.io/raj-shukla/pen/GREjqrp . try to scroll untill you get to images at the end of horizontal scroll section you will see something like this (which is the excepted behavior ) : now try to resize browser ( not codePen output resizable section) and you will see the unwanted space that I say like below image: and if you refresh the page it will be ok. I tested it on Chrome and firefox. this is the exact problem that Iam talking about. so would you please help me to solve it . I stuck into it for so long . I think some how aftre browser resize we should update pin section width but I dont know how

@Rodrigo @mvaneijgen thanks for your replies. I somehow managed all I wants from gsap there is only one problem. As you can see in codepen example above I have a section that scrolls horizontally when you reach to that section every thing works fine but on resize there would be an unwanted space at the end of last slide. please look at the below image : here is my config and code for gsap : gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".scrollContainer"); pageContainer.setAttribute("data-scroll-container", ""); const scroller = new LocomotiveScroll({ el: pageContainer, inertia: 0.8, multiplier: 0.5, smooth: true, getDirection: true, }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: pageContainer.style.transform ? "transform" : "fixed", }); // Pinning and horizontal scrolling let horizontalSection = document.querySelector(".horizontal-scroll"); let pinWrap = horizontalSection.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; gsap.to(pinWrap, { scrollTrigger: { scroller: "[data-scroll-container]", scrub: true, trigger: horizontalSection, pin: true, start: "top top", end: pinWrapWidth, invalidateOnRefresh: true, }, x: -horizontalScrollLength, ease: "none", }); // new ResizeObserver(() => scroller.update()).observe( // document.querySelector("[data-scroll-container]") // ); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); } and here is my html <div class="scrollContainer"> <section id="services" class="horizontal-scroll"> <div class="pin-wrap" data-scroll data-scroll-direction="horizontal"> <div class="pin-wrap_row pin-wrap_row--1"></div> <div class="pin-wrap_row pin-wrap_row--2"></div> <div class="pin-wrap_row pin-wrap_row--3"></div> </div> </section> </div> I guess this problem can because ``` let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; ``` and when I resize this width didnt get updated. so how can I handle this problem. please notice everythin works fine on codepen somoe how but not working in my real project.

Hi I want to have snap behavior too. I add snap attribute to gsap but I didnt work. here is my project on code pen https://codepen.io/alisafaeyan/pen/ExprJMX

thanks for your answer. I removed all related thing to locomotive scroll and I just worked with your package and I still have the problem. my problem is container with class pin-spacer is added to dom with so many delay.

Hi guys. I am using locomotive scroll and gsap and scrolltiriger in my project. in codepen demo you can see the structure idea that I want to implement in my real project. (a smooth scrolling and a pin section with horizontal scrolling effect) I found out that the desire behavior happens only after an element with class pin-spacer is added to dom. in this demo on code pen after running the project everything work just fine but in my real project(that have this structure but with some photos and iframes and other things) the element with class pin-spacer is added with delay and it causes that the scroll behavior ( section with horizontal scrolling behavior ) not happening after page is loaded and it works after something like 20 seconds. I tried to used gsap and locomotive scroll packaes with npm or cdn or adding <script> directly and none of them solve my problem. could you help me please? how can I make the element pin-spacer added to dom right away? I want horizontal scrolling work when dom is ready