Ocamy Posted May 9, 2022 Share Posted May 9, 2022 Hi! @akapowl helped me out yesterday to get pinned animation working with Locomotive and Barba, but after that i've realised that pinSpacing is not working as expected after going to the other page and coming back. https://stackblitz.com/edit/web-platform-vhx7k3?file=index.html,styles.css,index.js Also, the animation jumps on mobile, and if remove the code below it works but it is extremely jittery. pinType: container.querySelector('[data-scroll-container]').style .transform ? 'transform' : 'fixed', Link to comment Share on other sites More sharing options...
GreenSock Posted May 9, 2022 Share Posted May 9, 2022 Hi @Ocamy. LocomotiveScroll and Barba are not GreenSock products, so we can't really support those here. Sorry. If you have any GSAP-specific questions and can provide an isolated minimal demo that's not using 3rd party tools like that (which are likely the culprits of the problems), we'd be happy to take a peek. You are welcome to post in the "Jobs & Freelance" forum if you'd like to find paid support/consulting. As for the mobile stuff, you could try setting ScrollTrigger.config({ignoreMobileResize: true}) and maybe even ScrollTrigger.normalizeScroll() to see if it helps. Good luck! 2 Link to comment Share on other sites More sharing options...
Solution akapowl Posted May 9, 2022 Solution Share Posted May 9, 2022 The problem is, that with your order of execution you are not sticking to the order that is neccessary for things to work properly. The code for implementing locomotive-scroll to work with ScrollTrigger via .scrollerProxy() that you likely got from the example on the .scrollerProxy() documentation page has comments; one of them (at the very end) says: // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); So you would either have to make sure to stick to the order provided in there to begin with, or you will need to call ScrollTrigger.refresh() again after all your ScrollTriggers have been created. I just quickly threw a .refresh() call at the very end of your Stuck() function, just to show the difference it makes. https://stackblitz.com/edit/web-platform-ydejfq Also, you may not have noticed that you actually appear to be creating more and more instances of locomotive scroll with every page-transition, so that is something I would concentrate on fixing first, because it is the most likely to throw things off with regard to ScrollTrigger in the long run. But as Jack already mentioned, neither locomotive-scroll nor barba.js are GreenSock products, so that is nothing we can help with. Good luck with the project! 2 1 Link to comment Share on other sites More sharing options...
Ocamy Posted May 9, 2022 Author Share Posted May 9, 2022 Thanks again @akapowl, i wasn't aware of the duplicate, i found out it is because the barba container must be inside the locomotive container. I hope i can do it. Thanks! 1 Link to comment Share on other sites More sharing options...
akapowl Posted May 10, 2022 Share Posted May 10, 2022 16 hours ago, Ocamy said: Also, the animation jumps on mobile, and if remove the code below it works but it is extremely jittery. pinType: container.querySelector('[data-scroll-container]').style .transform ? 'transform' : 'fixed', Just wanted to quickly also address this problem you are having. It is related to you tweening on the y of containers that are parents of the element that you want to pin. Since there will still be transforms set inline on those elements when they are done animating, those transforms will change the context for the position: fixed that is being applied for the pinning on mobile. So you will need to make sure there will be no transforms set on any parent of the element you are going to pin or else things will not behave as they should. You can do so by e.g. using clearProps. I just quickly threw it onto that tween of your tlLoaderOut timeline to show the difference it makes, i.e. that now after load things will pin properly on mobile. You will likely want to do something similar for the tweens that handle your transitions in between pages. tlLoaderOut .to(loader, { yPercent: -100 }, 0.2) .from('.site-main', { y: 150, clearProps: "transform" }, 0.2); // <----- https://stackblitz.com/edit/web-platform-gszrpg 3 1 Link to comment Share on other sites More sharing options...
Ocamy Posted May 10, 2022 Author Share Posted May 10, 2022 I'm so glad i joined this forum. Thank you so much @akapowl 1 Link to comment Share on other sites More sharing options...
Ocamy Posted September 6, 2022 Author Share Posted September 6, 2022 Hi, I am coming back with another problem that is also happening in the demo above: https://stackblitz.com/edit/web-platform-gszrpg When updating to a newer version of Scroll trigger i.e. 3.5.1 and above, the scrollbar appears and makes the body wider even though overflow is set to hidden. Link to comment Share on other sites More sharing options...
akapowl Posted September 6, 2022 Share Posted September 6, 2022 Try setting overflow to hidden !important on the data-scroll-wrapper for the case that locomotive-scroll smooth-scrolling is active. .has-scroll-smooth [data-scroll-container] { min-height: 100vh; overflow: hidden !important; } https://stackblitz.com/edit/web-platform-ukzmm8?file=index.html,styles.css 1 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