alisafa Posted February 9, 2023 Share Posted February 9, 2023 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 See the Pen ExprJMX by alisafaeyan (@alisafaeyan) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 9, 2023 Share Posted February 9, 2023 Hi @alisafa welcome to the forum! locomotive-scroll is a third party tool, there are some demo's how there to show you how to set it up, but GSAP has its own smooth scroll library aptly name SmoothScroll, which is build to work with ScrollTrigger, so if you want support on these forums, you're better of using the tools that are provided by Greensock, because we like to keep this forum focused on the GSAP tools. See the Pen ExPdqKy by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
alisafa Posted February 9, 2023 Author Share Posted February 9, 2023 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. Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 9, 2023 Share Posted February 9, 2023 @alisafa can you provide a minimal demo? Link to comment Share on other sites More sharing options...
Rodrigo Posted February 9, 2023 Share Posted February 9, 2023 Hi, It sounds like you must have some layout shifting after you create your ScrollTrigger instances. Maybe you're loading images or using lazy loading for some elements of your page. Maybe wait for the load event and create your Locomotive and ScrollTrigger instances after all the images are loaded, or add fix heights to your images to prevent those layout shifts. Like @mvaneijgen mentions, a minimal demo that is close to your real setup (no need for the entire project) could give us some idea of what the issue might be. Happy Tweening! Link to comment Share on other sites More sharing options...
alisafa Posted February 23, 2023 Author Share Posted February 23, 2023 @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. Link to comment Share on other sites More sharing options...
Rodrigo Posted February 24, 2023 Share Posted February 24, 2023 Hi, In the codepen example you added in the first post of this thread I don't see any extra space after inspecting the DOM with devtools: See the Pen ExprJMX by alisafaeyan (@alisafaeyan) on CodePen Please try to create a new codepen that clearly illustrates the issue. Happy Tweening! Link to comment Share on other sites More sharing options...
alisafa Posted February 24, 2023 Author Share Posted February 24, 2023 @Rodrigo I found a demo on codePen which has the issue on resize that I have. here is the link See the Pen GREjqrp by raj-shukla (@raj-shukla) on CodePen . 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 Link to comment Share on other sites More sharing options...
alisafa Posted February 24, 2023 Author Share Posted February 24, 2023 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 24, 2023 Solution Share Posted February 24, 2023 It's because you calculated the values only on initial load, you didn't adjust them when resizing. I assume you wanted to do something more like this?: See the Pen eYLdvEj?editors=0010 by GreenSock (@GreenSock) on CodePen 1 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