Search the Community

Hi @akapowl, Sorry for the not responding sooner, been bussie with work. The reason it work in you demo is because the locomotive-scroll is not working at all. You can see that by the scroll bar. When locomotive-scroll is working the scroll bat is the yellow scroll bar and has the locomotive-scroll styling. I have made a simpler example where is more evident if the locomotive-scroll is working or not: https://codesandbox.io/s/misty-moon-sch8xv?file=/src/hooks/useLocoScroll.js. Removing the data-scroll-section seems to help, also removing the pinType: document.querySelector(".App").style.transform ? "transform" : "fixed" from the hook also enable the pin on the scrollTrigger. Tring to fix the issue with the double scroll bar from locomotive-scroll I have tried a similar think as you did. This is what I've tired: return () => { if (locoScroll) { ScrollTrigger.removeEventListener('refresh', lsUpdate); locoScroll.destroy(); locoScroll = null; } }; Unfortunately this just makes the pin not to work at all. Your idea of using useLayoutEffect inside the hook it's actually what makes this work, almost. This allows the prev code to work, from the useLayoutEffect return function fixing the double scrollbar issue, the one that you suggested at point 1. Interesting enough using useLayoutEffect anywhere else in the code completely brakes the scrollTrigger again in a similar way. I don't know why this is happening, maybe someone from Gsap that is more familiar with how gsap works with useEffect and useLayoutEffect could give us an explanation. The reason I said it almost works is because in my "real" project I have a glitch that unfraternally is not visible in the codesanbox. The issue is when ever the pin should start a small jigger or lag appears. Adding a pin on the hero section on the logo with the start set to "top top" shows that the scroll is happening for a few pixels and then gets pined when it should have been pinned from the start. It's like taking a few pxs to realize that it should have been pinned. I think this is because the scrollTriggers still gets initialized before the locomotive-scroll. I have make some research on how I could delay the scrollTrigger from being created. One solution would be to use the setTimeout. But I am not a big fan on using this fix because I would have to use it evetime I create an animation that uses the pin. I have come across the fac that you could kill the scroll trigger so I am assuming that you could initialized it again but I don't know how I could kill all the scrollTriggers at the same time or have them killed by default and initialized them only if the loco-scroll is true. I know that scrollTrigger has a default prop that allows you to set properties as default for all the scrollTriggers so I will try to use that. I will make some more research on how I could do that and if I don't find an answer I'll probably open another thread and see if someone from gsap can help me. Thank you very much for taking the time! I truly appreciate it! Your input helped me a lot.

Update: I also tried to make an example that is a bit more condensed, to make it at least a little bit easier to see through what's going on there. @Rodrigo would you mind having a look at this if you find the time, to see if this is somewhat acceptable from the React side of things? https://codesandbox.io/s/gsap-scrolltrigger-with-locomotive-scroll-in-react-ux8nlv Worth mentioning on the side: Since elements and even whole sections kept disappearing on me when scrolling, I added a suggested sort of workaround to that known locomotive-scroll issue to the end of the styles.css

So, @Pollux Septimus, I've had some more tinkering with this, and I think I've come to a working outcome ( but since I am not too familiar with React in particular, I give no guarantee that this is the holy grail when it comes to this). Point 3) of what I mentioned still stands - do not use locomotive-scroll's data-scroll-section attribute for the reasons mentioned. Point 1) looks like it boils down to the double-rendering in React's Strict mode from v18 upwards - so just like you do with GSAP's .context(), you will need to do some sort of clean-up to prevent multiple instances of loco-scroll to be created. So now I added return () => { locoScroll.destroy() ScrollTrigger.removeEventListener('refresh', lsUpdate); } to the end of the useEffect of your custom useLocoScroll hook. Point 2) can apparently not really be avoided, but React offers you some way to workaround the problem that this boild down to. The way I understand things, you probably shouldn't be using a useEffect but rather a useLayoutEffect for your custom hook: taken from here: https://kentcdodds.com/blog/useeffect-vs-uselayouteffect Those things changed, I landed on this, which appears to be working just like intended. Does that work better for you? https://codesandbox.io/s/st-loco-react-dtw1q4

