Search the Community

Thanks @akapowl, my distraction, I often used the scroll locomotive but not smooth-scrollbar ....I haven't read the documentation well.

Thank you again Cassie, but no, I already have horizontal scroll from locomotive scroll, I need pin section to be vertical, but when I change properties and direction it's started to scroll diagonaly.

Thank you Cassie for your reply! Okay, maybe I didn't explain it right what I want. This is what I want, but with locomotive scroll horizontal.

I am not the most confident with ScrollTrigger's .matchMedia yet, but setting up media-queries in your CSS alongside using ScrollTrigger.saveStyles() makes it work properly for me. Could that be an option for you? https://codepen.io/akapowl/pen/a5d2594660d469cde494292802848e46 On a sidenote: You should probably set your [data-scroll-container] to overflow-hidden. If e.g. you have a heading with a margin-top set on top of your page like that, it will push down your [data-scroll-container] which could at least lead to problems with your layout later on. I noticed some quirky behaviour on resizes with .matchMedia() and locomotive-scroll here (tried with smooth-scrollbar, too, and it's similar there, so I guess it's a smooth-scrolling thing) - not sure if it's due to some faulty setup with the .scrollerProxy in combination with .matchMedia() here, or something else, though. If there are only ScrollTriggers being created for one matching media-query like in this example - ScrollTriggers only for 1025px and above but nowhere else - the following happens. When you start out on a width that has ScrollTriggers and scroll down, then change the browser to a size where there are no ScrollTriggers set for and scroll up again - then, when you resize the brwoser back to a size where there are ScrollTriggers, the page will automatically scroll down to that last point it was at when you left the page on the size with ScrollTriggers defined. Well, since that sounds very complicated, here is a screen-recording As soon as you add any ScrollTrigger to the 'all'-query, that behaviour goes away - even if it's just something like ... all: function () { ScrollTrigger.create({ trigger: '.imgs-container', scroller: "[data-scroll-container]" }) } So I am very likely missing something here. Hope @GreenSock could shed some light on this.

Ooooh yes, good catch! ...now that you pointed that out, I realized there actually is one major mistake in my demo! It only works (although flawed) because that pinning ScrollTrigger is being created after that loop for all the ScrollTriggers in the green section. That obviously is not how you should do it, I appologize (and I will correct those demos - edit: done). The way you actually want to do it is ideally first create that pinning ScrollTrigger (so all other ScrollTriggers will have knowledge about the pin-spacer being applied - if for some reason you can't create it first you can set a refreshPriority to it with a number above 0 respectively above the refreshPriority of the other non-pinning ScrollTriggers). This first ScrollTrigger should have the element you are pinning as the trigger (.pin-up). To be able to calculate the starts of the other ScrollTriggers then, you'd need a wrapper (.wrapper) around that pinning element (.pin-up) that keeps scrolling with the flow and that you can thus use as a basis for those calculations. So here is the demo corrected and with locomotive-scroll included for your convenience Sorry for the misleading again. Hope this works better for you now. https://codepen.io/akapowl/pen/cf26dbe2a217c676412650fb066061b2

Hey @monolith - welcome to the forums. I personally have no experience with React, so I can't be much of help here myself. But in the meantime until somebody comes along, who knows his way around React, have you seen this thread? It contains a working codesandbox-example by the OP, using locomotive-scroll with ScrollTrigger and React. Maybe that can help you get set up? https://codesandbox.io/s/beautiful-meadow-zlynm?fontsize=14&hidenavigation=1&theme=dark&file=/src/useLocoScroll.js

Hi, I love this ScrollTrigger Locomotive implementation. I used it in my React project, there were a few gotchas, but it works nicely now. The only thing that is lacking right now is the way these two lines are called: ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); I define everything in a useEffect, then put those in the return: const ScrollTriggerProxy = () => { const { scroll } = useLocomotiveScroll() useEffect(() => { if (scroll) { const element = scroll?.el scroll.on('scroll', ScrollTrigger.update) ScrollTrigger.scrollerProxy(element, { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, } }, pinType: element.style.transform ? 'transform' : 'fixed', }) } return () => { ScrollTrigger.addEventListener('refresh', () => scroll?.update()) ScrollTrigger.refresh() } }, [scroll]) return null } I don't see any problem, but I doubt it works as intended. Any pointers or ideas? Thanks

All the relevant info available in the loco dos in data-attributes section. For your convenience the syntax is as following for pin effect: // for example you want to pin div, give an id to the parent of div, bcs loco pin the elements through ID <section id="sticky"> <div data-scroll data-scroll-sticky data-scroll-target="it will trigger the pin effect/ #sticky" data-scroll-offset="it will decide the pin element position like top or bottom etc"></div> </section> Also check this link: "https://locomotivemtl.github.io/locomotive-scroll/" Regards, Shehzad Asif

Well, now I see that removing the data-scroll-section is what actually makes your initial example work, too - didn't even notice the first time. The data-scroll-section option that comes with locomotive-scroll won't work with ScrollTrigger's pinning because of how it will transform the sections with that attribute instead of the whole scroll-container's complete content - a little more elaborated guess on the why is to be found in this thread:

I am using Gatsby JS and initializing smooth-scrollbar within a layout component and I've also configured the scroller proxy. Within a child component, I'm trying to setup an animation using scroll trigger but I'm not sure how to configure this. Also, the config does work after HMR fires but not after page refresh. I removed most of the markup from the page as I know the animation works - I think the issue is with syncing the scrollers. layout.js: import React, { useRef, useEffect } from "react" import Navbar from "./navbar" import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Scrollbar from 'smooth-scrollbar' // import "../styles/locomotive-scroll.css" const Layout = ({ children, location }) => { const scrollerRef = useRef() useEffect(() => { gsap.registerPlugin(ScrollTrigger) const scroller = scrollerRef.current const bodyScrollBar = Scrollbar.init(scrollerRef.current, { damping: 0.1, delegateTo: document, alwaysShowTracks: true }) window.bodyScrollBar = bodyScrollBar ScrollTrigger.scrollerProxy(scrollerRef.current, { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value } return bodyScrollBar.scrollTop } }) window.scroller = scrollerRef.current bodyScrollBar.addListener(ScrollTrigger.update) ScrollTrigger.defaults({ scroller: scroller }) // ScrollTrigger.refresh() return () => { if (bodyScrollBar) bodyScrollBar.destroy() bodyScrollBar.removeListener(ScrollTrigger.update) } }, [location]) return ( <div className="global-wrapper scroller h-screen overflow-hidden" ref={scrollerRef}> <header className="global-header animate__animated animate__fadeIn"> <Navbar /> </header> <main>{children}</main> <footer> {/* © {new Date().getFullYear()}, Built with */} {` `} {/* <a href="https://www.gatsbyjs.com">Gatsby</a> */} </footer> </div> ) } export default Layout index.js: import React, { useEffect, useRef } from "react" import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; function Index() { const outroRef = useRef() const outroContentRef = useRef() useEffect(() => { gsap.registerPlugin(ScrollTrigger) gsap.fromTo(outroContentRef.current, { yPercent: "-50" }, { yPercent: "0", scrollTrigger: { scroller: window.scroller, trigger: outroRef.current, end: "bottom bottom", scrub: true, markers: true }, ease: "none" }) }, []); return ( <> {/* Page content */} </> ) } export default Index

I can not tell you what callback to use either since I have no experience whatsoever with that jQuery-accordion. But using jquery's .animate() for the smooth-auto-scrolling will also not work for you here; just like GSAP's scrollTo - it just shifts your page so it will 'break' for loco-scroll. Again: you will have to use locomotive-scroll's own .scrollTo() function. You could try this instead of your timeout-function - but it is obviously a bit wonky when the accordion collapses first and then the other pane opens. So finding the right callback(s) will probably be the way to go for this. Good luck setTimeout(() => { scroller.update() scroller.scrollTo( this.offsetTop ) }, 700)

I tried out the example and of course works great, BUT when I add the locomotive scroll library it breaks. I'm obviously missing something in my code... If you take out all the scroll library in this codepen you'll see that it's working fine. It seems like the #container is somehow preventing the smooth-scroll div from interacting. https://codepen.io/Jase2018/pen/MWJKjPe

