Search the Community

Hello community! So here's the thing: I have a window.resize event where I apply a state as true or false based on the screen size to hide and show elements. However, when I resize the window, the ScrollTrigger doesn't retrigger. I'm using React with Locomotive Scroll. During the resize event, I destroy (if that's the right logic) all the ScrollTriggers, then I do a ScrollTrigger.refresh(). My ScrollTriggers have invalidateOnRefresh: true, but nothing seems to work. So, I'm lost. If you need a minimal demo without issues, I can provide one. Thanks.

Hello, I was building entire multi page website with using GSAP only in Next.js for scroll trigger on every page for some elements. At, last I decided to also add locomotive scroll as well. But after adding it to the project all scroll trigger doesn't work at any page. Why is that I cannot find the answer. Also is there any method to achieve smooth scroll without disabling scroll trigger. Thank You !

I have sections across my site which are using ScrollTrigger. Once I implemented Locomotive JS, all of my ScrollTrigger animations stopped working. I've read through the forums and saw that you need to update() ScrollTrigger when Locomotive is scrolling. I implemented this and saw no results. Then, I resized the window and my ScrollTrigger animations that were in view, they started working. In short, animations trigger on resize, but not on page load. I've implemented update() and also tried refresh(), but no luck. Below is a demo of the issue. Further down, I've added in steps to recreate and also a visual. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <div data-scroll-container> <div data-scroll-section> <section class="hero"> <div class="container"> <div class="row justify-content-center justify-content-xl-between"> <div class="col-12 col-md-10 col-lg-9 col-xl-5"> <div class="hero__text text-center text-xl-start"> <h1 class="hero__title" data-scroll data-scroll-speed="2">Title</h1> </div> </div> </div> </div> </section> <section class="textImageRepeater"> <div class="container"> <div class="row"> <div class="col-12"> <div class="textImageRepeater__item textImageRepeater__layout--row"> <div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight"> <div class="textImageRepeater__copy"> <h2>Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft"> <img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy"> </div> </div> <div class="textImageRepeater__item textImageRepeater__layout--rowReverse"> <div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight"> <div class="textImageRepeater__copy"> <h2>Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft"> <img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy"> </div> </div> </div> </div> </div> </section> </div> </div> $(function() { gsap.registerPlugin(ScrollTrigger); function animateFrom(elem, direction) { direction = direction || 1; var x = 0, y = direction * 100; if(elem.classList.contains("gsap_reveal--fromLeft")) { x = -100; y = 0; } else if (elem.classList.contains("gsap_reveal--fromRight")) { x = 100; y = 0; } elem.style.transform = "translate(" + x + "px, " + y + "px)"; elem.style.opacity = "0"; gsap.fromTo(elem, { x: x, y: y, autoAlpha: 0 }, { duration: 2, x: 0, y: 0, autoAlpha: 1, ease: "expo", overwrite: "auto" }); } function hide(elem) { gsap.set(elem, { autoAlpha: 0 }); } gsap.utils.toArray(".gsap_reveal").forEach(function(elem) { hide(elem); // assure that the element is hidden when scrolled into view ScrollTrigger.create({ trigger: elem, onEnter: function() { animateFrom(elem) }, onEnterBack: function() { animateFrom(elem, -1) }, onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view }); }); /*******************************************************************/ /* Locomotive /*******************************************************************/ const pageContainer = document.querySelector("[data-scroll-container]"); const scroll = new LocomotiveScroll({ el: pageContainer, smooth: true }); // each time locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) scroll.on(pageContainer, ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.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}; } }); window.addEventListener("load", function (event) { ScrollTrigger.refresh(); }); ScrollTrigger.addEventListener("refresh", () => scroll.update()); ScrollTrigger.refresh(); }); .hero { min-height: 1000px; background: lightblue; display: flex; align-items: center; } .textImageRepeater { overflow: hidden; padding: 120px 0 160px 0; } .textImageRepeater__intro { margin-bottom: 66px; } .textImageRepeater__layout--row { flex-direction: row !important; } .textImageRepeater__layout--rowReverse { flex-direction: row-reverse !important; } .textImageRepeater__item { display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 70px; justify-content: space-between; } .textImageRepeater__header { margin: 17px 0; } .textImageRepeater__graphic { margin: 0; } .textImageRepeater__text, .textImageRepeater__graphic { flex-basis: 50%; } .textImageRepeater__text { max-width: 500px; } .c-scrollbar_thumb{ background-color: #5D209F!important; width: 7px; margin: 2px; opacity: 1; border-radius: unset; mix-blend-mode: multiply; } Steps to recreate: Open this fiddle Widen the output box to something wide (i.e. 1300px) Run the fiddle Scroll down and you'll see the elements not loading Resize the output box to something smaller The scrollTrigger animations now appear Here is a gif showcasing the issue:

