Search the Community

Hi guys, I have added smooth scrolling within my application using locomotive. I have added it on top of my App component. It is working good and is not messing up with my animations that use scrolltrigger within my main App component however my animations that uses scrolltrigger within my children components don't work anymore. My triggers markers disappeared. In my main component I have added: const locoScroll = new LocomotiveScroll({ el: smoothScroll, smooth: true, }); locoScroll.on("scroll", ScrollTrigger.update); I am sure it is something dumb but what is the norm for working with both (gsap and locomotive) within React? Thank you!

Yeah, I also think, smooth-scrolling is what really makes effects like these shine. And in this scenario, since it is at the bottom of the page, the easing on the edges does its part, too. Just wanted to make sure, that I am not advertising for smooth-scrolling here, though. Be aware, that there are always downsides to smooth-scrolling, no matter which approach you choose to achieve it. And depending on which approach you choose, the pitfalls you might encounter, may vary. Nonetheless; since it takes an extra plugin for smooth-scrollbar to run with easing on the edges, here is another demo with locomotive-scroll instead, which appears to have the edge-easing included. This still uses v3.6.1 of locomotive-scroll though, since the latest versions seem to have some problems sometimes, when grabbing the scrollbar-thumb to move up and down the page. https://codepen.io/akapowl/pen/8fbf86569ba2792c08939838608a8003 Happy Scrolling. Edit: '...the latest versions seem to have some problems sometimes, when grabbing the scrollbar to move up and down the page.' Now that I mentioned that, I noticed some of that beheviour in the demo I just posted, too, depending on where you grab the scrollbar-thumb. Just double checked on pages, that use locomotive-scroll but not ScrollTrigger, and they show the same behaviour. So this appears to not be related to the combination with ScrollTrigger whatsoever, but solely to locomotive-scroll itself.

Hi Jack I am using locomotive for some time and did not face any problem like yours. All things scrolling, scrubbing and pinning works perfectly but a demo would be good thing to explore the problem. Regards, Shehzad Asif

Hi Zach, This is just an update for locomotive scroll working with gsap specifically for touch screen and pinning. If you find it valuable pls update it on scroller proxy page. Before update: https://codepen.io/GreenSock/pen/1dc38ca14811bc76e25c4b8c686b653d After update: https://codepen.io/ShehzadAsif/pen/dypyRoQ To activate smooth on touch screen: This code is required in the locomotive object // for tablet smooth tablet: { smooth: true } // for mobile smartphone: { smooth: true } Following line is no more required to work pinning on touch screen /* pinType: document.querySelector(".smooth-scroll").style.transform ? "transform" : "fixed"*/ After the update of 4.0.4 recently, now scroll is much smoother then before. Why not have a look at both demos above and feel the difference. Regards, Shehzad Asif

Hi Guys! I have been struggling for a while on this animation, I have made many attempts but without success. Now i need your help! I have a scroll slider and need to change the background image based on active years tiles, like this reference but in horizontal mode... Anyone can help me? I need to set active class on years tile and fade in / out the img in slider-years Thanks in advance!

Hey @dhaliwallambi I got your locomotive-scroll working in your demo by setting overflow: hidden to your .data-scroll-container via CSS. Your scrollTriggers on the other hand are not working in the demo, because you are not setting that div as the scroller. I can not tell you anything on the .batch method you want to use - and since I don't see anything in that direction in your code, and you actually only have those 5 images, I think what you maybe could want to do instead, is loop over those images, and create a ScrollTrigger for each of those individually. Which would then look something like this https://codepen.io/akapowl/pen/f4805584f20a464246d9eb0a953ed3e1 What I did there was first set up an array with all your items with the class .z-out let images = gsap.utils.toArray('.z-out') and then target each of them seperately with an individual ScrollTrigger and Timeline in a .forEach loop. Hope that makes sense to you and helps get a slightly better understanding. Cheers, Paul