Hey Paul, No need to apologize for anything. Actually thanks for pointing out possible issues with the suggestion in my last post and the linking another thread for such issues. It definitely seems like a good idea moving forward to have a basic example of Locomotive with ScrollTrigger on React.

Hi @Gonza Bordes and welcome to the GreenSock forums! Honestly I've never used Locomotive in any setup so I don't have a clear idea of how it actually works. I'd recommend you to take a look at this thread as it seems that the user there was able to integrate it successfully: If you keep having issues please remember to include a minimal demo. You can fork this example and include locomotive there in order to see what could be the problem: https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js Happy Tweening!

Hello Everyone! sorry for my english. Ok , so im trying to use React-locomotive-scroll together with gsap Scrolltrigger. I set up my scrollerproxy component and inserted it into my app and averything seems fine (console is not showing any errors). But when i use scrolltrigger in to my Home page my animation target doesn t change. But when i resize my screen the animation starts. Did anyone came in to this problem before? I left attached will leave my APP, HOME and SCROLLERPROXY code pics to make it clear. Thanks and i hope someone can help me

Hi, i'm not exactly sure what effect you are going for. FWIW it seems a bit disorienting to move something down to a y:200 while scrolling up. That aside I would avoid creating 2 timelines initially time that control the same properties of the same thing. To avoid conflicts I would suggest creating these animations fresh when you need them inside your callbacks sort of like: ScrollTrigger.create({ trigger: ".top-page", start: "top-=100 top", end: "top+=200 top", markers: true, onEnter: () => {let tl1 = gsap.timeline({}) .fromTo("header", { y: 0, overwrite: 'auto' },{ duration: 2, y: 200, ease: CustomEase.create("custom", "0.5, 0, 0, 1"), overwrite: 'auto' })}, onLeaveBack: () => {let tl2 = gsap.timeline({}) .to("header", { scale: 1.2, y: 200, }) .set("header", {y: 200,scale: 1,},"hide") .to("header", {opacity:1},"start2") .to(("header"), { y: 0, duration: 1, ease: "power4.out" }, "start2")} }); I would also remove locomotive scroll until you know things are working fine without it. Hopefully this set up will allow you to remove some of redundancy between the 2 animations like tweening and setting y:200 multiple times. If you need more help please try to simplify the animations as much as possible in a fork of the original pen.

The only thing I can tell you for sure, is that you should call a ScrollTrigger.refresh() after you have created your ScrollTriggers when useing ST with locomotive-scroll, as is also noted in the demo on the .scrollerProxy() docs-page - right now you are only doing it after you created the smooth-scrolling instance and the scrollerProxy(). [...] // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); Apart from that, there can be dozens of reasons for your issue - might be that you need to make sure your images are loaded before you create your ScrollTriggers (or call a .refresh() after they are fully loaded) but it might as well be something very different; possibly not even related to ScrollTrigger. After applying the suggested fixes to your current demo, I can not see the behaviour you mentioned at all. Since we can not really offer advice from looking at screenshots, because there are just too many possible problem-sources in a complex scenario like this, please add a minimal demo showcasing your issue, if you need further assistance on this.

I think the reason for why it doesn't work properly after a page-transition, boils down to the fact, that for a certain period of time within barba's lifecycle, both, the old and the new container will live together in the DOM. Now while you are initiating your new locomotive-scroll instance everytime with reference to the new barba-container, your scrollerProxy is only being created with reference to '.smooth-scroll', which will be available in both, the old and new container at that time - and since the old container sits above the new in the DOM tree at that time, you will be referencing the old container's .smooth-scroll with that. You can check the difference between the two elements you are targetting by logging out console.log(smoothScroll.parentElement.getAttribute('data-barba-namespace')) vs. console.log(document.querySelector('.smooth-scroll').parentElement.getAttribute('data-barba-namespace')) in your initSmoothScroll function. So you can either simply just change the element you are targetting in your scrollerProxy to be the same you are targetting when creating your locomotive-scroll instance, or alternatively just remove the old barba-container at the proper time since you don't need it for your type of page-transition anyway. Both options resolved things for me. Hope they do for you, too. Thanks for the heads-up btw @Cassie - was scratching my head for a minute or two there, before I saw that.