Hi @Ram Ji welcome to the forum! Locomotive is a third party library which is not build by GSAP. We like to keep this forum to GSAP related questions. There are lots of previous topics about locomotive scroll and ScrollTrigger on these forums https://greensock.com/search/?q=locomotive&quick=1&type=forums_topic&nodes=11 if you want to do some research yourself But GSAP has its own smooth scroll library aptly named SmoothScroll, which works out of the box with ScrollTrigger, so this will save you a lot of hassle. You are free to use what ever tool you like of course, but personally I can't help you with Locomotive. https://codepen.io/mvaneijgen/pen/xxQBLgq?editors=0010

Guys I have a quetion I used Locomotive scroll and GSAP scroll Proxy but it casues extra scroll. This only happens with Mouse wheel and not the scroll-bar! gsap.registerPlugin(ScrollTrigger); const locoScroll = new LocomotiveScroll({ el: document.querySelector(".content-wr"), smooth: true }); ScrollTrigger.scrollerProxy(".content-wr", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: document.querySelector(".content-wr").style.transform ? "transform" : "fixed" });

Guys I have a question. I have this code but it's not working with Scrolltrigger.matchmedia I mean when I remove the mathMedia everything works fine but with this nothing works fine! I use Locomotive Scroll BTW! gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ "(min-width: 800px)": function() { const imgwr = document.querySelector(".small-image-wr") gsap.utils.toArray(".small-image-wr").forEach((imgwr, i) => { imgwr.img = imgwr.querySelector(".img-4"); gsap.from(imgwr.img, { yPercent: 10, }); gsap.to(imgwr.img, { yPercent: -10, ease: "none", scrollTrigger: { trigger: imgwr, scroller: ".sections-wr", scrub: true, invalidateOnRefresh: true } }); }); }, "(min-width: 800px)": function() { const projectimg = document.querySelector(".project-image") gsap.utils.toArray(".project-image").forEach((projectimg, i) => { projectimg.img = projectimg.querySelector(".img-5"); gsap.from(projectimg.img, { yPercent: 10, }); gsap.to(projectimg.img, { yPercent: -10, ease: "none", scrollTrigger: { trigger: projectimg, scroller: ".sections-wr", scrub: true, invalidateOnRefresh: true } }); }); } });

Unfortunately none of the solutions helped me (I fixed the Locomotive Scroll implementation with Scroll Trigger) but I've found one. When setting up the mobile and tablet scroll for Locomotive Scroll, I deactivated the smooth in order to maintain the vanilla scroll of the browser as Locomotive Scroll gives a really slow scroll on mobile. This is what caused the problem. However, if you put a touchMultiplier instance to Locomotive Scroll you can actually replicate the vanilla scrolling speed. My set up looks like this now: const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scroll-smooth"), smooth: true, multiplier: 0.25, lerp: 0.035, touchMultiplier: 9, tablet: { smooth: true, breakpoint: 0, lerp: 0, }, mobile: { smooth: true, breakpoint: 0, lerp: 0, }, }); It's not the optimal solution if you want to quit smooth scrolling for mobile...but for me it works.

Hi all, I'm experiencing an issue with Locomotive Scroll + GSAP ScrollTrigger. As soon as I add a "data-scroll-speed" to an element which is different from 0 it seems like the trigger is completely off and I don't know what I'm doing wrong. I would like to start the animation on all the elements as soon as they enter the viewport, this works as long as I don't change the "data-scroll-speed". I've added a minimal demo and the very last element has a "data-scroll-speed" set to 3. As you can see the opacity changes from 0 to 1 but not when the element enters the viewport. I'm quite new to GSAP, Locomotive Scroll and JS in general and I'm hoping someone in the forums can get me back on track. I've tried for countless hours to wrap my head around this, so this is my first post in the forums and my very first Codepen ever :-). Thank you in advance!