Hi @akapowl, thank you so much for helping me again, i was actually aware of const locoScroll = new LocomotiveScroll({ el: document.querySelector(".smooth"), smooth: true, //smoothMobile: true smartphone: { smooth: true }, tablet: { smooth: true }, }); and i tried to use something similar, when i was first trying to implement locomotive-scroll, but didn't have any luck. Thats probably because my setup wasn't correct back then, and they recently updated the library. I've been overwhelmed by all the documentation that i was going through for this project, and it didn't occur to me to try it again after updating the code. Now everything works seamlessly, and how they should. Thank you again for taking your time to help me solve this issue & happy tweening! ?

Judging from a quick glance at the 'documentation' for locomotive-scroll, the option smoothMobile: true doesn't exist (anymore?). If you want your loco-scroll to be active on mobile, you would now have to use the tablet/smartphone options as it seems const locoScroll = new LocomotiveScroll({ el: document.querySelector(".smooth"), smooth: true, //smoothMobile: true smartphone: { smooth: true }, tablet: { smooth: true }, }); This should make things work again on mobile. https://codepen.io/akapowl/pen/b08836033d67112fcdd9555d46f75331 If you wanted loco-scroll to not be active on mobile devices you would probably have to include some logic that checks for mobile and sets things like the scrollerProxy and the scrolling-to-an-id accordingly to that condition - but this is really way out of scope for these forums. You might find some answers in relation to that in loco-scroll's issues section on github though.

Hi @akapowl, thank you so much for your reply, and help. That's exactly what i was trying to do! Your code, and removing the data-scroll attributes from the img fixed the issue. The only thing i've realized is that after updating the code, everything works perfectly on desktop, but this time website and the menu doesn't function well on mobile. GSAP tween is not triggering, and when you click on any of the menu links, you get stuck like before. In the console i can see that it logs the target when you click on the menu item, but it doesn't go anywhere. I've tried adding: pinType: document.querySelector(".smooth").style.transform ? "transform" : "fixed" and removing all the locomotive-scroll attributes such as "data-scroll data-scroll-speed="-1" but no luck. I know this topic isn't really related to GSAP, so i wont be bothering anyone about this new issue, but thank you again for your help ?.

Currently you're not using the scroller property of ScrollTrigger that makes the ScrollTrigger use the scroller specified. So your scrollerProxy is not doing anything helpful. Either use the scroller property to specify the scroller and remove the ScrollTrigger.update() call from the smooth scroller callback (like this) or remove the .scrollerProxy() completely. The in-between that you have makes no sense. As for the pinning question ultimately the responsibility is on you to get it working. We don't promise to support every single third party library. My guess is that you will need to do something like what we did with Locomotive Scroll in handling the pinning in a special way. But we don't really have the resources to investigate this for you for free.

Hey @Timobee - welcome to the forums. Looks like you've already got everything correct in your demo for the ScrollerProxy. To get it working with Locomotive scroll in the first place though, you'd have to set the scroller on your ScrollTrigger. Then simply just add horizontal: true to it and you should be good to go. You can now even use left and right as values for your start and end. These are the additions/changes I made on your ScrollTrigger - the changes on start and end (and the added toggleActions) are just for demonstration purposes; you can of course change them to whatever you like. scroller: '.smoothScroll', horizontal: true, start: "left center", end: "left left", https://codepen.io/akapowl/pen/d33d2a26fdb45b3efda5fe55ba1ca8b3 Happy scroll-triggering

Hey @pietM That's actually hard to tell without seeing the full code, as Zach already mentioned - in your codepen demo you don't have any killing/destroying going on. Have you tried a method similar to what is described in this thread (which is for barba - but I guess the core concept would apply for swup, too) ? I don't think a simple re-initiation as you described in your original post will be enough, you will also have to make sure to kill the old ScrollTriggers - and it would probably also be best to destroy the old locomotive-scroll instance before creating a new one. I'll also link to the recently added section in the most common ScrollTrigger mistakes article, so any future readers who stumble upon this and don't know why that is neccessary can get a quick explenation on that.

Hey youcci and welcome to the GreenSock forums. You don't need ScrollTrigger to recreate that sort of effect with Locomotive Scroll... But I showed an example of how you could do so in this pen (if you wanted to add additional other scroll based effects - the commented out section): https://codepen.io/GreenSock/pen/eYBerwQ?editors=1010

Hey existentialdread. Thanks for making a demo and for creating a new thread. For anything other than really basic things, this lightweight smooth scrolling approach probably isn't the way to go. If you need smooth scrolling I recommend using a more full smooth scrolling library. To use it with ScrollTrigger you should make use of .scrollerProxy(). We provide a few demos that use different smooth scrolling libraries in the scrollerProxy docs. Here's an example with your code using Locomotive Scroll: https://codepen.io/GreenSock/pen/wvowLbR?editors=0010

Hi, I've put together my site here [RETRACTED] but my portfolio section is sooooo laggy on safari and a little choppy on chrome. I've read through the tips and documentation today before asking for help, and I thought keyframes maybe the answer. But I can't get it to work. I tried to merge the array with the keyframes but I'm stuck. I added will-change transform to the 3 divs, but I read online that it maybe over kill I also thought it may be my image size, but that's not the issue either. Locomotive and gsap are my only external files. I'd appreciate any help. Thank you

I don't think I understand. Wasn't your problem, that the pinning is not working? In both of these examples the pinning works just fine. I'm confused ? These threads discuss how to prevent the browser-scrollbar from showin when using locomotive-scroll:

Hello, thanks for your reply, i did but still doesn't work with locomotive correctly

Hey @SPR1NG9 - welcome to the forums. Providing a minimal demo always helps better understand what your issue is or could be. It can always stem from several sources such as the HTML-markup or CSS, so solely looking at your code can only force guesses on what might be the issue. Judging from the JS you posted, I noticed that you have two ScrollTriggers there trying to pin the same element at the same time - that alone could be a cause of problems. Also quite recently there have been some questions from users using locomotive-scroll's data-attributes and having problems with pinning. I adressed some of the issues with that in these threads, noting that due to the way those data-attributes make the smooth-scrolling of loco work, it just wouldn't work properly with ScrollTrigger's pinning - are you using these ( data-scroll-section)? If so, these threads might be worth taking a look at: If this isn't the case for you, a minimal demo of your setup / issue really would help in getting to the bottom of your problem. Cheers, Paul

Hey kobracode. You've got a fair bit of code there. I highly recommend building things without Locomotive Scroll and then adding it at the end. It will likely make your development process easier. We have a demo that is listed in the ScrollTrigger demos page that shows how to create the custom scrollbar effect. Change what color? Regardless, you simply need to create a ScrollTrigger for each section and either use its callbacks or attach a tween to it that does what you need it to do.