Thanks so much! So I don't really know enough about barba or locomotive to help with exactly *why* But something wonky's happening with the order that things are being called. If I pop a scrollTrigger.refresh() in a delayed call it sorts it out. That's basically saying, hey scrollTrigger, check where are the positions are again and recalculate stuff. I imagine what's happening is that the first time that scrollTrigger is made, the elements are in a slightly different position or don't exist. This is a bit of a band aid, if I were you I'd whack a bunch of console logs in there, look into barba's callbacks and make sure you're calling stuff in a logical order. https://codesandbox.io/s/young-lake-rmegei?file=/src/js/app.js:1641-1708 Also worth mentioning that the initial call was a ok for me after removing the height on the .dark class in the CSS. That was adding a height to the header when the .dark class was added. Maybe that was confusing you? It baffled me for a little bit!

Hi there! Yeah - ScrollSmoother is our smooth scrolling library. No need for locomotive anymore. A note: You don't need ScrollSmoother to tie animations to scroll speed - that sounds like you may be looking for ScrollTrigger's - scrub:true

Hello, I was looking for some info on how to tie some scrolling behavior to scroll speed and I came across this post. In it, @ZachSaucier says The original poster does not reply so there is no additional discussion of this. One of the websites listed is the portfolio site of Abishek Jha who has one of his sites listed on the Github page for Locomotive. But, Wappalyzer says both websites use GSAP. I started to use Locomotive at one point but the features of ScrollSmoother seem to make it unnecessary. Has the addition of ScollSmoother removed the need to pair GSAP & Locomotive? I also found another post from less than a year ago asking about this pairing and @OSUblake didn't tell the poster to just use ScrollSmoother so I'm trying to see what the most recent thinking on this is. I tried to find an answer on my own but I don't know when ScrollSmoother came out! Thanks, Graham

While this doesn't seem to affect anything, it sure is problematic - there is occasions when you can get both instances to scroll, and if they both report back different data to ScrollTrigger, I assume ST is going to be very confused and you won't see the results you expected at some point. I simply just added some custom console.log('...')s to the hooks you are using. That line you mentioned is not what I was talking about though. I was referring to locomotive-scroll's data-scroll-section attribute, which according to their docs can help improve performance for locomotive-scroll - but as I said, it will most likely cause conflicting behaviour with ScrollTrigger. Here are some examples in vanilla JS to show how the points I mentioned above do create issues. [Edit: Keep in mind, that those examples need to be opened in a seperate window, because with a viewport as narrow as the preview's iFrame, locomotive-scroll will default back to native browser scrolling] This is the basis for all the examples; here with native browser scrolling - works fine, all good. https://codepen.io/akapowl/pen/yLqpZxK This here is the same example but with locomotive-scroll's default behaviour implemented, not using the data-scroll-section attribute - works fine. https://codepen.io/akapowl/pen/bGjazzR And here is that exact same example, only with the data-scroll-section attribute added to the individual sections (similar to what you are doing in your demo) - this is what I meant with my 3)rd bullet point. As you can see, things become problematic with the pinning ScrollTrigger there, on the second section. https://codepen.io/akapowl/pen/qBypvWW Last, but definitely not least, here is that basic locomotive-scroll example again, but this time with the order of creation messed up. In this example I create the ScrollTriggers first, before I even initialize locomotive-scroll and set up the scrollerProxy etc. - again, not working too well. https://codepen.io/akapowl/pen/XWBVGrG So all in all, I think that's where (at least some of) your problems stem from, although I'm not saying that this is definitely all, as I didin't have the time to check every single bit in your code. The biggest sources of your problems seem to be a) React - its double-calling in Strict Mode and its order of creating your page in general; and b) locomotive-scroll and its data-scroll-section attribute that isn't really compatible with ScrollTrigger.