I have been taking almost a week to solve this problem by myself, my problem is that if I add snap in scroller trigger variables, there is a pin spacing increasing and moving on the top, but the snap effect is working, since I really want this effect of compulsory snap scroll. If I remove snap variable everything is fine. I dont know how to use CodePen to show my code since I am using reactJs and I am the beginner of gsap and locomotive scroll, I want to make the website have the smooth behavior moving( locomotive scroll ) and gsap horizontal scroll at the same time. I pushed my code onto Github, please whoever and take time to solve my confusion. The related file are App.js, App.scss, HorizontalScroll.jsx, useGsap.js, useLocoScroll.js , the rest of it please ignore: https://github.com/Derek-Y1106/Testing

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',

Hi, You can definitely create parallax effects with ScrollTrigger: https://codepen.io/GreenSock/pen/rNJQPXz https://codepen.io/GreenSock/pen/BarmbXq And this demo by @akapowl shows how to integrate ScrollTrigger with Locomotive: https://codepen.io/akapowl/pen/wvJroYy Hopefully this helps. Happy Tweening!

Hi guys, a question. Why the text jumping when I scroll with the mouse wheel? Normal behaviour with touchpad!

Hi, Hopefully you are all doing well. I have a problem with locomotive scroll. Here is the url : https://tensixteenbio.wpengine.com/ user: tensixteenbio pass: 610a89b4 My problem is when you click on any dropdown menu, then the new page will be broken means there is lot of white space uderneath the page. anchor links on locomotive scroll don't work as expected or when you click them from the header navigation.They seem to load on page refresh but not first click (content missing and other blank areas). example: https://watch.screencastify.com/v/OIJ2ofC7cOh10E0MYLEo Looking forward to hearing from your kind resposne. Thank you!

Hi, Sorry about the frustration, we all know is hard trying to solve something and not being able to progress on it. Unfortunately locomotive is not a GSAP plugin and we can’t provide a lot of support for it. I’ve never used locomotive so I can’t say what could be the issue you’re having right now. I could be wrong about this, but maybe the problem stems from the way pinning works in ScrollTrigger and the way locomotive works in moving the scroller container. Take a look at this for better understanding: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children On top of that is Saturday night and, while we thrive in giving all our users the best and fastest possible support we do ask for understanding if there is some sort of latency on the weekend. Here is one example of using locomotive with an horizontal section https://codepen.io/kairij/pen/KKoZxVL Also you can find some results looking in google: https://www.google.com/search?q=scrolltrigger+locomotive+horizontal&rlz=1C9BKJA_enCL1045CL1045&oq=scrolltrigger+locomotive+horizontal&aqs=chrome..69i57j69i60j0i546j0i30i546.31131j0j4&hl=en-US&sourceid=chrome-mobile&ie=UTF-8 Hopefully this helps. Happy Tweening!

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, I think this is more related to Locomotive than GSAP. Based on a quick check on the Locomotive docs: https://github.com/locomotivemtl/locomotive-scroll#instance-methods This seems to work: document .querySelector(".totop-fixed") .addEventListener("click", function () { scroller.scrollTo("top"); }); Hopefully this helps Happy Tweening!

