Search the Community

Hey legends. Forgive me if this is a Locomotive issue but I've been trying to pull off a horizontal scroll section but have come across an issue on mobile where as soon as it pins to the section, it becomes REALLY jittery and trying to overflow the section. Sometimes it will forget to pin after a second and readjust. I'm sure it's something i've done with my configuration with Scroll trigger & Locomotive but I can't figure it out. If anyone knows how i can improve this or have come across something similar, i'd appreciate any advice ✌️

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!

@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.

Hi Jack, Thanks for your quick answer. 1. I do know Locomotive Scroll is not a GSAP product, however Locomotive Scroll and Gsap are often used together, furthermore the question was destined to those who have use them together, those who had a similar problem/question, those who would be able to help me. But I promise I will ask the same question on the Locomotive Scroll Github, hope they won't tell me "Gsap Scroll Trigger is not a Locomotive Scroll product, see with Gsap" ;). 2. Here it is! https://codepen.io/romaingranai/pen/ZEJKqOG 3. Ok, thanks, 4. thanks 5. That was my main question, and you answer me by asking me the same question, So I'm reformulating: a. Does anyone had similar issue using Gsap ScrollTrigger and Locomotive Scroll? I. The issue is : struggling with Pinning stuff on smooth horizontal scroll (only a horizontal scroll, not vertical then a section that scroll horizontal). II. I found a workaround but, is there a better way to achieve this? Is there a "Gsap friendly" way to achieve this? (partly answered, thank you) |||. A demo? 6. I'm using Locomotive Scroll because : a. It seems to be a common practice, I've seen multiple examples on codepen and a lot of questions on this forum about using Gsap ScrollTrigger AND Locomotive Scroll, so I conclude that it wasn't a bad idea to do so. b. I already knew more or less how to use Locomotive Scroll, and a little bit how to use Gsap, so why not use both?! c. On the page you sent me docs there is an example using Locomotive Scroll, again my conclusion is : Gsap doc is explaining how to use Locmotive Scroll and Gsap, it must be a good practice to do so, why not give it a try. d. It's super easy to do parallax with Loco scroll (just adding data attribute to html el), perfect for prototyping, even though you can easily achieve the same with gsap, it's easier and faster with Loco (from my point of view). e. I had no idea, until now that Gsap had a "built in" smooth scroll (I'm sure like a lot of people), that functionality is a bit hidden in the doc, at least if you don't know about it, it's hard to find out it exists. I'm pretty sure if they were "promoting" that functionality, you would have way less questions related to Gsap using Locomotive Scroll on this forum. To those who are reading this : You don't need Locomotive Scroll to do smooth scroll, GSAP has is own smooth scroll functionality, doc about it here 7. ? If you are not able to give me support on Gsap and Locomotive Scroll, I understand, but maybe someone else can (see point 1), it's a forum after all, anyone interested can participate. If it's totally forbidden to ask question about GSAP + another library, I'll stop to ask, but I need a confirmation. Furthermore if anybody has a demo (a horizontal demo), of the gsap smoothScroll + (+) pinning stuff, I'll be grateful. Thank you

Hi, Sorry about the troubles. I ran your codepen example in debug mode and I was able to see that things got really weird when doing a hard refresh on the page. Unfortunately Locomotive is not a GSAP product and we don't have the time resources to support it. On top of that I know very little about it so I couldn't tell you what is creating the issue. I tried updating GSAP, ScrollTrigger and Locomotive to their latest versions. Also added some extra configurations and code and didn't change much. It works most of the times but sometimes it breaks: https://codepen.io/GreenSock/pen/qBMJmaX I even tried in this example created by @akapowl and the issue persists: https://cdpn.io/pen/debug/wvJroYy If you scroll down and then do a refresh or hard refresh everything goes wrong. My main suspect is the locomotive configuration, since the scroll bar also gets out of place and some as this doesn't happen on their main website: https://locomotivemtl.github.io/locomotive-scroll/ You should create an issue on their repo and look on stackoverflow for some answers. GSAP has it's own smooth scroll solution ScrollSmoother that works and integrates ScrollTrigger effortlessly, so I suggest you take a look at it: https://greensock.com/scrollsmoother/ Sorry I can't be of more assistance. Happy Tweening!