Hello there. I am no React expert, so I won't be able to help much with that side of things, but here are some things I noticed. 1) From what I can tell you from a quick glance, there appears to be something wrong with how you're setting up locomotive-scroll, since you are creating multiple instances of it (possibly because of the double-call shenanigans of React ?) - I suppose that will create conflicts with ScrollTrigger - not saying that this is the only or true source of the issues you are facing, but to me that definitely something you might want to fix. 2) I'm not sure how much this following does affect things, but the fact that your ScrollTriggers are being created, before your locomotive-scroll instance was created, doesn't look right to me either - it should be the other way around; first the locomotive-instance should be created (with the relevant ScrollerProxy etc.), then the ScrollTriggers. 3) One thing that I can tell for (pretty much) sure though, is that ScrollTrigger, but at the very least ST's pinning, will not work properly with locomotive's data-scroll-section attribute, which you appear to be using. Locomotive-scroll will apply transforms to that section for the smooth-scrolling effect when you use it, which will interfere with what ScrollTrigger does to that section. In a smooth-scrolling scenario as such (using transforms), the pinType will have to be used as 'transform' to create the pinning-effect; but those transforms applied by ST will probably contradict with the transforms locomotive-scroll applies to that section. See the problem? When that attribute is removed from your Section component things at least appear to be working better. https://codesandbox.io/s/broken-flower-qnzb6v?file=/src/components/Section/index.jsx Yet, things stop working again as soon as I disable StrictMode for React. Which I think mioght be because of the order of creation not being correct, as mentioned in 2) I hope this will help a bit with getting things sorted. One more thing: I just now realized, you are using locomotive-scrol v4 - they made some changes to how loco-scroll works, which also affect how the ScrollerProxy needs to be set up. That's also something you might need to consider.

Hi all. I've been trying to fix the bug for a couple of days now, searching the web for an answer, but nothing helps. The essence of the problem is as follows - after barba transition scrolltrigger markers does not move with locomotive scroll. I will throw my code below. Thank you in advance for your kind help in solving this bug! I will be grateful to everyone! app.js

Thank you very much for responding so quickly. Sometimes four eyes see more than two. It was a silly oversight and with a very easy solution. This forum is the best. I know ScrollSmoother it's better than Locomotive but it's not free and I can't afford it. Gsap has revolutionized the creation of websites. I remember when I got certified in Flash and Actionscript was the only creative solution, but Gsap is lighter and provides unique creativity. I think you provide greate resources and tutorials with a good documentation. There are things that webgl can do better, but are two different things. Thanks!!

Also, Have you tried ScrollSmoother instead of Locomotive? It's designed to work with ScrollTrigger: https://greensock.com/docs/v3/Plugins/ScrollSmoother

This is because your rotation elements aren't part of your ScrollTrigger You'll want to either separate those into their own ScrollTriggers, or add this to your pin/scrub tween as a timeline like this: gsap.timeline({ scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, start: "top top", end: pinWrapWidth, markers: true, }, defaults: { ease: 'none' } }) .to(".pin-wrap", { x: -horizontalScrollLength, }) .to('.anuncio1', { rotation: 360*5, },0);

Thank you! Stopping the locomotive scroll and deleting scroller: '.App' does make the pin from from scrollTrigger work. The issue is that the pin does not work with the locomotive-scroll. It might be a ether from the locomotive-scroll or I did not set up scrollerProxy properly. I have tried all the ideas I got from your reply but unfortunately it's still not working.

Hello @mvaneijgen, How did you know? In my project I do use locomotive-scroll but even when I do not use it the scrollTrigger does not work. I specifically did not include anything related to loco scroll because I did not tough that loco scroll was the problem. as everything else works fine except the pin. Can you please tell me how did you know that I am suing another library from the code sandbox? That would help me debug it the issue.

@GreenSock my content is disappearing: https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx I believe this is due to locomotive scroll messing with page scroll (translation) and therefore position: fixed of ScrollTrigger's pin does not work.

Hi, It's virtually impossible for us to debug a live site. On that note I tested that url on both Firefox and Chrome on Android and I don't see the issue you're mentioning. I assume that this is happening on iOS? Please provide a minimal demo that clearly illustrates the issue you're having and as much details as possible regarding browser and OS where this is happening. Also it might be worth trying to remove locomotive and see if the issue gets fixed, so you can isolate what could be happening to be a GSAP related issue or something else in your app. Sorry I can't be of more assistance. Happy Tweening!