Hi, I'm currently testing Locomotive Scroll and Gsap ScrollTrigger, I've read somewhere on the forum that horizontal scroll pin using Locomotive scroll is not that possible (is that correrct?). In fact, each sections are translated, so even though position fixed is set it's still translated, furthermore I think the width of each section is calculated (by Locomotive Scroll) before the "pushing" padding to the section is set. I played with all the pin options (pinType, pinSpacing, pinnedContainer, pinReparent) , without success, I understand in a nutshell what those stuff fixes in general but I haven't been able to make that work properly. So I found a workaround but I was hoping for a "cleaner" way to achieve what I've done. The workaround is to create a wider section (200vw), inside of it a container (100vw), absolute positioned, and translate that container on progress, that work pretty good but I feel that is a hack and I was wondering if I could do it differently. I could use a timeline that I scrub play, but I don't think it's a better solution. The section I'm talking about are the ".section--curtain" one, you need to scroll at the end, that's the 2 fixed sections with curtains opening vertically and horizontally. 1. style="transform: translate(56.3%, 0%) scale(1.1877, 1.18767); translate instead of translate3d? Why? Shouldn't be smoother if translate3d was used? 2. The image is slightly zooming, again on progress but it's not very smooth. on line 160 $('.section--curtain--horizontal').each(function(){ var thisCurtainTop = $(this).find('.curtain--top'); var thisCurtainBottom = $(this).find('.curtain--bottom'); var curtainPin = $(this).find('.curtain-pin'); var thisMedia = $(this).find('.curtain-media'); gsap.to(thisCurtainTop, { yPercent: -100, ease: 'none', scrollTrigger: { trigger: $(this), scroller: '.scroll-wrapper', horizontal: true, scrub: true, //pin: true, //pinType: 'transform', //pinSpacing: 'margin', //pinnedContainer: curtainPin, start: 'left left', end: () => {return '+=' + window.innerWidth + 'px'}, //markers: true, invalidateOnRefresh: true, onUpdate: self => { var progress = self.progress.toFixed(3) * 100; //console.log("progress:", self.progress.toFixed(3) * 100); gsap.set(thisMedia, {xPercent: progress, zPercent: 0}); gsap.to(thisMedia, 1, {scale: 1 + progress / 300}) } } }); gsap.to(thisCurtainBottom, { yPercent: 100, ease: 'none', scrollTrigger: { trigger: $(this), scroller: '.scroll-wrapper', horizontal: true, scrub: true, //pin: true, //pinType: 'transform', //pinSpacing: 'margin', //pinnedContainer: curtainPin, start: 'left left', end: () => {return '+=' + window.innerWidth + 'px'}, //markers: true, invalidateOnRefresh: true } }); }); $('.section--curtain--vertical').each(function(){ var thisCurtainLeft = $(this).find('.curtain--left'); var thisCurtainRight = $(this).find('.curtain--right'); var curtainPin = $(this).find('.curtain-pin'); var curtainS = $(this).find('.curtains'); var thisMedia = $(this).find('.curtain-media'); var thisVid = $(this).find('video')[0]; gsap.to(thisCurtainLeft, { xPercent: -100, ease: 'none', scrollTrigger: { trigger: $(this), scroller: '.scroll-wrapper', horizontal: true, scrub: true, //pin: true, //pinType: 'transform', //pinSpacing: 'margin', //pinnedContainer: curtainPin, start: 'left left', end: () => {return '+=' + window.innerWidth + 'px'}, //markers: true, invalidateOnRefresh: true, onUpdate: self => { var progress = self.progress.toFixed(3) * 100; //console.log("progress:", self.progress.toFixed(3) * 100); gsap.set(thisMedia, {xPercent: progress, zPercent: 0}); gsap.set(curtainS, {xPercent: progress, zPercent: 0}); gsap.to(thisMedia, 1, {scale: 1 + progress / 300}); }, onEnter: () => { thisVid.play(); }, onEnterBack: () => { thisVid.play(); }, onLeave: () => { thisVid.pause(); }, onLeaveBack: () => { thisVid.pause(); }, } }); gsap.to(thisCurtainRight, { xPercent: 100, ease: 'none', scrollTrigger: { trigger: $(this), scroller: '.scroll-wrapper', horizontal: true, scrub: true, //pin: true, //pinType: 'transform', //pinSpacing: 'margin', //pinnedContainer: curtainPin, start: 'left left', end: () => {return '+=' + window.innerWidth + 'px'}, //markers: true, invalidateOnRefresh: true, } }); }); I'm happy if there is some examples, somewhere, hope everything is clear. Thank you

Hello community. So, after numerous searches and head-banging, I can't find the solution. I have an animation triggered by ScrollTrigger. This animation targets phrases. These phrases are inserted into the DOM through a map, triggered either on rendering or when the state changes. The desired effect is that the state, which is an array of strings, changes when the user hovers over one of the icons next to these phrases. Depending on the targeted icon, there can be two, three, or four phrases. The problem is that during onLeave, onEnterBack, or onLeaveBack, only the number of phrases from the first targeted icon is animated. In short, the initial state contains four phrases; if I then hover over an icon containing 3 phrases, then another icon with 2, then one with 3, then one with 4, only 3 phrases are animated in the ScrollTrigger animation. If the sequence is 4 phrases initially, then 2 on hovering over an icon, then 3, then 4, only 2 phrases are animated. I specify that I also use Locomotive Scroll, and due to the ScrollTrigger proxy, I cannot use useEffect with a dependency array in my .js function.

Hey guys, I am currently trying to create a horizontal slider similar to this one: https://codepen.io/GreenSock/pen/JjYPgdp But unfortunately I can't do it. The slides should take up 100% of the 1200px wide container and change as you scroll. Unfortunately, the other posts in the forum didn't help me either, maybe someone here can help me. Thanks in advance.