Hi I'm trying to do horizontal scrolling whilst use locomotive scroll to slow down the scrolling also I notice there is an issue when using a fixed header the logo moves up slightly once they have reached the bottom the scroll. How do you use locomotive with gasp going horizontally every time I think I'm getting close I end up scrolling diagonally down and to the right rather then just scrolling sideways. I have seen a-lot on here going vertically but can't find any horizontal example. I also wanted to slow it down presumably I can with locomotive? Any ideas would be greatly appreciated.

Hi there, I've been trying to implement Locomtoive Scroll with GSAP ScrollTrigger. I've followed these instructions: https://www.snorkl.tv/scrolltrigger-smooth-scroll/ and the documentation on https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() but I get this Uncaught ReferenceError: locoScroll is not defined error is there something I've been seeing over the head? Here's my code: 'use strict'; import LocomotiveScroll from 'locomotive-scroll'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const scroll = new LocomotiveScroll({ el: document.querySelector('.container'), smooth: true, multiplier: 1, }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on('scroll', ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy('.container', { 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, }; }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: document.querySelector('.container').style.transform ? 'transform' : 'fixed', }); gsap.to('.info-title', { x: 300, duration: 2, scrollTrigger: { trigger: '.info', markers: true, scrub: true, scroller: '.container', }, }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener('refresh', () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh();

GSAP has a bigger learning curve than locomotive. Locomotive provides a few out-of-the-box effects, whereas GSAP is a whole animation system that allows you to do anything you can think of. You'll need to dig into tweens, timelines and the position parameter to start. Here's an idea of how you can acheive a text effect like locomotive https://codepen.io/GreenSock/pen/BaGBdQb But if I were you I'd start here Good luck!

Hey everyone, I'm building this site: https://taylorandmoor.com I'm using locomotive scroll for smooth scrolling and scrolltrigger for various animations. One animation is to show/hide the main navigation header on scroll. As you can see this works on the website in its current state however I'd like to implement it without using locomotive data-scroll-sections. If you look at the codepen you'll see that the animation gets triggered on scroll down but not on way up until it gets back to the top. The code I'm using for this function: function initShowHideHeader() { const header = select('.js-site-header'); const showHeaderAnim = gsap.from(header, { yPercent: -100, paused: true, duration: 0.3 }).progress(1); ScrollTrigger.create({ scroller: scroller, start: 'top top', end: 99999, onUpdate: (self) => { self.direction === -1 ? showHeaderAnim.play() : showHeaderAnim.reverse(); console.log(self.direction); } }); } I'm guessing the onUpdate function is not working properly which is strange because when I console log self.direction -1 is logged on scroll up? If anybody has anhy insight into implementing this sort of this that would be great! Many thanks

Hey everyone, I am trying to recreate this codepen. But I have a horizontal scrolling website. So its kinda tricky... This is what I have so far gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger); const scrollContainer = document.querySelector('.data-scroll-container'); const locoScroll = new LocomotiveScroll({ el: scrollContainer, direction: 'horizontal', smooth: true, /*lerp: 0.1,*/ /*touchMultiplier: 2.54,*/ reloadOnContextChange: true, tablet: { smooth: true, direction: 'horizontal', gestureDirection: 'both', }, smartphone: { smooth: true, direction: 'vertical', } }); window.onresize = function(){ location.reload(); } locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, scrollLeft(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; }, // 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}; }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: scrollContainer.style.transform ? "transform" : "fixed" }); window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetHeight ; let horizontalScrollLength = pinWrapWidth - window.innerHeight; gsap.to(".pin-wrap", { scrollTrigger: { scroller: scrollContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", onEnter:() => { console.log("Enter") }, pin: true, //horizontal: true, // anticipatePin: 1, start: "left center", end: pinWrapWidth }, /*y: -horizontalScrollLength, ease: "none"*/ }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); }); I cant seem to find out why its not working. The structure of my DOM is similiar as in the codepen. Special is that I use Elementor as my base, but it should not have any affect on this. As attribute I do have data-section in each section, as its not working else... Hope someone can help me!!! ❤️ Cheers zoruak