In my Portfolio, I'm using the ScrollTrigger with Locomotive Scroll, (The code is below). I'm a newbie in JS. So, When I try to use batch method, locomotive scroll and everything with scrolltrigger breaks. It would be great if you can write some syntax for me (Just the batch method). Codepen: https://codepen.io/SahiljeetSingh/pen/qBNedNK (I don't know why it isn't working on codepen, but this syntax (without batch method) works on my computer). gsap.registerPlugin(ScrollTrigger); // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll const locoScroll = new LocomotiveScroll({ el: document.querySelector(".data-scroll-container"), smooth: true, smoothMobile: true }); // 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 ".data-scroll-container" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".data-scroll-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(".data-scroll-container").style.transform ? "transform" : "fixed" }); let exptl = gsap.timeline({ scrollTrigger:{ trigger: ".z-out", start: "top 85%", end: "top 5%", scrub: 2, markers: true } }); exptl.from(".z-out", { x: 100, opacity: 0, duration: 1 }); // 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();

Thank you so much! I figured since locomotive sets html and body to overflow: hidden when you activate smooth scroll I wouldn't have to, but setting overflow: hidden in my own css helped. I guess it manages to paint with the scrollbar just before the classes get applied that sets hidden on html and body.

What specifically isn't working? The smooth scrolling? Are you aware of Locomotive's smoothMobile option?

Hi Zack sorry I have another question, After I finished working on this same project that is both using scrollTrigger and Locomotive-scroll, Locomotive doesn't animate anything on mobile devices, is there a solution with scrollTrigger instead? As you will see in my pen that I integrated both libraries as suggest by green sock. I know this is a locomotive-scroll issue but maybe you know anyone who had the same problem ?

I am using ScrollTrigger together with Locomotive for smooth scrolling. I liked the look of the Locomotive scrollbar when using just Locomotive but now, for some reason, ScrollTrigger adds an overflow-y: scroll to the scroll container making a standard browser scroll-bar show at all times and underneath the Locomotive scroll-bar when it is visible. I saw that it's the same in the codepen example shown on the ScrollTrigger.scrollerProxy() documentation page. Is there any way to get rid of the browser scrollbar in a good way when using ScrollTrigger and Locomotive? I tried setting overflow: hidden !important; on the element in my css but that results in the scrollbar showing very briefly before disappearing (like a flicker).

Hi Gsap, I hope you're doing well. I'm trying to make this section scroll slower just as locomotive scroll does. to control the scrolling speed I mean. I have tried few things like ease or duration,. Yeah i'm a total noob I know, your help will be greatly appreciated. Thanks Samsky Still learning Vanilla js total newbie.

Hi guys, this looks great and is almost exactly what I'm after for a project of my own. I'm very new to ScrollTrigger and I wondered if someone could help me out with removing Locomotive Scroll from Camerons example? It's really just the pinning and horizontal scrolling I'm after. Any other examples I've found rely on full width sections, I like how this approach allows for content of any width and calculates the scrolling automatically. Thank you!

Hi @zloycoder Thank you for your hard work putting this together. I have a question, how do I change the scroll to locomotive scroll and still make it work? I've switched it out, but I just can't get it to work. Please could you have a look at it for me? Any pointers will be such a help. Thank you https://codepen.io/NewbieRuby/pen/XWKQQmM

Yeah, I saw that line once, when playing with a locomotive-scroll demo, but since i never really use that smooth-scrolling-library myself, I don't always remember all the bells and whistles that come with it (or everything, that the real pros at Greensock here have already taken into account) - otherwise I would have linked you to it in the first place. I am glad though, the solution to your issue was that easy in the end. Happy smooth-scrolling

I ended up adding the following line based off this GSAP example: Locomotive Scroll x ScrollTrigger and it seemed to fix it for me for both mobile & desktop ?Thanks for the pro tips Paul. pinType: document.querySelector(".container").style.transform ? "transform" : "fixed"

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 ✌️