hello, i am using gsap scroll trigger, and it is working, and i want to combine it with locomotive scroll but its not working. and how to add back to top function?

Hello, I am having an issue with using ScrollTrigger along with Locomotive Scroll. Essentially I am pinning a section and having it reveal an image as you scroll via a div overtop. This all works great when locomotive scroll is disabled. However as soon as it is enabled again the pinSpacing applies the padding below the section instead of overtop for the pinned scroll. Causing the pin to not happen and all the extra padding to be scrollable through below the section. Would love some insight into this from anyone who has worked with these both before. Thanks for your time! gsap.registerPlugin(ScrollTrigger) const FeaturedPost = () => { let tl = gsap.timeline() let featuredPostSection = useRef(null) let image = useRef(null) useEffect(() => { tl.to(image, { scrollTrigger: { trigger: featuredPostSection, pin: true, scrub: true, start: "center center", end: "bottom top", scroller: "#___gatsby", }, scaleY: 0, }) ScrollTrigger.addEventListener("refresh", () => window.scroll.update()) ScrollTrigger.refresh() }, [tl, featuredPostSection, image]) import { useEffect } from "react" import LocomotiveScroll from "locomotive-scroll" import ScrollTrigger from "gsap/ScrollTrigger" import { gsap } from "gsap" gsap.registerPlugin(ScrollTrigger) const scroll = { container: "#___gatsby", options: { smooth: true, smoothMobile: false, getDirection: true, touchMultiplier: 2.5, lerp: 0.08, class: "is-reveal", }, } const Scroll = callbacks => { useEffect(() => { let locomotiveScroll locomotiveScroll = new LocomotiveScroll({ el: document.querySelector(scroll.container), ...scroll.options, }) // Exposing to the global scope for ease of use. locomotiveScroll.update() window.scroll = locomotiveScroll locomotiveScroll.on("scroll", ScrollTrigger.update) locomotiveScroll.on("scroll", func => { // Update `data-direction` with scroll direction. document.documentElement.setAttribute("data-direction", func.direction) }) ScrollTrigger.scrollerProxy("#___gatsby", { scrollTop(value) { return arguments.length ? locomotiveScroll.scrollTo(value, 0, 0) : locomotiveScroll.scroll.instance.scroll.y }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, } }, pinType: document.querySelector("#___gatsby").style.transform ? "transform" : "fixed", }) return () => { if (locomotiveScroll) locomotiveScroll.destroy() } }, [callbacks]) return null } export default Scroll

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.

Hello @lucasdesign Although it is great that you included a demo, unfortunately it is not exactly minimal, which makes it very hard to help. Also you are not including your CSS directly in the codepen, which again makes it a lot harder to help. There is a demo for the usage of locomotive-scroll alongside ScrollTrigger on the docs-page for .scrollerProxy(), which you will need to hook up ScrollTrigger to locomotive-scroll in the first place - you will need to stick to the order of succession in your JS as it is shown in that demo for hooking them up. For it to work with a horizontal-scrolling locomotive-scroll driven page you will also need to adjust the values the scrollerProxy gets and sets to the horizontal equivalents of those you can see in the demo on that page, AND you will need to set horizontal to true on your ScrollTriggers. Some other sidenotes to things I noticed within your demo: you shouldn't be trying to use both ScrollSmoother and locomotive-scroll together - that will produce huge conflicts, as they both will try to smoothen the scroll in a similar way (although they might be working a bit different) locomotive-scroll's data-scroll-section attribute will in the vast majority of cases not work alongside ScrollTrigger, due to how it makes the smooth-scroll work, so I'd advise against using it on your page if you want to use ScrollTrigger since you appear to want to use different setups for different screen-widths, you should have a look at gsap.matchMedia() which should help a lot with that. Here is an older example of mine for a scenario as such to possibly help you get started. Although it works, I can and will not guarantee that it is 100% correct with regard to how to set up locomotive-scroll. Also, especially the horizontal version of locomtive-scroll comes with quite some bugs and quirks that you can not really expect support for here, since locomotive-scroll is not a GreenSock product as Rodrigo already mentioned above. Maybe this will help though. https://codepen.io/akapowl/pen/Vwppzqb/87ad10833ca73c5a1ea59190fae48e32

hello how to make slow scrolling hero section like on this site https://custo.io/ and how disable smooth scroll on mobile viewport