Hello guys, we are working on a new project, but we have a big problem on mobile. We use both scrolltrigger and locomotives scroll, on mobile once the user stops scrolling he is sent back to the top of the page. I can't understand what the problem is, we have entered several console logs when refreshing locomotives and also scrolltriggers.. Can anyone give us a hand? I think the problem was here locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".site", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; } }); If i wrap this inside a if ($(window).width() >= 768) { media query, all works fine, but i need a clean solution. http://rambl.oneupstudio.it/

Hello @GreenSock, Thank you very much for your help! I have created a custom hook that integrates locomotive-scroll and ScrollTrigger using the video I linked in the original question, gsap Locomotive Scroll with ScrollTrigger demo, gsap docs for scrollerProxy, and some other Youtube videos. I have also took into consideration your comment from above. Everything works now, and having the hook where I could simply turn locomotive-scroll on and off helped me debug stuff. I will leave the code below for anyone else struggling. Maybe this thread will help. I hope you don't mind. Here is the custom hook: import React, { useEffect } from 'react'; import LocomotiveScroll from 'locomotive-scroll'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; const useLocoScroll = (start) => { gsap.registerPlugin(ScrollTrigger); useEffect(() => { if (!start) return; const scrollEl = document.querySelector('.App'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smooth: true, multiplier: 1.5, }); locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollEl, { scrollTop(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; } return null; }, scrollLeft(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, }); const lsUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener('refresh', lsUpdate); ScrollTrigger.refresh(); }, [start]); }; export default useLocoScroll; To use this hook you simply call it inside theApp.js file like so: useLocoScroll(true) or any condition that will result to true You'll also need to add data-scroll-container to the".App" div and data-scroll-section to the most outer div of any of your sections. For simple use I have created a Section component that does that. For a batter understanding of the hook, please check gsap demo. import React from 'react'; const Section = ({ children }) => { return <section data-scroll-section>{children}</section>; }; export default Section; To use this, simply wrap your jsx into this component like so: return( <Section> code... </Section> ) For the gsap / ScrollTrigger code I've done exactly what Jack suggested. Here is another code example: useEffect(() => { let ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: heroContainerRef.current, scroller: '.App', start: 'top top', scrub: 1, }, }); tl.to(textColRef.current, { x: 200, opacity: 0, }); tl.to( imageWrapperRef.current, { x: -200, opacity: 0, }, 0 ); }); return () => ctx.revert(); }, []); Please note the scroller: '.App' inside the ScrollTrigger. This is very important as you need to specify what the new scroller is. Also, don't forget to add into your App.css or index.css the CSS that locomotive-scroller recommends. Hope this helps

Hello @GreenSock, Thank you for you replay! I know that ScrollSmoother is easier to work with, but purchasing the GreenSock Club does not make sense for me right now. Sorry. Regardless I am still locking for a wait to have a smooth scroll while being able to use everything else that gsap offers. I am sorry that it was difficult to navigate the demo. It's part of a bigger project and I tool only what's necessary. I forgot to add content underneath the hero section so you could scroll. I have fix the issue and now you should be able to scroll ?. Also, there ware some different styling for mobile so please enlarge the window in order to see the animation. Maybe this will help. I have also added a 3s duration so the animation doesn't fly off the screen. I did ignore the ScrollTrigger and implemented the locomotive-scroll. It seems to work fine. I don't think that the locomotive package is the problem as I wasn't able to make the ScrollTrigger run even before adding it. Before adding the locomotive scroll, I had overflow: hidden on the App and body and had a separate component with overflow-y scroll. I figure that ScrollTrigger doesn't work on divs with overflow-y so I added the locomotive scroll because I planned to do it anyways. The difference between before the locomotive scroll and after is the before the animation wont event run. Now the animation runs but ScrollTrigger gets ignored. Can you please take a quick look at pages > homepage > hero > index, right before where the jsx starts and see if you can spot anything? If you don't see anything at the first glimpse I will try to find other solutions. Thank you!