Hey guys, I wonder if you could give me some advice again I am using the Locomotive smooth scroll script (https://locomotivemtl.github.io/locomotive-scroll/), which gives my projects a beautiful buttery scroll effect but I need some help with playing GSAP animations along with this when the target element comes into view. You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed. Maybe something to keep looking for changes on the elements? Any ideas? Huge thanks as always! Andy

Hello, I'm new to GSAP but i was able to put some parallax and some pinned section with horizontal scroll working with ScrollTrigger, but now i wanted to add Locomotive Scroll for smooth scroll and other text animations but GSAP doesnt seem to like it. After adding Locomotive scroll and initializing it, all animations done with ScrollTrigger stopped working. Cant figure out the reason why. I saw this in the scrollerProxy info tried to apply it to my case but with no success const locoScroll = new LocomotiveScroll({ el: document.querySelector(".masterpage"), //my main container (data-scroll-container) smooth: true, }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(".masterpage", { 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: "transform" }); Anyone could help me? Thank you in advance

Hi, so thanks for early reply. I forgot to share the link. here is the link: https://stackblitz.com/edit/react-2nh63l?file=src%2FApp.js When I use your template above, it work perfectly, the quotes were pinned as expected. But when I apply with locomotive scroll, it not working :((.

Hey @GreenSock, just saw your reply! I actually ended up dropping Locomotive Scroll for this current project I'm working on, I found that GSAP and its plugins were better suited for the specific project's use case, though Loco has great smoothing. GSAP's performance was better as well, since the smoothing wasn't as buttery, although I ended up finding GSAP's smoothing plugins, they may work just as good and are probably faster. To those that may end up working on a project that can't switch from Locomotive Scroll, I dug up my solution from github. I should have made a StackBlitz at the time to make things more obvious, but either way I was able to resolve the problem with the following unloading method: unload() { console.log("Kill", this.horizontal_scroll); // check locomotive scroll instance variable binding this.horizontal_scroll.destroy(); // destroy instance of locomotive scroll ScrollTrigger.removeEventListener("refresh", this.horizontal_scroll.update()); // remove listener, note this triggers a console.log error, but it works ScrollTrigger.scrollerProxy(null); // <- this will get rid of the current scrollerProxy ScrollTrigger.clearScrollMemory(); this.horizontal_scroll = null; // destroys locomotive scroll instance variable binding ScrollTrigger.getAll().forEach(t => t.kill()); } There's many ways to use it, but I used it in the same component as I declared the locomotive scroll instance. You call it right before changing routes/destroying the component that holds your locomotive scroll instance.

I'm new to GreenSock and I encountered a rather confusing error when using scroll triggers with reactjs. Same JSX code but I get two different results on Codeandbox and on vscode, I'm not sure if this is a bug on my dev environment so here is the video I recorded the error: https://streamable.com/m0kvca here is my code on Codeandbox, everything is very similar and there is no difference but the result is different: :Codeandbox link here is my code in app.js file import React, { useEffect, useState, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function App() { const menuRef = useRef(null); const leftRef = useRef(null); useEffect(() => { (async () => { const LocomotiveScroll = (await import("locomotive-scroll")).default; const locomotiveScroll = new LocomotiveScroll(); })(); }, []); useEffect(() => { const menuElement = menuRef.current; const leftElement = leftRef.current; if (menuElement && leftElement) { ScrollTrigger.create({ trigger: menuElement, start: "top top", end: "bottom bottom", pin: leftElement, markers: true, }); ScrollTrigger.refresh(); } }, []); return ( <div> <div style={{ height: "50vh" }}></div> <div> <div ref={menuRef} style={{ display: "flex", border: "2px", borderStyle: "solid", gap: "20px", }} > <div ref={leftRef} style={{ width: "30%", height: "50vh", backgroundColor: "#ff0" }} > <div style={{ padding: "20px" }}>1</div> <div style={{ padding: "20px" }}>2</div> <div style={{ padding: "20px" }}>3</div> <div style={{ padding: "20px" }}>4</div> <div style={{ padding: "20px" }}>5</div> </div> <div style={{ width: "70%" }}> <div style={{ height: "50vh", background: "#ddd" }}></div> <div style={{ height: "50vh", background: "#ff0" }}></div> <div style={{ height: "50vh", background: "#0ff" }}></div> <div style={{ height: "50vh", background: "#0f0" }}></div> <div style={{ height: "50vh", background: "#333" }}></div> </div> </div> </div> <div style={{ height: "50vh", background: "#333" }}>1</div> <div style={{ height: "50vh", background: "#555" }}>2</div> <div style={{ height: "50vh", background: "#777" }}>3</div> <div style={{ height: "50vh", background: "#999" }}>4</div> </div> ); } export default App; làm ơn giúp tôi

Hi, so I've been trying to work on this all day to no avail. So what i'd like to do is simplify this codepen. It's exactly what I need but the reversed scroll overcomplicates it for me. I tried to remove it, and it broke. Thank you for any help you can give me.

Hey, I have a problematic with LocomotiveScroll & GSAP, I would like each section to show on top of each other while scrolling basically like this https://codepen.io/JackiePaper/pen/mdPvGPK?editors=1010 It's working well with the ScrollTrigger.create(xxx) if I remove `data-scroll-section` on each section with LocomotiveScroll (because this one manage the transform of the section). A website have done it pretty well there : https://clar.dev/ I tried to reverse engineer this, but could not find for now how they did this. If you have any idea on this problematic

Hi everyone, I'm having an issue when trying to pin an element using scrolltrigger with locomotive scroll. When I try to pin an element the width of the scroll proxy seems to get changed (or a scrollbar adrea added, I can't figure out which). You can see an example here: https://staging.taylorandmoor.com/our-collections/ I've also attached a screenshot. On all other pages the scroll container (.scroll-container) is 100vw. I can't recreate the issue in my basic codepen either? I've set pinSpacing to false but is there anything else that could be causing this? Many thanks in advance for any help

If I recall correctly, ScrollTrigger's snapping never worked with locomotive-scroll due to locomotive-scroll's method to 'set' its scroll-position - and that doesn't seem to have changed even with the latest version(s) of locomotive-scroll, although they changed that method a bit. Just another good reason for ScrollSmoother. [It works fine in the preview, since locomotive-scroll reverts back to native browser-scrolling at certain window widths, but once the smooth-scrolling is active (on wider windows), it won't work anymore] https://codepen.io/akapowl/pen/mdjNeqo