Hy There If anyone already implemented or can implement the above mentioned smooth scroll library with scrolltrigger. Pls share here. I thinks it is the best library for smooth scroll purpose as it provides the perfect balance between regular smooth scroll like asscroll and locomotive. Demo section of the library can explain better what I am saying. Or Zach as you are the master of GSAP. It would be awesome if you can do this from your busy schedule. I am also working on it but got stuck with pinning not working and animation triggers a bit before the target viewport. Regards, Shehzad Asif

Hy All, As Zach guided towards applying css property "will-change:transform". And I did the same for locomotive while set the lerp between 0.07-0.08 (you can play with lerp value to your liking mine is 0.08). It will remove the flickering of elements up-to like you will barely feel it. Hope it will be helpful. Point to be noted here is if you use "data-scroll-section" data-attribute for each section on the page then above solution will not work. This solution works on "locomotive and smooth-scrollbar (1st & 2nd demo on scroller proxy page). It's not working for asscroll but for most smooth scroll libraries it will work as per my testing. Happy smooth scrolling. Regards, Shehzad Asif

@akapowl. Thanks for the video. @zach. I tried asscroll, locomotive and virtual scroll or even javascript and gsap smooth scroll but all with same issue. There must be a solution to this. I saw some websites with smooth scroll and without flickering even on chromium based browsers(alitwotimes website is a great example). Wondering how they controlled it?

The reason this combination is not working in your example, is because locomotive-scroll uses a whole different approach to moving the content/window up and down, than the native scroll-behaviour of browsers, thus, ScrollTrigger does not get any helpful information on what to do when, when using a smooth-scrolling library like locomotive-scroll. Since v3.4.0 for these cases there is the very helpful scrollerProxy() though, that helps solving that issue for you. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy That page linked to above has an example on how to hook up locomotive-scroll and ScrollTrigger: https://codepen.io/GreenSock/pen/1dc38ca14811bc76e25c4b8c686b653d

I managed to make, as it seems to me, quite a good image parallax together with a smooth Locomotive scroll: https://codepen.io/MarkTan/pen/eYzVGjY?editors=0110 If someone has optimization tips, I would be happy to hear them ?

I would like to enable parallax for my images and have smooth scrolling using Locomotive. Please tell me what is wrong with my example and how can I add a parallax there? ... P.S. Open the full screen version to display the images correctly.

Hi. I apologize in advance for asking a question not quite on the topic of GSAP. This topic maybe of interest to many who use smooth scrolling. Before writing here, I tried to solve the problem on github, but without success. Nobody answered me within a month. my question is very simple: I use smoothScrollbar (https://idiotwu.github.io/smooth-scrollbar/) and I want to implement anchor links, but I have not found a solution. However, I was able to implement anchor links with another library: locomotive scroll. I just used this code const slider= document.querySelector('#main-2'); $('.link:nth-child(2)').on('click', function() { locoScroll.scrollTo(slider) }); however, the same operation was not useful for smoothscrollbar. In my montage, everything breaks down. If someone has an example on codepen please share it.

Hallo Everybody! im learning gsap with nuxt and now im trying to do locomotivscroll with scroll triger... and when i do everything like you above... i get this locomotive-scroll.esm.js?fbd6:1661 Uncaught TypeError: Cannot read property 'match' of undefined at getTranslate (locomotive-scroll.esm.js?fbd6:1661) at eval (locomotive-scroll.esm.js?fbd6:2296) at Array.forEach (<anonymous>) at _default.addSections (locomotive-scroll.esm.js?fbd6:2295) at _default.update (locomotive-scroll.esm.js?fbd6:2509) at _default.resize (locomotive-scroll.esm.js?fbd6:2054) at eval (locomotive-scroll.esm.js?fbd6:251) so i thought... it must be plugin? i checked my version and it says... 2.1.3 locomotiv expects higher so i installed gsap from npm. this is what i see in dependencies( see pic) and my question is... can it be the reason why it doesnt work? thx for reading!!