Hi there, this looks like an issue between locomotive scroll and GSAP We have our own smooth scroll plugin ScrollSmoother - which we recommend, it avoids compatibility mismatches like this. Your code is working a ok if we remove locomotive. https://codepen.io/GreenSock/pen/ExpqjNj?editors=0010 Maybe you could reach out to the folks that at locomotive for help? https://github.com/locomotivemtl/locomotive-scroll

Hi there, I am trying to implement a draggable horizontal scrolling section with, but the rest of the page should remain vertical scroll. Can't figure out where it goes wrong. The yellow section is supposed to be horizontal with draggable option

Hi guys, I'm trying to implement Locomotive smooth scroll and GSAP library to my website. The main thing that I'm struggling with is that sometimes when you reload the page it can randomly (not every time) cut the website at any section. I made images load fast (rather than lazy loads), and also set to each section a custom attribute with data-scroll-section="1" to helps it understand that the code should work on each section. It helps but still this issue appears. Don't know what to do else and would much appreciate the help! Here is the CSS and Javascript that I use in my project: https://codepen.io/stacies/pen/PopBXrm

Hey, got another little problem. You will find it on the codepen, I want to have a horizontal scrolling section (you will find it in pink in the codepen), but when the scroll is on the pink section, the little red boxes start to translate to fake the horizontal scrolling but the pinned pink section does not stop. If I pin the horizontal scrolling to the pin of the section it does strange thing. Is there a thing to make both works ? So when the scroll is on the pink section, it scroll horizontally and then the pink section will stay there and wait for the user to scroll completely horizontally. Thanks you again GSAP for your help ❤️

Hi, I just forked the ScrollTrigger with locomotive scroll codepen example and made some small changes to the javascript code. Basically, I put the code in a class and instead of defining a const locoScroll, I used the this keyword and this.locoScroll. With the class definition and original const declaration, everything works fine, but the code breaks when I use this.locoScroll instead. I realize this might not be related to ScrollTrigger, but since the error is happening inside the ScrollTrigger.scrollerProxy callback, I'd thought I could ask here. Thanks for any help in advance.

After the initial animations (fade up with autoAlpha and y), if you begin to scroll, Locomotive Scroll's parallax takes over but the position of the trees jump down. I'm assuming this is because when Locomotive initializes, it remembers the position of those elements, and then GSAP adjusts them afterward. Then when Locomotive takes back over, they snap back to the position Locomotive remembers. Is there a simple way to fix this? Thanks in advance. Edit: Looks like the embed window for Codepen isn't showing it. You need to click in to the example.